這篇文章主要介紹了Vue.js中extend選項和delimiters選項的比較的相關資料,需要的朋友可以參考下
Vue.js中extend選項和delimiters選項的比較
extend選項
允許宣告擴充另一個元件（可以是一個簡單的選項物件或建構函式），而無需使用Vue.extend，這主要是為了方便擴充單檔案元件，它和mixin有類似之處
<p id="app">
{{num}}
<button @click="add">addNumber</button>
</p>
<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>上面的程式碼擴充的是updated，執行結果如下：
#可以看出擴充的update先執行，那麼下面看看擴充methods的時候，只是下面的部分不同而已
var extendsObj = {
updated: function() {
console.log("extend updated");
},
methods : {
add : function() {
console.log("extend add");
}
}
};執行結果其實就是上面圖片的樣子，也就是說，對於methods來說，遇到同名的函數，則執行的是非擴展的函數，如果擴展的是非同名的函數，則按照擴展之後的執行
#delimiters選項
預設的插值的寫法是{{}}，但是在某些情況下，我們需要使用一些不一樣的方式，例如這樣${}
<p id="app">
${num}
<button @click="add">addNumber</button>
</p> new Vue({
el: "#app",
data: {
num : 1
},
methods : {
add : function() {
console.log("原生 add");
this.num++;
}
},
delimiters: ['${', '}']
});注意：delimiters對應的是一個陣列
以上是Vue.js中extend與delimiters兩個選項的區別對比的詳細內容。更多資訊請關注PHP中文網其他相關文章！
