1、模板語法
Mustache語法:{{ msg }}
Html賦值:v-html=“”
綁定屬性:v-bind:id=“”
使用表達式:{{ ok ? 'YES' : 'NO'}}
文本賦值:v-text=“”
指令:v-if=“”
過濾器:{{message | capitalize}} 和 v-bind:id="rawId | formatId"
2、Class 和Style綁定
對象語法:v-bind:class="{ active:isActive,'test-danger':hasError}"
數組語法:
<div v-bind:class="{ activeClass, errorClass}">
datas:{
activeClass: "active',
errorClass: "text-danger'
}
style綁定-對象語法:v-bind:style="{ color:activeColor,fontSize:fontSize+'px'}"
3、條件渲染
v-if:為ture的時候渲染
v-else
v-else-if
v-show:
v-cloak:同步隱藏
v-if、v-show:區別,v-show控制的是div,代碼有被加載,v-if控制的是dom,為false時候代碼不會被加載。
4、vue事件處理
v-on:click="greet" 或者 @click="greet"
v-on:click.stop、v-on:click.stop.prevent、v-on:click.self、v-on:click.once
v-on:keyup.enter (enter/tab/delete/space/up/down/left/right)
5、vue組件
全局組件和局部組件
父子組件通訊-數據傳遞(不予許子組件修改父組件的data,通過Emit event去實現父子組件的通訊)
slot