Vue.js の拡張オプションと区切り文字オ​​プションの違いの比較

この記事では、主に Vue.js の extend オプションと delimiters オプションの比較に関する関連情報を紹介します。必要な方は、

Vue.js の extend オプションと delimiters オプションの比較

extend オプションを参照してください。 Vue.extend を使用せずに、宣言で別のコンポーネント (単純なオプション オブジェクトまたはコンストラクター) を拡張できるようにします。これは、主に、単一ファイル コンポーネントの拡張を容易にするためのものです。上記のコードは extends updated を実行し、実行結果は以下の通りです。

最初に拡張 update が実行されていることがわかるので、拡張メソッドを見ると以下の部分のみが異なります

<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(&#39;原生updated&#39;);
    },
    extends : extendsObj,
  });
</script>

実際の実行結果は上の図のようになります。つまり、メソッドの場合、同じ名前の関数に遭遇した場合、名前のない関数の場合は、展開されていない関数が実行されます。 name が拡張されると、展開されたオプションに従って実行されます

delimiters オプション

補間を記述するデフォルトの方法は {{}} ですが、場合によっては、この $ などのいくつかの異なるメソッドを使用する必要があります。 {}

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

<p id="app">
  ${num}
  <button @click="add">addNumber</button>
</p>

注:

区切り文字
に対応するのは配列です

以上がVue.js の拡張オプションと区切り文字オ​​プションの違いの比較の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。