數據綁定語法
文本:使用大括號{{}},處理單次插值{{* msg}}
原始html,{{{html}}} 存在問題
綁定表達式:{{}}里面支持全功能的js表達式(只能包含 單個 表達式)
過濾器用| 表示 {{message |fileterA 'arg1' arg2 |filterB}} arg1為字符串參數,arg2為表達式計算
指令 v-if 如果綁定傳參數,后面可以跟:號v-bind:href='url'
修飾符:.literal將值解析為一個字面字符串而不是一個表達式
縮寫: v-bind=>: ,v-on=>@
計算屬性:computed
Class與style綁定
<div class="static" v-bind:class="{'class-a':isA,'classB':isB}"></div>
綁定數組:v-bind:class <div v-bind:class="[classA,classB]"></div>
綁定到style對象:<div v-bind:style="styleObj"></div>
data:{
styleObj:{
color:'red',
fontSzie:'13px'
}
}
條件渲染v-if,可以針對模板元素使用(隱藏dom),v-else可以跟在其后
<template v-if='ok'>
<h1>title</h1>
<p>Paragraph</p>
</template>
展示v-show:切換display,不支持template
列表渲染 v-for="item in items" 相關屬性:$index
track-by , $index,$set(),$remove()
v-for 鍵:$key,也可以是整數,
<div>
<span v-for="n in 10"> {{n}}</span>
</div>
方法處理器v-on,在method對象中定義方法,傳入原生事件$event,還有事件修飾符:.stop阻止事件冒泡 .prevent 不再重載頁面 ,v-on可以添加按鍵修飾符:.13只有在keycode是13的時候調用常用的鍵可以使用別名:'enter tab delete esc space up down left right'
表單控件綁定v-model,對于勾選框值為true | false,多個綁定到同一數組,
v-model在input事件中同步輸入框與數據,可以欠佳一個特性lazy,從而改到在change事件中同步,將用戶的輸入轉為number類型(若轉換為NaN則返回原值)
debounce 設置一個最小的延時
注冊組件Vue.component(tag,constructor)
最后編輯于 ：2017.12.05 11:43:06
?著作權歸作者所有,轉載或內容合作請聯系作者
