ホームページ > 記事 > ウェブフロントエンド > Vue の計算プロパティ、メソッド、リスナーの使用を開始する例
初心者が Vue を学習する場合、計算されたプロパティ、メソッド、リスナーは必須の知識ポイントです。便宜上、簡単にするために、今回は同じ例を使用し、計算プロパティ、メソッド、リスナーという 3 つのメソッドを使用して同じ効果を実現します。何もせずに、車に乗りましょう。
効果:
Vue で 2 つの値 name1 と name2 を定義しました。期待される効果は、名前を html に出力することであり、名前は次の連結です。 name1とname2になります。 name1 が変更されるか、name2 が変更されるかに関係なく、それに応じて名前も変更されます。
<div id="root"> {{name}} </div> <script> // 父组件 new Vue({ el:"#root", data:{ name1:'jiang', name2:'he', name:'jiang he', } }) </script>
ブラウザ効果:
1. 計算属性実装効果
<div id="root"> {{name}} </div> <script> // 父组件 new Vue({ el:"#root", data:{ name1:'jiang', name2:'he', }, computed:{ name:function(){ return this.name1+' '+this.name2; } } }) </script>
分析: computed は計算された属性です。文字通りに計算することもできます。つまり、name1 と name2 を結合して最終的に name を生成します。
計算された属性はキャッシュされることに注意してください。つまり、name1 または name2 が変更され、キャッシュ内の値と異なる場合にのみ再計算されます。
name1 または name2 が変更されない場合、computed は再計算されません。
2. 効果を実現する方法
<div id="root"> {{name()}} </div> <script> // 父组件 new Vue({ el:"#root", data:{ name1:'jiang', name2:'he', }, methods:{ name:function(){ return this.name1+' '+this.name2; } } }) </script>
注: 補間式 {{name()}} には括弧が必要です。
計算プロパティとは異なり、ページが 1 回読み込まれる限り、メソッドは 1 回実行され、キャッシュはありません。
3. リスナー実装の効果
<div id="root"> {{name}} </div> <script> // 父组件 new Vue({ el:"#root", data:{ name1:'jiang', name2:'he', name:'jiang he', }, watch:{ name1:function(){ this.name= this.name1+' '+this.name2; }, name2:function(){ this.name= this.name1+' '+this.name2; } }
注: リスナー実装は文字通りに理解できます。監視とは、name1 と name2 の変更を監視することです。変更がある場合、名前は再割り当てされます。ここでは、name にデフォルト値があります。
#最後に
以上がVue の計算プロパティ、メソッド、リスナーの使用を開始する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。