1 监听
在Vue.js中能够通过watch来监听数据的变动，比方通过watch实现的简略计数器：
<div id="app"> <p>计数器：{{count}}</p> <button @click="count++">点我减少</button> <p id="info"></p></div>var vm = new Vue({ el: '#app', data: { count:0 }})vm.$watch('count',function(newValue,oldValue){ document.getElementById("info").innerHTML = "批改前："+oldValue+"<br>批改后："+newValue;})成果如下：watch有两个参数，一个是要监听的变量，另一个是回调函数，回调函数承受两个参数，第一个参数是新值，第二个参数是旧值。
上面再来看一下无关单位换算的例子：
<div id="app"> 吨：<input type="text" v-model="ton"> 千克：<input type="text" v-model="kilograms"><br> 吨：<p id="tonInfo"></p> 千克：<p id="kilogramsInfo"></p></div>var vm = new Vue({ el: '#app', data: { ton:0, kilograms:0 }, watch: { ton:function(val) { this.kilograms = (this.ton = val) * 1000; }, kilograms:function(val) { this.ton = (this.kilograms = val) / 1000; } }})vm.$watch('ton',function(newValue,oldValue){ document.getElementById("tonInfo").innerHTML = "批改前："+oldValue+"<br>批改后："+newValue;})vm.$watch('kilograms',function(newValue,oldValue){ document.getElementById("kilogramsInfo").innerHTML = "批改前："+oldValue+"<br>批改后："+newValue;})2 款式绑定
class与style是HTML元素的属性，用于设置元素的款式，能够利用v-bind来设置款式属性。v-bind在解决class以及style时专门加强了，表达式的后果类型除了是字符串外，还能是对象或者数组。
2.1 class绑定
能够为v-bind:class设置一个对象，从而动静切换class：
<style> .active { width:100px; height: 100px; background: green; }</style><div id="app"> <div v-bind:class="{'active':isActive}"></div></div>vm = new Vue({ el: '#app', data: { isActive:true }})也能够传入多个属性来动静切换多个class：
.class0{ width:100px; height: 100px;}.class1{ background: green;}.class2{ background: red;}<div id="app"> <div class="class0" v-bind:class="{'class1':active1,'class2':active2}"></div></div>var vm = new Vue({ el: '#app', data: { active1:true, active2:true }})成果：
也能够利用对象进行简化：
<div id="app"> <div class="class0" v-bind:class="classObject"></div></div>var vm = new Vue({ el: '#app', data: { classObject: { class1:true, class2:true } }})2.2 计算属性
在v-bind:class中除了是一个对象还能绑定返回对象的计算属性，比方：
<div id="app"> <div v-bind:class="classObject"></div></div>var vm = new Vue({ el: '#app', data: { active1:true, error:{ value:true, type:'fatal' } }, computed:{ classObject:function() { return { class0:true, class1: this.active1 && !this.error.value, class2: this.error.value && this.error.type === 'fatal' } } }})成果如下：
2.3 数组
也能够传递给v-bind:class一个数组，数组的元素为变量，变量的内容为对应的CSS类名：
<div id="app"> <div v-bind:class="[active1,active2]"></div></div>var vm = new Vue({ el: '#app', data: { active1:'class0', active2:'class1' }})也能够利用三元表达式来切换：
<div id="app"> <div v-bind:class="[active1,active2 ? 'class1' : 'class2']"></div></div>3 内联款式
能够在v-bind:style中间接设置款式（留神前后带{}）：
<div id="app"> <div v-bind:style="{color:color,fontSize:fontSize+'px'}">测试</div></div>var vm = new Vue({ el: '#app', data: { color:'#FF0000', fontSize:30 }})当然也能够像绑定class一样间接绑定到一个对象上：
<div id="app"> <div v-bind:style="styleObject">测试</div></div>var vm = new Vue({ el: '#app', data: { styleObject: { color:'#FF0000', fontSize:'30px' } }})也能够应用数组进行绑定多个款式：
<div id="app"> <div v-bind:style="[styleObject1,styleObject2]">测试</div></div>var vm = new Vue({ el: '#app', data: { styleObject1: { color:'#FF0000', }, styleObject2:{ fontSize:'30px' } }# 5 })另外当v-bind:style须要非凡前缀的CSS时，比方transform，Vue会主动侦测并增加相应前缀。
4 事件处理
4.1 v-on
事件监听能够应用v-on：
<div id="app"> <button v-on:click="count += 1">点击减少1</button> <p>这个按钮被点击了{{count}}次</p></div>var vm = new Vue({ el: '#app', data: { count:0 }})
通常来说单击按钮会触发一个办法调用，在methods中指定即可：
<div id="app"> <button v-on:click="test">点击触发事件</button></div>var vm = new Vue({ el: '#app', methods:{ test:function(){ alert('Hello') //event示意是原生DOM事件 if(event) { alert(event.target.tagName) } } }})
当然也能够应用内联的JS语句：
<div id="app"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button></div>var vm = new Vue({ el: '#app', methods:{ say:function(val){ alert(val) } }})4.2 事件修饰符
Vue为v-on提供了事件修饰符来解决DOM事件细节，如event.preventDefault()或event.stopPropagation()，通过.示意的指令调用修饰符：
.stop：阻止事件冒泡.prevent：提交事件不再重载页面，如<form v-on.submit.prevent="onSumbit"></form>.capture：事件捕捉模式.self：只当事件在该元素自身（而不是子元素）触发时回调.once：事件只能点击一次
4.3 按键修饰符
Vue容许在v-on在监听键盘事件时增加按键润饰提示符：
<!--只有keyCode为13时调用submit()--><input v-on:keyup.13="submit">keyCode值对应ASCII表，为了不便，Vue为罕用的按键提供了别名：
.esc.delete（删除+退格）.enter/.space/.tab.up/.down/.left/.right.ctrl/.alt/.shift/.meta
当然也能够进行按键的组合，应用.连贯即可。
例子如下：
<div id="app"> <input type="text" placeholder="请按下空格" v-on:keyup.space="spacePressed"><br> <input type="text" placeholder="请按下Ctrl+C" v-on:keyup.ctrl.67="ctrlCPressed"> <!-- <input type="text" placeholder="请按下Ctrl+C" @keyup.ctrl.67="ctrlCPressed"> --> <p id="info"></p></div>var vm = new Vue({ el: '#app', methods:{ spacePressed:function(){ document.getElementById("info").innerHTML = "您按下了空格"; }, ctrlCPressed:function(){ document.getElementById("info").innerHTML = "您按下了Ctrl+C"; } }})