Vue基礎之內部指令（下）

maybe_009 發布于2019-08-30 15:55 / 1815人閱讀

摘要：綁定事件監聽器直接擼代碼計數器是實例的掛在對象等同于，是的語法糖，在內定義好方法，指令監聽事件來觸發一些代碼。

v-on綁定事件監聽器

直接擼代碼：


  計數器
  number：{{number}}

@click等同于v-on:click，是Vue的語法糖，在methods內定義好方法，v-on指令監聽DOM事件來觸發一些javascript代碼。

除了綁定click之外，我們還可以綁定其它事件，比如鍵盤回車事件v-on:keyup.enter,更多事件請點擊查看

面試考點：Vue事件修飾符的作用

me

事件流圖(來自百度)：

上面一段代碼，什么修飾符都不添加時，點擊“me”，依次打印son、father、grandfather

.stop

阻止冒泡,操作子元素不會觸發父元素同類事件

me

此時，只會觸發子元素事件

.capture

添加事件偵查時使用事件捕獲模式，從外到內依次捕獲

me

依次打印grandfather、father、son

.prevent

取消默認事件

百度

鏈接不跳轉

.self

只在添加事件的元素自身觸發

.once

事件只觸發一次

其他指令 v-pre（不需要表達式）

在模板中跳過vue的編譯，直接輸出原始值。就是在標簽中加入v-pre就不會輸出vue中的data值了


    {{message}}

v-cloak（不需要表達式）

為了解決當網速較慢時，Vue.js文件沒有被加載完時頁面上數據綁定的閃現問題。
例如：

{{message}}

會閃現{{message}}

利用v-cloak指令使頁面在Vue渲染完指定的整個DOM后才進行顯示，并且v-cloak會在Vue實例結束編譯后從綁定的DOM上移除，結合CSS可以解決這個問題。

[v-cloak] {
  display: none;
}

v-once（不需要表達式）

這個指令在實際開發中用的不是很多，作用是使定義它的元素或組件只渲染一次，包括元素或組件的所有子節點。渲染一次后不會隨數據變化，可以視為靜態。


    
    {{message}}

以上是本期全部內容，欲知后事如何，請聽下回分解<(￣︶￣)↗[GO!]

GPU云服務器云服務器之基礎篇 vue基礎教程 linux基礎指令黑客基礎之DOS

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117324.html

Vue基礎之內部指令（下）

摘要：綁定事件監聽器直接擼代碼計數器是實例的掛在對象等同于，是的語法糖，在內定義好方法，指令監聽事件來觸發一些代碼。 v-on綁定事件監聽器直接擼代碼：計數器 number：{{number}} + - var app = new Vue({ el: #app, // app是Vue實例的掛在對象 data: { ...

2bdenny 2019-08-02 14:11 評論0 收藏0
Vue基礎之內部指令（下）

摘要：綁定事件監聽器直接擼代碼計數器是實例的掛在對象等同于，是的語法糖，在內定義好方法，指令監聽事件來觸發一些代碼。 v-on綁定事件監聽器直接擼代碼：計數器 number：{{number}} + - var app = new Vue({ el: #app, // app是Vue實例的掛在對象 data: { ...

LMou 2019-08-26 13:31 評論0 收藏0
Vue基礎之內部指令（上）

摘要：以及條件指令類似于里的，這三個指令根據表達式的值對組件進行渲染銷毀。如果想一次性判斷多個元素，可以將他們包裹在之內，使用條件指令操作外層的，并不會包含在最終的渲染結果中。要是不希望被復用，需要在指定的元素上添加值，值存在且唯一。 v-if、v-else-if、v-else以及v-show 條件指令v-if、v-else-if、v-else 類似于JavaScript里的if、else-...

BoYang 2019-08-30 15:55 評論0 收藏0
Vue基礎之內部指令（上）

摘要：以及條件指令類似于里的，這三個指令根據表達式的值對組件進行渲染銷毀。如果想一次性判斷多個元素，可以將他們包裹在之內，使用條件指令操作外層的，并不會包含在最終的渲染結果中。要是不希望被復用，需要在指定的元素上添加值，值存在且唯一。 v-if、v-else-if、v-else以及v-show 條件指令v-if、v-else-if、v-else 類似于JavaScript里的if、else-...

Keagan 2019-08-02 14:11 評論0 收藏0