var exampleVM2 = new Vue({
el: '#example',
data: {
ok: false
}
})
將v-show用在組件上時(shí)，因?yàn)橹噶畹膬?yōu)先級(jí)v-else會(huì)出現(xiàn)問(wèn)題，所以不要這樣做。我們可用用另一個(gè)v-show替換v-else。
v-model
v-model指令用來(lái)在input、select、text、checkbox、radio等表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定的。根據(jù)控件類(lèi)型v-model自動(dòng)選取正確的方法更新元素。代碼如下：
new Vue({
el: '#example',
data: {
data:{
name:'',
sex:'',
interest:[],
identity:''
}
}
})
除了以上用法，在v-model指令后面還可以添加多個(gè)參數(shù)（number、lazy、debounce）。
1.number
如果想要用戶的輸入自動(dòng)轉(zhuǎn)換為Number類(lèi)型（如果原值的轉(zhuǎn)換結(jié)果為NAN，則返回原值），則可以添加一個(gè)number特性。
2.lazy
在默認(rèn)情況下，v-model在input事件中同步輸入框的值與數(shù)據(jù)，我們可以添加一個(gè)lazy特性，從而將數(shù)據(jù)改到在change事件中發(fā)生。代碼如下：
{{msg}}
new Vue({
el: '#example',
data: {
msg:'內(nèi)容是在change事件后才改變的~'
},
watch:{
}
})
3.debounce
設(shè)置一個(gè)最小的延時(shí)，在每次敲擊之后延時(shí)同步輸入框的值與數(shù)據(jù)。如果每次更新都要進(jìn)行高耗操作（例如，在input中輸入內(nèi)容時(shí)要隨時(shí)發(fā)送ajax請(qǐng)求），那么它較為有用。
v-repeat
v-repeat（已經(jīng)廢除）指令基于源數(shù)據(jù)重復(fù)渲染元素?？梢允褂?index來(lái)呈現(xiàn)相對(duì)應(yīng)的數(shù)組索引。不細(xì)講。
數(shù)組變動(dòng)檢測(cè)
Vue.js 包裝了被觀察數(shù)組的變異方法，故它們能觸發(fā)視圖更新。被包裝的方法有：push(), pop(), shift(), unshift(), splice(), sort(), reverse()
example1.items.push({ message: 'Baz' });
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/);
});vue.js還增加了兩個(gè)方法來(lái)觀測(cè)變化：$set、$remove。
我們應(yīng)該盡量避免直接設(shè)置數(shù)據(jù)綁定的數(shù)組元素，因?yàn)檫@些變化不會(huì)被vue.js檢測(cè)到，因而也不會(huì)更新視圖渲染?？梢允褂?set方法：
demo.items.$set(0,{childMsg:'Changed!'})
$remove是$splice的語(yǔ)法糖，用于從目標(biāo)數(shù)組中查找并刪除元素：
demo.items.$remove(0);
注：ECMAScript5無(wú)法檢測(cè)到新屬性添加到一個(gè)對(duì)象上或者在對(duì)象上刪除。要處理這種情況，Vue.js增加了三種方法：$add(key,value)、$set(key,value)、$delete(key,value)，這些方法可以用來(lái)添加和刪除屬性，同時(shí)觸發(fā)視圖更新。
內(nèi)置過(guò)濾器
1.filterBy(0.12版本)
實(shí)現(xiàn)如圖所示：
new Vue({
el: '#example',
data: {
users:[
{
name:'快車(chē)',
tag:'1'
},
{
name:'出租車(chē)',
tag:'2'
},
{
name:'順風(fēng)車(chē)',
tag:'3'
},
{
name:'專車(chē)',
tag:'4'
}
]
}
})
在輸入框中輸入'專車(chē)'，得到如圖所示的結(jié)果：
2.orderBy(0.12版本)
實(shí)現(xiàn)降序排列，例：
new Vue({
el: '#example',
data: {
field:'tag',
reverse:-1,
users:[
{
name:'出租車(chē)',
tag:'2'
},
{
name:'快車(chē)',
tag:'1'
},
{
name:'順風(fēng)車(chē)',
tag:'3'
},
{
name:'專車(chē)',
tag:'4'
}
]
}
})
v-for
使用$index來(lái)獲得相應(yīng)的數(shù)組索引。
{{$index}} - {{parentMessage}} - {{item.msg}}
new Vue({
el: '#example',
data: {
parentMessage:'滴滴',
items:[
{msg:'順風(fēng)車(chē)'},
{msg:'專車(chē)'}
]
}
})
注：vuejs1.0.17及以后低版本支持of分隔符，更接近JavaScript遍歷器語(yǔ)法。
有時(shí)我們可能想重復(fù)一個(gè)包含多個(gè)DOM元素的塊，可以使用,如：
v-for也支持整數(shù)
代碼如下：
{{ n }}
或者
{{ $index }}
v-text
v-text指令可以更新元素的textContent.
{{msg}}
得到的結(jié)果一樣。
v-html
v-html指令更新元素的innerHTML。
{{{html}}}
new Vue({
el: '#example',
data: {
html:'效果一樣
'
}
})
注：不建議在網(wǎng)站上直接動(dòng)態(tài)渲染任意HTML片段，很容易導(dǎo)致XSS攻擊。
v-bind
v-bind指令用于響應(yīng)更新HTML特性，將一個(gè)或者多個(gè)attribute，或者一個(gè)組件prop動(dòng)態(tài)綁定到表達(dá)式。v-bind可以簡(jiǎn)寫(xiě)為：
Button
Button
在綁定class或者style時(shí)，支持其他類(lèi)型的值，如數(shù)組或?qū)ο蟆Ｈ纾?/p>
new Vue({
el: '#example',
data: {
classA:'A',
isB:false,
isC:true
}
})
結(jié)果如圖：
如果沒(méi)有參數(shù)時(shí)，可以綁定到一個(gè)對(duì)象。注意，此時(shí)class和style綁定不支持?jǐn)?shù)組和對(duì)象（對(duì)象key會(huì)轉(zhuǎn)換為小寫(xiě)）。代碼如下：
new Vue({
el: '#example',
data: {
someProp:'idName',
otherProp:'prop'
}
})
結(jié)果如圖：
在綁定prop時(shí)，prop必須在子組件中聲明?？梢杂眯揎椃付ú煌慕壎?lèi)型。修飾符為：
.sync——雙向綁定，只能用于prop綁定。
.once——單次綁定，只能用于prop綁定。
.camel——將綁定的特性名字轉(zhuǎn)換回駝峰命名。只能用于普通HTML特性的綁定，通常用于綁定用駝峰命名的SVG特性，比如viewBox。
v-on
v-on指令用于綁定事件監(jiān)聽(tīng)器。事件類(lèi)型由參數(shù)指定。
如果訪問(wèn)原始DOM事件，可以使用$event傳入方法。
完整例子：
Greet
var vm = new Vue({
el: '#example',
data: {
name: 'Vue.js'
},
// 在 methods 對(duì)象中定義方法
methods: {
greet: function (event) {
// 方法內(nèi) this 指向 vm
alert('Hello ' + this.name + '!')
// event 是原生 DOM 事件
alert(event.target.tagName)
}
}
})
// 也可以在 JavaScript 代碼中調(diào)用方法
vm.greet(); // -> 'Hello Vue.js!'
###事件修飾符
### 按鍵修飾符
全部的按鍵別名：enter，tab，delete，esc，space，up，down，left，right
v-ref
在父組件上注冊(cè)一個(gè)子組件的索引，便于直接訪問(wèn)。不需要表達(dá)式，必須提供參數(shù)id?？梢酝ㄟ^(guò)父組件的$refs對(duì)象訪問(wèn)子組件。
v-el
為DOM元素注冊(cè)一個(gè)索引，方便通過(guò)所屬實(shí)例的$els訪問(wèn)這個(gè)元素?？梢杂胿-el:some-el設(shè)置this.$els.someEl。
hello
world
通過(guò)this.$els獲取相應(yīng)的DOM元素：
this.$els.msg.textContent //'hello'
this.$els.otherMsg.textContent //'world'
在新的vuejs中，簡(jiǎn)單起見(jiàn)， v-el 和 v-ref 合并為一個(gè) ref 屬性了，可以在組件實(shí)例中通過(guò) $refs 來(lái)調(diào)用。
v-pre
跳過(guò)這個(gè)元素和它的子元素的編譯過(guò)程?？梢杂脕?lái)顯示原始 Mustache 標(biāo)簽。跳過(guò)大量沒(méi)有指令的節(jié)點(diǎn)會(huì)加快編譯。
{{ this will not be compiled }}
v-cloak
這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯。和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時(shí)，這個(gè)指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢。
css代碼：
[v-cloak] {
display: none;
}html：
{{ message }}
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vuejs指令有哪些”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
網(wǎng)站名稱：vuejs指令有哪些
網(wǎng)站地址：http://weahome.cn/article/giohoe.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
重慶分公司
重慶分公司
