Vue.js の拡張オプションと区切り文字オプションの違いの比較-jsチュートリアル-php.cn

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

黄舟

リリース： 2017-07-18 16:46:19

オリジナル

1630 人が閲覧しました

この記事では、主に 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 サイトの他の関連記事を参照してください。

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

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