Vue.js中extend選項(xiàng)和delimiters選項(xiàng)的比較
Vue.js中extend選項(xiàng)和delimiters選項(xiàng)的比較
extend選項(xiàng)
允許聲明擴(kuò)展另一個(gè)組件（可以是一個(gè)簡(jiǎn)單的選項(xiàng)對(duì)象或構(gòu)造函數(shù)），而無(wú)需使用Vue.extend，這主要是為了便于擴(kuò)展單文件組件，它和mixin有類似之處
<div id="app">
{{num}}
<button @click="add">addNumber</button>
</div>
<script type="text/javascript">
var extendsObj = {
updated: function() {
console.log("extend updated");
}
};
new Vue({
el: "#app",
data: {
num : 1
},
methods : {
add : function() {
console.log("原生 add");
this.num++;
}
},
updated : function(){
console.log('原生updated');
},
extends : extendsObj,
});
</script>
上面的代碼擴(kuò)展的是updated，執(zhí)行結(jié)果如下：
可以看出擴(kuò)展的update先執(zhí)行，那么下面看看擴(kuò)展methods的時(shí)候，只是下面的部分不同而已
var extendsObj = {
updated: function() {
console.log("extend updated");
},
methods : {
add : function() {
console.log("extend add");
}
}
};
執(zhí)行結(jié)果其實(shí)就是上面圖片的樣子，也就是說(shuō)，對(duì)于methods來(lái)說(shuō)，遇到同名的函數(shù)，則執(zhí)行的是非擴(kuò)展的函數(shù)，如果擴(kuò)展的是非同名的函數(shù)，則按照擴(kuò)展之后的執(zhí)行
delimiters選項(xiàng)
默認(rèn)的插值的寫法是{{}}，但是在某些情況下，我們需要使用一些不一樣的方式，比如這樣${}
<div id="app">
${num}
<button @click="add">addNumber</button>
</div>
new Vue({
el: "#app",
data: {
num : 1
},
methods : {
add : function() {
console.log("原生 add");
this.num++;
}
},
delimiters: ['${', '}']
});
注意：delimiters對(duì)應(yīng)的是一個(gè)數(shù)組
以上就是Vue.js中extend選項(xiàng)和delimiters選項(xiàng)的比較的講解，本站關(guān)于Vue.js的文章還很多，大家可以搜索查閱，感謝閱讀，謝謝大家對(duì)本站的支持！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue.js中指令Directives，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
vue-cli整合vuex的時(shí)候,修改actions和mutations,實(shí)現(xiàn)熱部署的方法
今天小編就為大家分享一篇vue-cli整合vuex的時(shí)候,修改actions和mutations,實(shí)現(xiàn)熱部署的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue訪問(wèn)未定義的路由時(shí)重定向404問(wèn)題
這篇文章主要介紹了vue訪問(wèn)未定義的路由時(shí)重定向404問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue實(shí)現(xiàn)微信公眾號(hào)h5跳轉(zhuǎn)小程序的示例代碼
本文主要介紹了vue實(shí)現(xiàn)微信公眾號(hào)h5跳轉(zhuǎn)小程序的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue3在新版本中提供了一個(gè)新的API，稱為Suspense，它可以使異步組件的加載更加高效和流暢，在本文中，我們將詳細(xì)了解 Vue3 Suspense 處理異步組件加載的工作原理以及如何使用它來(lái)提高 Web 應(yīng)用程序的性能2023-06-06
插槽就是子組件中的提供給父組件使用的一個(gè)占位符，用<slot></slot>?表示，父組件可以在這個(gè)占位符中填充任何模板代碼，如?HTML、組件等，填充的內(nèi)容會(huì)替換子組件的<slot></slot>標(biāo)簽，這篇文章主要介紹了Vue插槽的理解和使用,需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細(xì)介紹了Vue3編寫氣泡對(duì)話框組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
組合式 API 是一系列 API 的集合，使我們可以使用函數(shù)而不是聲明選項(xiàng)的方式書(shū)寫 Vue 組件，這篇文章主要介紹了什么是Vue3的組合式?API,需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
vue如何基于el-table實(shí)現(xiàn)多頁(yè)多選及翻頁(yè)回顯過(guò)程
在最近的一個(gè)項(xiàng)目中我需要實(shí)現(xiàn)表格的翻頁(yè),并且還要實(shí)現(xiàn)全選、多選功能,下面這篇文章主要給大家介紹了關(guān)于vue如何基于el-table實(shí)現(xiàn)多頁(yè)多選及翻頁(yè)回顯過(guò)程的相關(guān)資料,需要的朋友可以參考下2022-12-12