Vue.js中extend與delimiters兩個選項的區別對比

這篇文章主要介紹了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中文網其他相關文章！