Vue.js中extend與delimiters兩個選項的區別對比
Jul 18, 2017 pm 04:46 PM
javascript
vue.js
這篇文章主要介紹了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中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章
擊敗分裂小說需要多長時間?
3 週前
By DDD
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌

熱門文章
擊敗分裂小說需要多長時間?
3 週前
By DDD
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)