今回は、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>
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨書籍:
ionic2 での自動ジェネレーターの使用方法 JsChart コンポーネントの使用方法の詳細な説明以上がVue.ディレクティブのカスタム命令の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。