Vue.ディレクティブのカスタム命令の詳細説明

今回は、Vue.directive のカスタム命令の詳細な説明をお届けします。Vue.directive のカスタム命令の notes とは何ですか? 実践的なケースを見てみましょう。

1. 今日

Vueカスタム命令のコードを見直してみると、非常に言葉にならない結果が表示されたので、最初にコードを投稿します。 2.

<p id="example" v-change-by="myColor"></p>
  <script src="vue.min.js"></script>
  <script>
    new Vue({
      el:"#example",
      data:{
        msg:"",
        myColor:"#000"
      }
    });
    Vue.directive("change-by",{
      bind:(el,binding)=>{
        el.style.background=binding.value;
      }
    });
  </script>

3. ページを開くと空白で、幅と高さが設定されており、pは黒くなりませんでした。コードが正しく、

文法エラー

がないことを確認してください。そこで、vue.min.js ファイルの問題ではないかと考え、公式サイトから開発版をダウンロードして vue.js を使用しました。その結果、驚くべき発見があった。

4. vue.min.js の製品版はエラー報告をサポートしていないことが判明しました。これは本当に落とし穴です。

5. ようやく理由が分かりました。そして、命令は vue インスタンス化

オブジェクト

の前に書かれなければならないことが非常に重要です。そうしないと、エラーがディレクティブの解決に失敗しました として報告されます。

<p id="example" v-change-by="myColor"></p>
  <script>
    Vue.directive("change-by",{
      bind:(el,binding)=>{
        el.style.background=binding.value;
      }
    });
    new Vue({
      el:"#example",
      data:{
        msg:"",
        myColor:"#000"
      }
    });
  </script>

6. 最後の出力ページは、完璧です...注意すべき小さな問題があります。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

ionic2 での自動ジェネレーターの使用方法

JsChart コンポーネントの使用方法の詳細な説明

以上がVue.ディレクティブのカスタム命令の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。