Vue.js中extend選項和delimiters選項的比較

更新時間：2017年07月17日 14:29:10 投稿：lqh

這篇文章主要介紹了Vue.js中extend選項和delimiters選項的比較的相關資料,需要的朋友可以參考下

Vue.js中extend選項和delimiters選項的比較

extend選項

允許聲明擴展另一個組件（可以是一個簡單的選項對象或構造函數(shù)），而無需使用Vue.extend，這主要是為了便于擴展單文件組件，它和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>

上面的代碼擴展的是updated，執(zhí)行結果如下：

可以看出擴展的update先執(zhí)行，那么下面看看擴展methods的時候，只是下面的部分不同而已

 var extendsObj = {
    updated: function() {
      console.log("extend updated");
    },
    methods : {
      add : function() {
        console.log("extend add");
      }
    }
  };

執(zhí)行結果其實就是上面圖片的樣子，也就是說，對于methods來說，遇到同名的函數(shù)，則執(zhí)行的是非擴展的函數(shù)，如果擴展的是非同名的函數(shù)，則按照擴展之后的執(zhí)行

delimiters選項

默認的插值的寫法是{{}}，但是在某些情況下，我們需要使用一些不一樣的方式，比如這樣${}

<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對應的是一個數(shù)組

以上就是Vue.js中extend選項和delimiters選項的比較的講解，本站關于Vue.js的文章還很多，大家可以搜索查閱，感謝閱讀，謝謝大家對本站的支持！

您可能感興趣的文章:

Vue.js中的extend綁定節(jié)點并顯示的方法

Vuex,iView UI面包屑導航使用擴展詳解
今天小編就為大家分享一篇Vuex,iView UI面包屑導航使用擴展詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用)
這篇文章主要介紹了vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用),本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-01-01
vue實現(xiàn)移動端原生小球滑塊
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端原生小球滑塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
vue3中展示markdown格式文章的三種形式
這篇文章主要為大家詳細介紹了vue3中展示markdown格式文章的三種形式,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2025-04-04
vue3通過canvas實現(xiàn)圖片圈選功能
這篇文章將給大家詳細介紹了vue3如何通過canvas實現(xiàn)圖片圈選功能,文中的示例代碼講解詳細,具有一定的參考價值,感興趣的小伙伴快來跟隨小編一起學習一下吧
2023-12-12
Vue之mixin全局的用法詳解
這篇文章主要介紹了Vue之mixin全局的用法詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
Vue實現(xiàn)百度下拉提示搜索功能
這篇文章主要為大家詳細介紹了Vue實現(xiàn)百度下拉提示搜索功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
使用vue + less 實現(xiàn)簡單換膚功能的示例
下面小編就為大家分享一篇使用vue + less 實現(xiàn)簡單換膚功能的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
vue watch immediate方法用法詳解
這篇文章主要介紹了vue watch immediate方法用法詳解,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-06-06
vue實現(xiàn)購物車拋物線小球動畫效果的方法詳解
這篇文章主要介紹了vue實現(xiàn)購物車拋物線小球動畫效果的方法,結合實例形式較為詳細的分析了vue.js實現(xiàn)拋物線動畫效果購物車功能相關原理與操作注意事項,需要的朋友可以參考下
2019-02-02