1 表单绑定
能够利用v-model在表单控件元素上创立双向的数据绑定，v-model会依据控件类型主动选取正确的办法来更新元素。
2 文本框
文本框的绑定例子如下：
<div id="app"> <p>input</p> <input v-model="message"> <p>{{message}}</p> <p>textarea</p> <textarea v-model="message2"></textarea></div>new Vue({ el:'#app', data:{ message:'', message2:'' }})3 按钮
3.1 单选
data中的值为<input>的value，如：
<div id="app"> <input type="radio" value="Value1" v-model="picked"> <input type="radio" value="Value2" v-model="picked"> <span>选中的值为：{{picked}}</span></div>new Vue({ el: '#app', data: { picked:'Value1' }})3.2 多选
单个多选绑定的数据是一个布尔值，多个多选绑定的是一个数组：
<div id="app"> <input type="checkbox" v-model="checked"> <span>是否选中：{{checked ? "选中" : "不选中"}}</span> <br> <input type="checkbox" value="Value1" id="box1" v-model="checked2"> <label for="box1">Value1</label> <input type="checkbox" value="Value2" id="box2" v-model="checked2"> <label for="box2">Value2</label> <input type="checkbox" value="Value3" id="box3" v-model="checked2"> <label for="box3">Value3</label> <br> <span>选中的值为：{{checked2}}</span></div>new Vue({ el: '#app', data: { checked:'Value1', checked2:[] }})4 列表
<div id="app"> <select name="fruit" v-model="selected"> <option value="">请抉择一个</option> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> </select> <div> 抉择的水果是：{{selected}} </div></div>new Vue({ el: '#app', data: { selected:'' }})5 修饰符
.lazy：默认状况下，v-model在input事件中同步输入框的值与数据，但能够增加一个修饰符.lazy，从而转变为在change事件中同步数据，比方<input v-model.lazy="meesage">.number：主动将用户的输出值转化为Number类型，如果原值的转换后果是NaN会返回原值，比方<input v-model.number="age" type="number">.trim：主动过滤用户输出的首尾空格，比方<input v-model.trim="message">
修饰符能够混合应用，例子：
<div id="app"> <input type="text" v-model.lazy="test"> <br> <p>{{test}}</p> <input type="text" v-model.number.lazy="test2"> <br> <p>{{test2}}</p> <input type="text" v-model.trim="test3"> <br> <p>{{test3}}</p></div>6 组件
组件能够扩大HTML元素，封装可重用的代码，组件零碎能够用独立可复用的小组件来构建大型利用，简直任意类型的利用界面都能够形象为一个组件树。
注册一个全局组件语法如下：
Vue.component(tagName,options)其中tagName为组件名，options为配置选项。注册后，按如下形式调用组件：
<tagName></tagName>7 全局组件
全局组件就是所有实例都能应用的组件，例如：
<div id="app"> <test-title></test-title></div>Vue.component('test-title',{ template:'<h1>Test Title</h1>'})new Vue({el:'#app'})留神标签名不能大写，比方写成：
<div id="app"> <testTitle></testTitle></div>Vue.component('testTitle',{ template:'<h1>Test Title</h1>'})页面不会显示题目。
8 部分组件
部分组件就是在本实例内应用的组件，比方：
<div id="app"> <test-title></test-title></div>new Vue({ el: '#app', components: { 'test-title': { template:'<h1>Test Title</h1>' } }})也能够把模板的内容分离出来成为一个变量：
var myTemplate = { template:'<h1>Test Title</h1>'}new Vue({ el: '#app', components: { 'test-title': myTemplate }})9 prop
prop是子组件来承受父组件传递过去的数据的一个自定义属性，父组件的数据须要通过props把数据传递给子组件，子组件须要显示地应用props选项申明prop：
<div id="app"> <test-title title="Test Title"></test-title></div>Vue.component('test-title',{ props:['title'], template:'<h1>{{title}}</h1>' //template:'<h1>{{this.title}}</h1>'})new Vue({el: '#app'})9.1 动静prop
相似于v-bind绑定HTML个性到一个表达式，也能够利用v-bind动静绑定props值到父组件的数据中，每当父组件的数据变动时，该变动会传递给子组件：
<div id="app"> <input v-model="message"> <br> <test-title v-bind:title="message"></test-title></div> Vue.component('test-title',{ props:['title'], template:'<h1>{{title}}</h1>'})new Vue({ el: '#app', data: { message:'' }})首先当输入框内容发生变化时，更新父组件的message，再传递给子组件的title，最初更新<test-title>的内容。
上面是一个绑定无序列表的例子：
<div id="app"> <ol> <test-item v-for="i in items" v-bind:val="i"></test-item> </ol></div>Vue.component('test-item',{ props:['val'], template:'<h1>{{val.text}}</h1>'})var vm = new Vue({ el: '#app', data: { items:[ {text:'111'}, {text:'222'} ] }})留神prop是单向绑定的，当父组件属性变动时传导到子组件，然而不会反过来。
9.2 子组件回传
父组件应用props传递数据给子组件，如果子组件把数据传递回去须要应用自定义事件，能够在v-on绑定自定义事件，每个Vue实例都实现了事件接口，也就是：
- 应用
$on(eventName)监听事件 - 应用
$emit(eventName)触发事件
另外父组件能够在应用子组件的中央间接用v-on来监听子组件触发的事件，例子：
<div id="app"> <p>总计：{{total}}</p> <test v-on:increment="incrementTotal"></test> <br><br> <test v-on:increment="incrementTotal"></test></div>Vue.component('test',{ template:'<button v-on:click="incrementHandler">点击减少，目前为{{counter}}</p>', data:function(){ return { counter:0 } }, methods:{ incrementHandler:function(){ this.counter += 1 this.$emit('increment') } }})new Vue({ el: '#app', data: { total:0 }, methods:{ incrementTotal:function(){ this.total += 1 } }})成果：
当点击任意一个按钮减少时，更新子组件内的counter，同时应用this.$emit向父组件传值，这里没有参数，如果有参数的话在前面加上即可：this.$emit("func",parm)。
父组件中援用子组件的中央须要增加v-on:func，其中v-on:func中的func须要与this.$emit("func")中的func同名，接着在v-on:func="func2"中批改func2为父组件的函数即可。简写形式为：
@func="func2"在某个组件的根元素上监听一个原生事件能够应用.native润饰v-on，比方：
<test-title v-on:click.native="func"></test-title>9.3 对于子组件的data
下面的例子中data不是一个对象而是一个函数，如果data间接返回一个已有对象会影响其余实例，比方批改下面的data为：
var counter = { counter:0}//...data:function(){ return counter}成果如下：
也就是子组件共享了数据，而批改为：
data:function(){ return { counter:0 }}成果如下：
这是因为返回给每个实例一份独立的拷贝。