国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue基礎(chǔ)之內(nèi)部指令(下)

LMou / 1023人閱讀

摘要:綁定事件監(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值了

{{message}}

v-cloak(不需要表達(dá)式)

為了解決當(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

相關(guān)文章

  • Vue基礎(chǔ)內(nèi)部指令

    摘要:綁定事件監(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: { ...

    maybe_009 評(píng)論0 收藏0
  • Vue基礎(chǔ)內(nèi)部指令

    摘要:綁定事件監(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: { ...

    2bdenny 評(píng)論0 收藏0
  • Vue基礎(chǔ)內(nèi)部指令(上)

    摘要:以及條件指令類似于里的,這三個(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-...

    BoYang 評(píng)論0 收藏0
  • Vue基礎(chǔ)內(nèi)部指令(上)

    摘要:以及條件指令類似于里的,這三個(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-...

    Keagan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

LMou

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<