能夠利用v-model
在表單控件元素上建立雙向的數據綁定,v-model
會根據控件類型自動選取正確的方法來更新元素。html
文本框的綁定例子以下:數組
<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:'' } })
data
中的值爲<input>
的value
,如:app
<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' } })
單個多選綁定的數據是一個布爾值,多個多選綁定的是一個數組:函數
<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:[] } })
<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:'' } })
.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">
修飾符能夠混合使用,例子:ui
<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>
組件能夠擴展HTML元素,封裝可重用的代碼,組件系統能夠用獨立可複用的小組件來構建大型應用,幾乎任意類型的應用界面均可以抽象爲一個組件樹。
註冊一個全局組件語法以下:this
Vue.component(tagName,options)
其中tagName
爲組件名,options
爲配置選項。註冊後,按以下方式調用組件:spa
<tagName></tagName>
全局組件就是全部實例都能使用的組件,例如:3d
<div id="app"> <test-title></test-title> </div>
Vue.component('test-title',{ template:'<h1>Test Title</h1>' }) new Vue({el:'#app'})
注意標籤名不能大寫,好比寫成:code
<div id="app"> <testTitle></testTitle> </div>
Vue.component('testTitle',{ template:'<h1>Test Title</h1>' })
頁面不會顯示標題。component
局部組件就是在本實例內使用的組件,好比:
<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 } })
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'})
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
是單向綁定的,當父組件屬性變化時傳導到子組件,可是不會反過來。
父組件使用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>
data
上面的例子中data
不是一個對象而是一個函數,若是data
直接返回一個已有對象會影響其餘實例,好比修改上面的data
爲:
var counter = { counter:0 } //... data:function(){ return counter }
效果以下:
也就是子組件共享了數據,而修改成:
data:function(){ return { counter:0 } }
效果以下:這是由於返回給每一個實例一份獨立的拷貝。