資訊專欄INFORMATION COLUMN
摘要：綁定事件監(jiān)聽器直接擼代碼計(jì)數(shù)器是實(shí)例的掛在對(duì)象等同于，是的語(yǔ)法糖，在內(nèi)定義好方法，指令監(jiān)聽事件來(lái)觸發(fā)一些代碼。
v-on綁定事件監(jiān)聽器
直接擼代碼：
計(jì)數(shù)器
number：{{number}}
@click等同于v-on:click，是Vue的語(yǔ)法糖，在methods內(nèi)定義好方法，v-on指令監(jiān)聽DOM事件來(lái)觸發(fā)一些javascript代碼。
除了綁定click之外，我們還可以綁定其它事件，比如鍵盤回車事件v-on:keyup.enter,更多事件請(qǐng)點(diǎn)擊查看
面試考點(diǎn)：Vue事件修飾符的作用
me
事件流圖(來(lái)自百度)：
上面一段代碼，什么修飾符都不添加時(shí)，點(diǎn)擊“me”，依次打印son、father、grandfather
.stop
阻止冒泡,操作子元素不會(huì)觸發(fā)父元素同類事件
me
此時(shí)，只會(huì)觸發(fā)子元素事件
.capture
添加事件偵查時(shí)使用事件捕獲模式，從外到內(nèi)依次捕獲
me
依次打印grandfather、father、son
.prevent
取消默認(rèn)事件
百度
鏈接不跳轉(zhuǎn)
.self
只在添加事件的元素自身觸發(fā)
.once
事件只觸發(fā)一次
其他指令 v-pre（不需要表達(dá)式）在模板中跳過(guò)vue的編譯，直接輸出原始值。就是在標(biāo)簽中加入v-pre就不會(huì)輸出vue中的data值了
v-cloak（不需要表達(dá)式）{{message}}
為了解決當(dāng)網(wǎng)速較慢時(shí)，Vue.js文件沒有被加載完時(shí)頁(yè)面上數(shù)據(jù)綁定的閃現(xiàn)問(wèn)題。
例如：
{{message}}
會(huì)閃現(xiàn){{message}}
利用v-cloak指令使頁(yè)面在Vue渲染完指定的整個(gè)DOM后才進(jìn)行顯示，并且v-cloak會(huì)在Vue實(shí)例結(jié)束編譯后從綁定的DOM上移除，結(jié)合CSS可以解決這個(gè)問(wèn)題。
[v-cloak] {
display: none;
}
v-once（不需要表達(dá)式）
這個(gè)指令在實(shí)際開發(fā)中用的不是很多，作用是使定義它的元素或組件只渲染一次，包括元素或組件的所有子節(jié)點(diǎn)。渲染一次后不會(huì)隨數(shù)據(jù)變化，可以視為靜態(tài)。
{{message}}
以上是本期全部?jī)?nèi)容，欲知后事如何，請(qǐng)聽下回分解<(￣︶￣)↗[GO!]
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/117324.html
摘要：綁定事件監(jiān)聽器直接擼代碼計(jì)數(shù)器是實(shí)例的掛在對(duì)象等同于，是的語(yǔ)法糖，在內(nèi)定義好方法，指令監(jiān)聽事件來(lái)觸發(fā)一些代碼。 v-on綁定事件監(jiān)聽器 直接擼代碼： 計(jì)數(shù)器 number：{{number}} + - var app = new Vue({ el: #app, // app是Vue實(shí)例的掛在對(duì)象 data: { ...
摘要：綁定事件監(jiān)聽器直接擼代碼計(jì)數(shù)器是實(shí)例的掛在對(duì)象等同于，是的語(yǔ)法糖，在內(nèi)定義好方法，指令監(jiān)聽事件來(lái)觸發(fā)一些代碼。 v-on綁定事件監(jiān)聽器 直接擼代碼： 計(jì)數(shù)器 number：{{number}} + - var app = new Vue({ el: #app, // app是Vue實(shí)例的掛在對(duì)象 data: { ...
摘要：以及條件指令類似于里的，這三個(gè)指令根據(jù)表達(dá)式的值對(duì)組件進(jìn)行渲染銷毀。如果想一次性判斷多個(gè)元素，可以將他們包裹在之內(nèi)，使用條件指令操作外層的，并不會(huì)包含在最終的渲染結(jié)果中。要是不希望被復(fù)用，需要在指定的元素上添加值，值存在且唯一。 v-if、v-else-if、v-else以及v-show 條件指令v-if、v-else-if、v-else 類似于JavaScript里的if、else-...
摘要：以及條件指令類似于里的，這三個(gè)指令根據(jù)表達(dá)式的值對(duì)組件進(jìn)行渲染銷毀。如果想一次性判斷多個(gè)元素，可以將他們包裹在之內(nèi)，使用條件指令操作外層的，并不會(huì)包含在最終的渲染結(jié)果中。要是不希望被復(fù)用，需要在指定的元素上添加值，值存在且唯一。 v-if、v-else-if、v-else以及v-show 條件指令v-if、v-else-if、v-else 類似于JavaScript里的if、else-...
閱讀 1832·2019-08-30 15:55
閱讀 1028·2019-08-26 11:57
閱讀 533·2019-08-26 11:29
閱讀 3376·2019-08-26 10:49
閱讀 1928·2019-08-23 18:40
閱讀 1835·2019-08-23 16:04
閱讀 3122·2019-08-23 11:01
閱讀 2293·2019-08-23 10:56
