VUE學習筆記 (五)(v on的使用)

2021-08-26 18:21:26 字數 1181 閱讀 8167

v-bind指令用於設定html屬性:v-bind:href  縮寫為 :hrefaa

v-on 指令用於繫結html事件 :v-on:click 縮寫為 @clickaa

最好不要用@,因為asp.net mvc頁面識別@ 不太好

aa如果想要在乙個元件的根元素上直接監聽乙個原生事件。這時,你可以使用v-on.native修飾符:

在有的時候這是很有用的,不過在你嘗試監聽乙個類似的非常特定的元素時,這並不是個好主意。比如上述元件可能做了如下重構,所以根元素實際上是乙個元素:

}

這時,父級的.native***將靜默失敗。它不會產生任何報錯,但是onfocus處理函式不會如你預期地被呼叫。

為了解決這個問題,vue 提供了乙個$listeners屬性,它是乙個物件,裡面包含了作用在這個元件上的所有***。例如:

input: function (value) ,

}

有了這個$listeners屬性,你就可以配合v-on="$listeners"將所有的事件***指向這個元件的某個特定的子元素。對於類似的你希望它也可以配合v-model工作的元件來說,為這些***建立乙個類似下述inputlisteners的計算屬性通常是非常有用的:

vue.component('base-input', ,

// 我們從父級新增所有的***

this.$listeners,

// 然後我們新增自定義***,

// 或覆寫一些***的行為})

}},

template: `

}`})

現在元件是乙個完全透明的包裹器了,也就是說它可以完全像乙個普通的元素一樣使用了:所有跟它相同的特性和***的都可以工作。

JAVA教程 菜鳥Vue學習筆記(五)

菜鳥vue學習筆記 五 上次我們學習了vue的元件,這次我們來學習一下路由的使用。在vue中,所謂的路由其實跟其他的框架中的路由的概念差不多,即指跳轉的路徑。注意 在vue中,要使用路由,必須匯入vue router.js,並且需要在vue.js下方匯入。具體示例如下 檢視一檢視二 分析如下 在頁面...

vue學習筆記(五) 元件通訊

關於vue父子元件通訊 github suerimn 如果元件是乙個單頁面,元件之間存在父子關係,資料傳遞就需要根據父子不同的地位使用不同的辦法。借助新建的electron vue專案自帶的兩個元件來說明。目錄結構如下 其中landingpage.vue是父元件,systeminformation....

vue學習 筆記

v model 雙向繫結 v if v else if v else v on 繫結事件 v bind 繫結資料 v cloak 當vue未初始化完成前可不顯示為賦值的 vue屬性名稱 需要給v cloak設定 display none v for i迴圈次數 a資料中的資料 arr定義的陣列 最好...