Vue.directive のカスタム ディレクティブに関する問題が見つかりました

この記事では主に Vue.directive のカスタム命令の問題点をまとめて紹介しますので、困っている方は参考にしてください

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. 最終出力ページ、完璧です...注意すべき小さな問題。

上記は私が皆さんのためにまとめたものであり、今後皆さんのお役に立てば幸いです。

関連記事:

数値配列の重複排除と最適化のためのバイナリツリーをjsで構築する詳細な説明

bass.scss処理ソリューションのVueグローバル導入の詳細な説明

ノードを使用して独自に作成するコマンドラインツールのメソッドチュートリアル

以上がVue.directive のカスタム ディレクティブに関する問題が見つかりましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。