兼容性
Vue兼容性：Vue不兼容IE8，因为Vue采用的是IE8无法模拟的ECMAScript 5特性。支持所有兼容 ECMAScript 5 的浏览器。
Hello World
步骤：
1.引入Vue的库
2.创建Vue实例
3.接管DOM和定义数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="vue.js"></script> <title>Document</title> </head> <body> <div id="app">{{content}}</div> </body> <script> var app=new Vue({ el:"#app",//接管id=app里面的内容，el限制了vue接管的内容 data:{//定义数据 content:"hello world" } }); </script> </html>
变更内容，无需原生的document操作。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="vue.js"></script> <title>Document</title> </head> <body> <div id="app">{{content}}</div> </body> <script> var app=new Vue({ el:"#app",//接管id=app里面的内容，el限制了vue接管的内容 data:{//定义数据 content:"hello world" } }); setTimeout(()=>{ app.$data.content="bey world";//$data是data的别名 },2000) </script> </html>
todoList
模板指令，双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="vue.js"></script> <title>Document</title> </head> <body> <div id="app"> <!-- v-model与数据进行双向绑定，当input中的值发生变化的时候，Vue实例中的数据也会发生变化，当Vue数据发生变化的时候，input框中的值也会发生变化 --> <input type="text" v-model="inputValue" /> <button v-on:click="handleBtnClick">提交</button> <ul> <!-- v-for是一个模板指令，帮助我们去循环数据 --> <li v-for="item in list">{{item}}</li> </ul> </div> </body> <script> var app=new Vue({ el:"#app",//接管id=app里面的内容，el限制了vue接管的内容 data:{//定义数据 list:[], inputValue:"" }, methods:{//方法定义在methods中 handleBtnClick:function(){ alert('click') } } }); </script> </html>
可以在控制台中验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="vue.js"></script> <title>Document</title> </head> <body> <div id="app"> <!-- v-model与数据进行双向绑定，当input中的值发生变化的时候，Vue实例中的数据也会发生变化，当Vue数据发生变化的时候，input框中的值也会发生变化 --> <input type="text" v-model="inputValue" /> <button v-on:click="handleBtnClick">提交</button> <ul> <!-- v-for是一个模板指令，帮助我们去循环数据 --> <li v-for="item in list">{{item}}</li> </ul> </div> </body> <script> var app=new Vue({ el:"#app",//接管id=app里面的内容，el限制了vue接管的内容 data:{//定义数据 list:[], inputValue:"" }, methods:{//方法定义在methods中 handleBtnClick:function(){ this.list.push(this.inputValue) this.inputValue=""; } } }); </script> </html>
在整个过程中没有出现对DOM的操作，取而代之的是对数据的操作，我们不改变DOM，通过改变数据而改变页面。这样也是MVVM模式，底层会根据数据去渲染页面。
- new Vue：通过new Vue创建实例，可以传入一个选项对象。
- data：定义数据。当Vue实例被创建的时候，它将data对象中所有的property加入到Vue响应系统中，当property发生改变，视图就产生响应,这种响应时双向的。注意：只有在实例被创建时就存在data中的property才会时响应式的。可以事先设置初始值。如果使用
Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。-
var obj = { foo: 'bar' } Object.freeze(obj) new Vue({ el: '#app', data: obj })
-
- 前缀$：便于与用户定义的property区分开。
- v-for: 循环数据
- v-on：绑定事件
- v-model:和数据双向绑定