Vue.js中extend選項(xiàng)和delimiters選項(xiàng)的比較
extend選項(xiàng)
允許聲明擴(kuò)展另一個組件（可以是一個簡單的選項(xiàng)對象或構(gòu)造函數(shù)），而無需使用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í)就是上面圖片的樣子，也就是說，對于methods來說，遇到同名的函數(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對應(yīng)的是一個數(shù)組
以上就是Vue.js中extend選項(xiàng)和delimiters選項(xiàng)的比較的講解，本站關(guān)于Vue.js的文章還很多，大家可以搜索查閱，感謝閱讀，謝謝大家對本站的支持！
新聞熱點(diǎn)
疑難解答
