ホームページ > 記事 > ウェブフロントエンド > Vue.js双方向バインディングプロジェクトの実践的な分析
今回は、Vue.js 双方向バインディング プロジェクトの実践的な分析をお届けします。Vue.js 双方向バインディング プロジェクトを実際に実装する際の 注意事項 は何ですか?一見。
この記事はVUEの双方向バインディングを体験するための記事です<html> <head> <meta charset="utf-8"> </head> <body> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <p id="app"> <input type="text" v-model="CurrentTime" placeholder="当前时刻"> <h1>当前时刻{{ CurrentTime }}</h1> </p> <script> var app = new Vue({ el:'#app', data:{ CurrentTime: new Date() }, mounted:function(){ var _this = this; this.timer = setInterval(function(){ _this.CurrentTime = new Date(); },1000); }, beforeDestroy:function(){ if(this.timer){ clearInterval(this.timer); } } }); </script> </body> </html>
{{ }}はいわゆるテキスト補間方式で、双方向バインディングデータを表示するのが目的ですマウントとはelインスタンスにマウントされ、呼び出されますbeforeDestory は、インスタンスが破棄される前に呼び出されます 上記の例では、マウントされたイベントに この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 ! 推奨読書:
vueを使用してプレビューコンポーネントをトリミングする方法
Vueを使用してページの右上隅にホバー可能/非表示メニューを実装する方法
以上がVue.js双方向バインディングプロジェクトの実践的な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。