vue指令
v-if
????v-if指令可以完全根據(jù)表達式的值在DOM中生成或者移除一個元素丹锹。
????v-if是惰性的,如果初始渲染條件為假队他,則什么也不做,在條件第一次變?yōu)檎鏁r才開始局部編譯峻村,編譯會被緩存起來麸折。
v-show
????v-show指令是根據(jù)表達式的值來顯示或者隱藏HTML元素
????v-show和v-if比較起來,v-if有更高的切換消耗粘昨,v-show有更高的初始渲染消耗垢啼。因此如果有頻繁的切換,使用v-show更好张肾,如果在運行時條件不大可能改變芭析,用v-if比較好。
v-else
????v-else就是javascript里的else的意思吞瞪。搭配v-show使用
v-model
????v-model是用來在input馁启,select,radio芍秆,checkbox惯疙,text等表單控件上創(chuàng)建雙向數(shù)據(jù)綁定。
????除了比較常見的綁定數(shù)據(jù)形式妖啥,v-model后還可以添加參數(shù)霉颠。
1.number
????如果想把輸入的數(shù)據(jù)轉(zhuǎn)換為Number類型,(原值轉(zhuǎn)換為NaN荆虱,則返回原值)可以添加一個number特性.
2.lazy
<input v-model.lazy="msg">
????此參數(shù)可以改變輸入框的值和數(shù)據(jù)的同步蒿偎,同步操作將會在change事件觸發(fā)朽们。
3.trim
<input v-model.trim="msg">
如果要自動過濾用戶輸入的首尾空白字符,可以給 v-model 添加 trim 修飾符
4.debounce(vue 2.0廢除)
????延時同步輸入的值和數(shù)據(jù)诉位,例如在輸入的時候發(fā)送ajax請求骑脱,比較有用
<input v-model="msg" debounce="1000">
輸入框中輸入數(shù)據(jù)1s之后,data中的msg才會改變
v-for
????v-for需要特殊的別名,形式為"item in items",vue.js 1.0.17以后版本支持of分隔符,"item in/of items",vue2.0規(guī)定最好加上":key=''",這樣有利于數(shù)組的遍歷,每個item都有唯一的key不从。
v-for也支持整數(shù)惜姐。例如v-for="n in 10",會將模板重復整數(shù)次.
還可以遍歷對象 (value,key) in obj ; index表示item在數(shù)組的索引椿息。
v-text
v-text指令可以更新元素的textContent歹袁,在內(nèi)部,{{msg}}插值被編譯為textNode的一個v-text指令寝优。
<span v-text="msg"></span>
// 等價于
<span>{{msg}}</span>
v-html
v-html可以更新元素的innerHtml条舔。
<div v-html="html"></div>
// 等價于
<div>{{{html}}}</div>
不建議在網(wǎng)站上直接動態(tài)渲染任意html片段,這樣很容易導致XSS攻擊乏矾。
v-bind
v-bind指令用于綁定屬性孟抗,class,style等钻心,語法糖是":src=''"凄硼。
在綁定class和style時,支持綁定數(shù)組和對象
// 綁定到數(shù)組
<div id="example" :class="[classA,classB,classC,classD]"></div>
var example = new Vue({
el:'#example',
data:{
classA:'A',
classB:'other',
classC:false,
classD:true
}
})
// 會被編譯為
<div class="A other classD"></div>
// 當沒有參數(shù)時捷沸,可以綁定到對象摊沉,但是對象的key會被轉(zhuǎn)換為小寫
<div id="example" v-bind="{id:some,'OTHERATTR':other}"></div>
var example = new Vue({
el:'#example',
data:{
some:'some',
other:'other'
}
})
// 會被編譯為
<div id="some" otherattr="other"></div>
// 注意綁定到對象時,對象key轉(zhuǎn)換為小寫痒给。
v-on
v-on指令用于綁定事件監(jiān)聽器说墨。v-on也有語法糖,即@;
v-on后面可以增加修飾符
@click.stop="" //停止冒泡
@click.prevent="" //阻止默認行為
@click.stop.prevent="" //以上二者綜合
@click.self="" //本身觸發(fā)才執(zhí)行函數(shù)
@keyup.enter="" //在指定鍵上觸發(fā)回調(diào)
vue提供的鍵值有[esc:27,tab:9,enter:13,space:32,up:38,left:37,right:39,
down:40,delete:[8,46]];
ref
父組件上注冊子組件的索引,有利于直接訪問
this.$refs訪問
v-once
此指令只綁定一次.
如果您有更多新的想法苍柏,歡迎交流尼斧,共同進步。