第一个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代码