第一个Vue.js案例
使用Vue有如下几步
引入文件头
加入数据输出框
-
创建Vue对象，定义数据
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 第一步：引入头文件 -->
<script src="../vue-2.4.0.js"></script>
<title>Document</title>
</head>
<body>
<!-- 第二步：加入数据输出框 -->
<div id="app">
<div>{{msg + '---' + 123}}</div>
<div>
{{1+2}}
</div>
</div>
<script>
// 第三步：创建Vue对象，定义数据
var vm = new Vue({
el : '#app',
data : {
msg : 'hello Vue!!!'
}
});
</script>
</body>
</html>
案例分析
1、示例参数分析
el : 元素挂载位置（值可以是css选择器，或者DOM元素）
data：数据模型（值是一个对象）
2、插值表达式用法
将值填充到HTML标签中
插值表达式支持基本的计算操（符合js代码规范即可。）
3、Vue代码运行原理分析
概述编译过程的概念（Vue语法->原生语法）
例如：插值表达式就在内部将其解析为js代码