- Vue.js從入門到項(xiàng)目實(shí)踐(超值版)
- 聚慕課教育研發(fā)中心編著
- 463字
- 2022-07-29 14:27:40
4.1.2 方法

methods:通過methods對(duì)象定義方法,并使用v-on指令來監(jiān)聽DOM事件。
<button v-on:click="alert">alert</button> new Vue({ el: '#app', data:{ a:1 }, methods:{ alert:function(){ alert(this.a) } } })
自定義事件在初始化的時(shí)候傳入events對(duì)象,通過實(shí)例的$emit方法進(jìn)行觸發(fā)。而在Vue.js 2.0中則廢除了events選項(xiàng)屬性,不再支持事件廣播這類特性,所以直接使用Vue實(shí)例的全局方法$on/$emit(),或者使用插件Vuex來處理即可。
通過調(diào)用表達(dá)式中的methods也可以達(dá)到同樣的效果。代碼如下:
提示:不應(yīng)該使用箭頭函數(shù)來定義methods函數(shù)。

運(yùn)行的效果如圖4-3所示。

圖4-3 methods運(yùn)行效果圖(一)
從最終的結(jié)果來看,兩種方式確實(shí)是相同的。然而不同的是,計(jì)算屬性是基于它們的依賴進(jìn)行緩存的。計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值。這意味著,只要message還沒有發(fā)生改變,多次訪問reversedMessage計(jì)算屬性會(huì)立即返回以前的計(jì)算結(jié)果,而不必再次執(zhí)行函數(shù)。相比而言,只要發(fā)生重新渲染,methods調(diào)用總會(huì)執(zhí)行該函數(shù)。
代碼如下:

運(yùn)行的效果如圖4-4所示。

圖4-4 methods運(yùn)行效果圖(二)
提示:假設(shè)有一個(gè)性能開銷比較大的商城A,它需要遍歷一個(gè)極大的數(shù)組和做大量的計(jì)算,來獲取可能存在的其他商品(賴于A)。如果沒有緩存,將不可避免地多次執(zhí)行A的getter。如果不希望有緩存,則可以用methods替代。
- 網(wǎng)站建設(shè)與網(wǎng)頁設(shè)計(jì)從入門到精通Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript
- 網(wǎng)頁設(shè)計(jì)與制作
- 大型網(wǎng)站架構(gòu)實(shí)戰(zhàn)
- Photoshop電商網(wǎng)頁廣告設(shè)計(jì)實(shí)戰(zhàn)從入門到精通(超值版)
- 中文版Dreamweaver CS6/Flash CS6/Photoshop CS6網(wǎng)頁設(shè)計(jì)基礎(chǔ)培訓(xùn)
- Dreamweaver CS5+ASP動(dòng)態(tài)網(wǎng)站設(shè)計(jì)實(shí)用手冊(cè)
- 網(wǎng)頁配色從入門到精通
- jQuery+Bootstrap Web開發(fā)案例教程(在線實(shí)訓(xùn)版)
- Div+CSS網(wǎng)頁制作實(shí)戰(zhàn)教程
- HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)教程
- Photoshop電商網(wǎng)頁廣告設(shè)計(jì)實(shí)戰(zhàn)從入門到精通
- Photoshop熱門手機(jī)APP與網(wǎng)頁游戲界面設(shè)計(jì)從入門到精通
- ASP快速建站全程實(shí)錄
- 網(wǎng)頁設(shè)計(jì)與制作
- Web程序設(shè)計(jì)