一、指令與模板
指令：當表達式的值改變是相應的將其某些行爲應用到DOM上
- v-bind 動態指令，簡寫爲 ：
- v-on 綁定事件監聽器，簡寫爲 @
- v-text 更新數據，覆蓋已有結構
- v-html 可以解析數據中的HTML結構，更新innerHTML（內容按照普通HTML插入-不會作爲vue模板進行編譯)，配合v-html組合模板使用，很危險儘量不用
- v-show 根據值的真假，切換元素的display cssCSS屬性
- v-if 根據值得真假切換元素會被銷燬，重建
- v-else-if 多條件判斷爲真則渲染
- v-else 條件都不符合渲染
- v-for 基於源數據多次渲染元素或模板塊
- v-modle 在表單控件元素上創建雙向數據綁定
- v-pre 跳過元素和子元素的編譯過程
- v-once 之渲染一次，隨後數據更新不重複渲染
- v-cloak 隱藏爲編譯的Mustache語法，css中設置【v-closk]{display:none}
二、HTML模板（寫死的）
插值：
1、文本：
數據綁定最常見的形式是就是使用"Mustadhe"語法（雙大括號）的文本插值；（替換實例上的屬性值，當值改變時，插值內容處會自動更新）
2、原生HTML：
雙大括號將數據解釋爲純文本，非HTML,需要使用v-html指令纔可解析成Html文本（危險，儘量不要用）
3、屬性：
使用v-bind指令進行綁定，可以響應變化
4、使用javascript表達式：
寫簡單表達式{{1+2}}、{{true?'yes':'no'}}、{{message.split('').reverse().join('')}}
參數：
在指令後用冒號指明
三、字符串模板（動態拼接的）
template字符串（替換掛載點的原本模板）
在選項對象中添加一個template屬性
方法1、template：字符串**(ES6中字符串拼接"``"可換行)
方法2、<script type="x-template" id="temp">把html做成片段</script>
(template:"#temp")(方法二不能跨文件使用)
四、模板-render函數(手動創建模板)（接近DOM）
1、在選擇對象中添加render函數，參數爲createElement,即可寫入要生成的標籤
2、語法：
render 選項對象的屬性
createElement（標籤名，[數據對象]，子元素）;
3、數據對象屬性：
class:{}, //綁定class，和v-bind:class一樣的API
style:{}, //綁定樣式，和v-bind:class一樣的API
attrs:{}, //添加行間屬性
domProps:{}, //DOM元素屬性
on:{}, //綁定事件
nativeOn:{}, //監聽原生事件
directives:{}, //自定義指令
scopedSlots:{}, //slot作用域
slot:{}, //定義slot名稱
key:"key", //給元素添加唯一標誌
ref:"ref", //引用信息
render(createElement){
return createElement(//返回生成的出結構，調用方法
"ul",//第一個參數爲標籤名，（對象）
//數據對象屬性
{
class: {
bg:true
},
style:{
fontSize:"50px"
},
attrs:{
asd:"mimmi"
},
domProps:{
innerHTML:"<li>我是HTML</li>"
}
},
//ui的子元素
[
createElement("li",1),
createElement("li",2),
createElement("li",3)
]
);
}
});