Vue 模組自定義事件(Custom Events) | vue change事件
![Vue 模組自定義事件(Custom Events)](https://i.imgur.com/axBPWDg.jpg)
每次寫筆記都在想要怎麼寫得讓大家(包含未來的我)看得懂,所以每次都要寫很久,但好像自己的內容有點太無聊了XD。因自定義事件的名稱跟模組名稱和props命名不同,在使用時並不會有轉換的問題,所以怎麼命名就怎麼使用,命名用myCustomEvent,使用時也必須使用v-on:myCustomEvent,這時用v-on:my-custom-event是無效的。在HTML中使用時,為了要遵守HTML的規範,所以自定義事件(CustomEvents)名會被轉換成小寫,也因此在HTML中使用v-on:myCustomEvent時,會自動轉換成v-on:mycustomevent,最後會因為事件名稱不相同(myCustomEvent!=mycu...
![Vue 模組自定義事件(Custom Events)](http://pix1.agoda.net/hotelimages/1622100/-1/288dee61caf31676838d02dba1f40407.jpg?s=800x)
每次寫筆記都在想要怎麼寫得讓大家(包含未來的我)看得懂,所以每次都要寫很久,但好像自己的內容有點太無聊了 XD 。
因自定義事件的名稱跟模組名稱和 props 命名不同,在使用時並不會有轉換的問題,所以怎麼命名就怎麼使用,命名用 myCustomEvent ,使用時也必須使用 v-on:myCustomEvent ,這時用 v-on:my-custom-event 是無效的。
在 HTML 中使用時,為了要遵守 HTML 的規範,所以自定義事件( Custom Events )名會被轉換成小寫,也因此在 HTML 中使用 v-on:myCustomEvent 時,會自動轉換成 v-on:mycustomevent ,最後會因為事件名稱不相同(myCustomEvent != mycustomevent)而導致該監聽器無法作用。
因此 Vue 文件建議在一律以 kebab-case (短橫線分隔)來命名自定義事件( Custom Events )。
在講自定義事件的 v-model 前,先來了解一下 v-model 是如何產生作用的。
如果對 v-model 不太熟悉,可以先參考DAY09 | 跟 Vue.js 認識的30天 - Vue 的資料雙向綁定(v-model)[1]。
在一般情況下,我們想要雙向綁定就會使用 v-model ,如下:
<input type="text" v-model="name"><input> 的 value 值會受 Vue 實例資料 name 的影響,而 name 也同樣受到 <input> 的 value 改變的影響。
但 v-model 是如何達到雙向綁定的,其實就是透過 v-bind:value 跟 v-on:input
<input type="text" v-bind:value="name" v-on:input="name = $event.target.value">也就是說 v-model 做了2件事:
取得本站獨家住宿推薦 15%OFF 訂房優惠
本站住宿推薦 20%OFF 訂房優惠,親子優惠,住宿折扣,限時回饋,平日促銷
1 | vue change事件
1 | vue change事件
1-5 事件處理 | vue change事件
Vue change事件、click点击事件,传参数时保持默认的参数 | vue change事件
vue element | vue change事件
Vue 模組自定義事件(Custom Events) | vue change事件
Vue 雙向數據綁定的語法糖v | vue change事件
Vue | vue change事件
vue | vue change事件
Vue.js Core 30天屠龍記(第26天) | vue change事件
vue下的 | vue change事件
vue下的 | vue change事件
[Vue.js] 修飾符 | vue change事件
[Vue.js] 輸入元素文字改變事件 | vue change事件
[Vue.js] 輸入元素文字改變事件 | vue change事件
[筆記][Vue.js]打開Vue.js世界的大門(4) | vue change事件
[筆記][Vue.js]打開Vue.js世界的大門(6) | vue change事件
自定义事件 | vue change事件
表单输入绑定 | vue change事件
![](https://i.imgur.com/axBPWDg.jpg)
![](https://i.imgur.com/axBPWDg.jpg)