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