title: 2、指令和模板
date: 2017-07-26 09:19:40
tags: vue筆記
指令
什麼是指令
指令是一種特殊的自定義行間屬性，指令的職責就是當其表達式的值改變時，響應的將某些行爲應用到DOM上，在Vue中，指令以v-開頭。以v-bind指令爲例：
<div id="app">
<!--v-bind是指令，作用是動態的綁定數據，簡寫爲':'，id是它的參數-->
<span v-bind:id="{{ id }}">{{ message }}</span>
</div>
var vm = new Vue({
el: '#app',
data: {
message: 'hello,Vue!',
id:'123'
}
})
還有很多常用指令可以查看官網的API。
模板
Vue中有三種模板可以使用，html模板、字符串模板(template)、render函數。
html模板
基於DOM的模板，只要是有效的可解析的html就可以。
html模板的插值
插值就是寫在 { {} } 內部的內容。有以下四種情況可以使用：
文本：就是
{ {key} }，替換實例上的data裏的屬性值，插值內容會自動更新。原生的html： 上面
{ {} }輸出的是文本，不會解析html，如果在data中有html: '<div>hello Vue</div>'這樣的數據，直接{ {html} }只會將其當做文本而不是html元素。如果需要被當做dom渲染，需要在父元素設置v-html="html"。行內的屬性：使用
v-bind進行綁定，可以響應變化。使用javascript表達式：
{ {} }內部可以寫簡單的表達式(不要寫複雜語句)，可以寫比如{ { true?'yes':'noe' } }或者{ {'data'+message} }，如果複雜的就寫到計算屬性中去。
字符串模板(template)
template是Vue實例中的選項的一個屬性。
模板將會替換掛載的元素，掛載元素的內容都將被忽略，根節點只能有一個，也可以將html結構寫在一對<script>標籤中，設置type="X-template"
字符串的方式
替換掛載元素：
<div id="demo1">
<span>hi Vue</span>
</div>
var str = '<span>{{ message ]}}</span>'
new Vue({
el: '#demo1',
data:{
message: 'hello Vue'
},
template:str
})
最終頁面會顯示hello Vue，會將新渲染的字符串模板替換掉原來的元素
需要注意的是：根節點只能有一個，var str = '<span>{ {message} }</span><span>11</span>'這種寫法是錯誤的，因爲最外層的根節點只能是一個。只能去包含別的元素，比如var str = '<span>{ {message} }<span>11</span></span>'這樣就是對的。
script標籤的方式
這種模板也可以寫在<script>標籤中，就和平時用的模板文件是相同的。
<script type="X-template" id="temp">
<span>
{{ message }}
<span>11<span>
</span>
</script>
new Vue({
el: '#demo1',
data:{
message: 'hello Vue'
},
template: '#temp'
})
render函數
render是Vue實例中的屬性，在寫組件會經常使用。
通過上面字符串方式創建的元素不會直接放到頁面上，而是要通過render函數編輯，虛擬DOM樹到真實DOM樹就是通過render實現的。
render函數需要傳入createElement參數，用這個參數創建模板並return。createElement也是一個方法。
第一個參數是要創建模板的根元素。
第二個參數是可選參數，表示該根元素上的屬性，這裏的屬性遵循的是指令的規則而不是普通DOM中的寫法。其中類名是class、樣式屬性是style、自定義屬性是attrs、綁定事件時on、dom元素屬性是domProps。其中dom元素屬性不是標籤裏的屬性，而是元素對象身上的。就好比length一樣。
第三個參數是數組，數組的元素是模板中的子元素。同樣使用createElement創建。
var vm = new Vue({
el: '#demo',
data: {
class: true
},
render: function(createElement){
return createElement(
'ul', // 根元素
{
class: { // 這裏的屬性是遵循v-bind:class而不是dom中的那種class。
bg: true // 添加class名爲bg
},
style: { // 設置行內樣式,也是和v-bind:style一樣的
fontSize: '50px'
},
attrs: { // 設置自定義屬性
abc: 'miaov'
},
domProps: {
innerHTML: '<li>我是html</li>' // 這裏創建了innerHTML相當於是ul.innerHTML='<li>我是html</li>'，下面數組裏的那些就會被覆蓋了
},
on: {
// 這裏綁定事件，和v-on是一樣的
}
},
[ // 子元素寫在數組裏，
createElement('li',1),
createElement('li',2),
createElement('li',3)
]
)
}
})