一、定位
1、vue.js：是用于web前端开发的工具库，定位是用来控制数据和完成特效。
2、jQuery：定位则是用来获取元素和完成特效。
二、创建vue对象及必有参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> </head> <body> <div id="id_div1"> <!-- vue对象的操作范围只在该标签内部 --> <span>{{name}}</span><span>的年龄是</span><span>{{age}}</span> </div> <!-- 编辑vue对象 --> <script> var vueObj = new Vue({ // 新建一个vue对象 el: '#id_div1', // el属性用来设置vue对象可操作的标签范围，一般是id选择器 data: { // data属性用于存放vue对象要操作标签的具体数据 name: 'tom', age: 18, } }) </script> </body> </html>
三、vue.js的MVVM模式 --- model view viewmodel
1、model：指的是vue对象的data属性里面的具体数据。
2、view：指的是数据在html页面中显示。
3、viewmodel：指的是vue对象，它是vue.js的核心，连接着view和model，保证了数据和显示的一致性，正是通过vue对象完成了数据在页面中的自动显示。
四、vue对象的属性
1、console.log(vueObj.$el)：该vue对象的操作范围。
2、console.log(vueObj.$data)：该vue对象可显示到页面中的数据。
3、console.log(vueObj.$data.name)：访问具体某个数据。
4、console.log(vueObj.name)：效果同上。
五、显示数据
1、{{ }}：只可用于闭合标签，不仅可以显示纯文本，还可以填入符合js语法的表达式。
2、v-model：在表单输入框中给标签加上v-model属性来控制数据显示。
3、v-html：给闭合标签加上v-html属性来插入html代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> </head> <body> <div id="id_div1"> <p>{{age*10}}</p> <p>{{age<10? type1:type2}}</p> <p>{{name.toUpperCase()}}</p> <p><input type="text" v-model="name"></p> <p v-html="tag"></p> </div> <script> var vueObj = new Vue({ el: '#id_div1', data: { name: 'tom', age: 18, tag: '<h1>标题</h1>', type1:'儿童', type2:'少年' } }) </script> </body> </html>