事件绑定方法
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码，事件的处理，简单的逻辑可以写在指令中，复杂的需要在vue对象的methods属性中指定处理函数。
<div id="example-1"> <!-- 在指令中写处理逻辑 --> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> ...... var example1 = new Vue({ el: '#example-1', data: { counter: 0 } })methods属性中指定处理函数：
<div id="example-2"> <!-- greet 是在下面定义的方法名 --> <button v-on:click="greet">Greet</button> </div> ...... var example2 = new Vue({ el: '#example-2', data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: { greet: function () { // `this` 在方法里指向当前 Vue 实例 alert('Hello ' + this.name + '!') } } })事件修饰符
实际开发中，事件绑定有时候牵涉到阻止事件冒泡以及阻止默认行为，在vue.js可以加上事件修饰符
<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form>可以用 v-model 指令在表单 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
单行文本框
<input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>多行文本框
<span>Multiline message is:</span> <p>{{ message }}</p> <textarea v-model="message" placeholder="add multiple lines"></textarea>复选框 单个复选框，绑定到布尔值：
<input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label>多个复选框，绑定到同一个数组：
<div id='example-3'> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div> ...... new Vue({ el: '#example-3', data: { checkedNames: [] } })下拉框
<div id="example-5"> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> ...... new Vue({ el: '...', data: { selected:'' } })模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
<div id="example"> {{ message.split('').reverse().join('') }} </div>这个表达式的功能是将message字符串进行反转，这种带有复杂逻辑的表达式，我们可以使用计算属性
<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> ...... var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } })侦听属性的作用是侦听某属性值的变化，从而做相应的操作，侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数,当你侦听的元素发生变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。
window.onload = function(){ var vm = new Vue({ el:'#app', data:{ iNum:1 }, watch:{ iNum:function(newval,oldval){ console.log(newval + ' | ' + oldval) } }, methods:{ fnAdd:function(){ this.iNum += 1; } } }); }