vue官网：https://cn.vuejs.org/
学习路线：VueJs2.0建议学习路线
在浏览器上安装 Vue Devtools工具
1.vue入门
<script src="vue.js"></script>是引入下载的js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <!--挂载点--> <div id="app"> <!--模板，也可在js中写--> <!--{{msg}}插值表达式--> <h1>nihao {{msg}}</h1> </div> <script> new Vue({ el: "#app", //template: '<h1>nihao {{msg}}</h1>',//模板 data: {//数据项 msg: "hello" } }); </script> </body> </html>
2.语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入js，使用CDN方式--> <script src=" https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <!--{{ }} 插值表达式：用于输出对象属性和函数返回值，可以理解为是v-text--> <p>{{ message }}</p> <p>{{ myFun() }}</p> <br/> <!--v-html 指令用于输出 html 代码--> <div v-html="a"></div> <!--v-text渲染数据 指令用于输出 文本 代码--> <div v-text="a"></div> <br/> <!--v-bind属性绑定,常用语class属性的绑定 指令被用来响应地更新 HTML 属性--> <input type="text" v-bind:placeholder="message"/><br/> <!--v-bind 缩写--> <input type="text" :placeholder="message"/><br/> <!--v-model双向数据绑定，绑定在input的value，多用在input，select标签中，绑定数据--> <input type="text" v-model="message"/> + <input type="text" v-model="message2"/> = {{addString}} <!--v-if：控制显示 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素，简单来说就是对p标签的新增和插入--> <p v-if="seen">seen的值为true</p> <p v-else="seen">seen的值为false</p> <!--v-show，区别于v-if，有css样式添加和取消的display:none，他不会去创建和新怎dom，所以性能更高 ，使用：如果只做一次现影的话用v-if，如果多次切换用v-show--> <h1 v-show="show">show Hello!</h1> <!-- v-on 指令，事件绑定 它用于监听 DOM 事件--> <button v-on:click="add">点我+1</button> <!-- v-on 缩写--> <button @click="sub">点我-1</button> <span>{{count}}</span> <!--v-for循环： site in sites --> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> <!--v-for循环对象--> <ul> <!--使用:key=，会提高效率，但是，key值不能相同--> <li v-for="(value, key, index) in object" :key="index"> {{ index }}. {{ key }} : {{ value }} </li> </ul> <ul> <li v-for="n in 5"> {{ n }} </li> </ul> </div> <script> var vm = new Vue({//实例化 Vue el: '#app',//el: 元素挂载点，与DOM中节点进行绑定，DOM 元素中的 id data: {//data 用于定义数据属性 message: 'hello vue', message2: 'haha', a: '<a>v-html和v-text区别</a>', seen: false, count: 0, show: true, sites: [ {name: 'Runoob'}, {name: 'Google'}, {name: 'Taobao'} ], object: { name: '菜鸟教程', url: 'http://www.runoob.com', slogan: '学的不仅是技术，更是梦想！' } }, computed: {//计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。 addString: function () { return this.message + this.message2; } }, methods: {//methods 用于定义的函数，可以通过 return 来返回函数值 myFun: function () { return 'function test'; }, add: function () { return vm.count++; }, sub: function () { return vm.count--; } }, watch: {//监听器，对象监听的方法，对象发生改变时，例如：count变化,才会回调watch方法 'count': function (val, oldVal) {//val:发生变化的数据，oldVal：变化之前的值 console.log(val, oldVal); } } }); //除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来 console.log(vm.message);//vm.data对象中的属性 console.log(vm.$data);//vm.$data,Vue实例的属性data对象 console.log(vm.$el);//vm.$el,获取DOM console </script> </body> </html>
3.todoList示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <div> <input type="text" v-model="inputValue"> <button @click="putList">提交</button> </div> <ul> <li v-for="(ls,index) in list" :key="index">{{ls}}</li> </ul> </div> <script> new Vue({ el: "#app", data: {//数据项 inputValue: "", list:[] }, methods: { putList: function () { this.list.push(this.inputValue); this.inputValue = ""; } } }); </script> </body> </html>