摘要:綁定事件監(jiān)聽器直接擼代碼計(jì)數(shù)器是實(shí)例的掛在對(duì)象等同于,是的語法糖,在內(nèi)定義好方法,指令監(jiān)聽事件來觸發(fā)一些代碼。
v-on綁定事件監(jiān)聽器
直接擼代碼:
計(jì)數(shù)器
number:{{number}}
@click等同于v-on:click,是Vue的語法糖,在methods內(nèi)定義好方法,v-on指令監(jiān)聽DOM事件來觸發(fā)一些javascript代碼。
除了綁定click之外,我們還可以綁定其它事件,比如鍵盤回車事件v-on:keyup.enter,更多事件請(qǐng)點(diǎn)擊查看
面試考點(diǎn):Vue事件修飾符的作用
me
事件流圖(來自百度):
上面一段代碼,什么修飾符都不添加時(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á)式)在模板中跳過vue的編譯,直接輸出原始值。就是在標(biāo)簽中加入v-pre就不會(huì)輸出vue中的data值了
v-cloak(不需要表達(dá)式){{message}}
為了解決當(dāng)網(wǎng)速較慢時(shí),Vue.js文件沒有被加載完時(shí)頁面上數(shù)據(jù)綁定的閃現(xiàn)問題。
例如:
{{message}}
會(huì)閃現(xiàn){{message}}
利用v-cloak指令使頁面在Vue渲染完指定的整個(gè)DOM后才進(jìn)行顯示,并且v-cloak會(huì)在Vue實(shí)例結(jié)束編譯后從綁定的DOM上移除,結(jié)合CSS可以解決這個(gè)問題。
[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://specialneedsforspecialkids.com/yun/108973.html
摘要:綁定事件監(jiān)聽器直接擼代碼計(jì)數(shù)器是實(shí)例的掛在對(duì)象等同于,是的語法糖,在內(nèi)定義好方法,指令監(jiān)聽事件來觸發(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ì)象等同于,是的語法糖,在內(nèi)定義好方法,指令監(jiān)聽事件來觸發(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-...
閱讀 839·2019-08-30 15:55
閱讀 1413·2019-08-30 13:55
閱讀 1991·2019-08-29 17:13
閱讀 2847·2019-08-29 15:42
閱讀 1336·2019-08-26 14:04
閱讀 1024·2019-08-26 13:31
閱讀 3276·2019-08-26 11:34
閱讀 837·2019-08-23 18:25