欢迎转载，转载请注明出处。
前言
学习本系列Vue知识，需要结合本系列的一些demo。你可以查看我的 Github 或者直接下载 ZIP包 。
建议学习本系列之前已经会一个其他的前端框架，了解计算属性，数据绑定，模板语言等。零基础的话，看本教程可能不太适合。
一、第一个demo，Hello Word
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue-demos</title> <script src="../vue.js"></script> </head> <body> <!-- 通过双大括号进行数据绑定 --> <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue' } }); </script> </body> </html>
很简单，el指定Vue实例挂载的元素节点。data里面指定要显示的message的初值。当然，运行是依赖vue.js的，所以要加载script脚本。
二、v-bind指令
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue-demos</title> <script src="../vue.js"></script> </head> <body> <!-- v-bind: 将元素的属性跟Vue实例的属性绑定在一起。 将这个元素节点的 title 属性和 Vue 实例的 message 属性绑定到一起。 --> <div id="app"> <!-- 当然也可以缩写成<span :title="message"> --> <span v-bind:title="message"> Hover your mouse over me for a few seconds to see my dynamically bound title! </span> </div> <script> var app = new Vue({ el : '#app', data : { message : 'You loaded this page on ' + new Date() } }); </script> </body> </html>
v-bind: 将元素的属性跟Vue实例的属性绑定在一起。
三、v-if v-else指令
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue-demos</title> <script src="../vue.js"></script> </head> <body> <!-- v-if: 控制元素是否显示。 v-else 元素必须紧跟在 v-if 或 v-show 元素的后面——否则它不能被识别。 --> <div id="app"> <p v-if="seen">Now you see me</p> <p v-else>seen is false</p> </div> <script> var app = new Vue({ el : '#app', data : { seen : false } }); </script> </body> </html>
四、v-for指令
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue-demos</title> <script src="../vue.js"></script> </head> <body> <!-- v-for: 循环Vue实例的某些数据。用 in --> <div id="app"> <ol> <li v-for="todo in todos">{{todo.text}}</li> </ol> </div> <script> var app = new Vue({ el: '#app', data: { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue' } ] } }); </script> </body> </html>
五、v-on指令
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue-demos</title> <script src="../vue.js"></script> </head> <body> <!-- v-on: 绑定一个监听事件，用于调用我们 Vue 实例中定义的方法 方法定义在methods属性里面. 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。 尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。 .stop .prevent .capture .self --> <div id="app"> <p>{{message}}</p> <!-- 当然也可以缩写成<button @click="changeMessage"> --> <button v-on:click="changeMessage">Change Message</button> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js !' }, methods: { changeMessage: function(){ this.message = 'message be changed !' } } }); </script> </body> </html>
六、v-model指令
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue-demos</title> <script src="../vue.js"></script> </head> <body> <!-- v-model: 可以直接将表单输入的某个值跟Vue实例的属性绑定 --> <div id="app"> <p>{{message}}</p> <input v-model="message"></input> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js !' } }); </script> </body> </html>
