Vue の計算プロパティ、メソッド、リスナーの使用を開始する例-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Vue の計算プロパティ、メソッド、リスナーの使用を開始する例

王雪芹

Aug 16, 2020 pm 07:04 PM

vue

初心者が Vue を学習する場合、計算されたプロパティ、メソッド、リスナーは必須の知識ポイントです。便宜上、簡単にするために、今回は同じ例を使用し、計算プロパティ、メソッド、リスナーという 3 つのメソッドを使用して同じ効果を実現します。何もせずに、車に乗りましょう。

効果:

Vue で 2 つの値 name1 と name2 を定義しました。期待される効果は、名前を html に出力することであり、名前は次の連結です。 name1とname2になります。 name1 が変更されるか、name2 が変更されるかに関係なく、それに応じて名前も変更されます。

<div id="root">
        {{name}}
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                name1:&#39;jiang&#39;,
                name2:&#39;he&#39;,
                name:&#39;jiang he&#39;,
            }
        })
     </script>

ログイン後にコピー

ブラウザ効果:

Vue の計算プロパティ、メソッド、リスナーの使用を開始する例

1. 計算属性実装効果

<div id="root">
        {{name}}
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                name1:&#39;jiang&#39;,
                name2:&#39;he&#39;,
            },
           
            computed:{
                name:function(){
                 return this.name1+&#39; &#39;+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:&#39;jiang&#39;,
                name2:&#39;he&#39;,
            },
           
            methods:{
                name:function(){
                    return this.name1+&#39; &#39;+this.name2;
                }
            }
            
        })
    </script>

ログイン後にコピー

注: 補間式 {{name()}} には括弧が必要です。

計算プロパティとは異なり、ページが 1 回読み込まれる限り、メソッドは 1 回実行され、キャッシュはありません。

3. リスナー実装の効果

<div id="root">
        {{name}}
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                name1:&#39;jiang&#39;,
                name2:&#39;he&#39;,
                name:&#39;jiang he&#39;,
            },
            watch:{
                name1:function(){
                    this.name= this.name1+&#39; &#39;+this.name2;
                 },
                name2:function(){
                    this.name= this.name1+&#39; &#39;+this.name2;
                }
            }

ログイン後にコピー

注: リスナー実装は文字通りに理解できます。監視とは、name1 と name2 の変更を監視することです。変更がある場合、名前は再割り当てされます。ここでは、name にデフォルト値があります。

#最後に

#3 つの方法はすべて同じ方法を実現できますが、どれが最適でしょうか?

最良の方法は最初の計算属性です。2 番目の方法と比較して、計算属性はキャッシュされてパフォーマンスが節約され、3 番目の方法と比較してコードが単純です。

熟練すると、誰もがそれらをよりよく理解できるようになります。

以上がVue の計算プロパティ、メソッド、リスナーの使用を開始する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7358

Java チュートリアル

1628

CakePHP チュートリアル

1353

Laravel チュートリアル

1265

PHP チュートリアル

1214

Related knowledge

vueでechartを使用する方法 May 09, 2024 pm 04:24 PM

Vue で ECharts を使用すると、アプリケーションにデータ視覚化機能を簡単に追加できます。具体的な手順には、ECharts および Vue ECharts パッケージのインストール、ECharts の導入、チャートコンポーネントの作成、オプションの構成、チャートコンポーネントの使用、Vue データに対応したチャートの作成、対話型機能の追加、および高度な使用法の使用が含まれます。

vue におけるエクスポートのデフォルトの役割 May 09, 2024 pm 06:48 PM

質問: Vue におけるエクスポートのデフォルトの役割は何ですか?詳細説明: エクスポートデフォルトは、コンポーネントのデフォルトのエクスポートを定義します。インポートすると、コンポーネントが自動的にインポートされます。インポートプロセスを簡素化し、明確さを改善し、競合を防ぎます。一般に、名前付きエクスポートとデフォルトエクスポートの両方を使用して、個々のコンポーネントをエクスポートし、グローバルコンポーネントを登録するために使用されます。

vueでのmap関数の使い方 May 09, 2024 pm 06:54 PM

Vue.js マップ関数は、各要素が元の配列の各要素の変換結果である新しい配列を作成する組み込みの高階関数です。構文は、map(callbackFn) です。callbackFn は、配列内の各要素を最初の引数として受け取り、オプションでインデックスを 2 番目の引数として受け取り、値を返します。 map 関数は元の配列を変更しません。

vueのeventと$eventの違い May 08, 2024 pm 04:42 PM

Vue.js では、event はブラウザによってトリガーされるネイティブ JavaScript イベントですが、$event は Vue コンポーネントで使用される Vue 固有の抽象イベントオブジェクトです。 $event はデータバインディングをサポートするようにフォーマットおよび拡張されているため、一般に $event を使用する方が便利です。ネイティブイベントオブジェクトの特定の機能にアクセスする必要がある場合は、event を使用します。

Vue における onmounted の役割 May 09, 2024 pm 02:51 PM

onMounted は、Vue のコンポーネントマウントライフサイクルフックです。その機能は、コンポーネントが DOM にマウントされた後に、DOM 要素への参照の取得、データの設定、HTTP リクエストの送信、イベントリスナーの登録などの初期化操作を実行することです。コンポーネントが更新された後、またはコンポーネントが破棄される前に操作を実行する必要がある場合は、他のライフサイクルフックを使用できます。

vueのエクスポートとデフォルトのエクスポートの違い May 08, 2024 pm 05:27 PM

Vue.js でモジュールをエクスポートするには、エクスポートとデフォルトのエクスポートの 2 つの方法があります。 export は名前付きエンティティのエクスポートに使用され、中括弧の使用が必要です。export default はデフォルトエンティティのエクスポートに使用され、中括弧は必要ありません。インポートする場合、エクスポートによってエクスポートされたエンティティはその名前を使用する必要がありますが、エクスポートのデフォルトによってエクスポートされたエンティティは暗黙的に使用できます。複数回インポートする必要があるモジュールにはデフォルトのエクスポートを使用し、一度だけエクスポートするモジュールにはエクスポートを使用することをお勧めします。

Vueのフックとは何ですか May 09, 2024 pm 06:33 PM

Vue フックは、特定のイベントまたはライフサイクルステージでアクションを実行するコールバック関数です。これらには、ライフサイクルフック (beforeCreate、mounted、beforeDestroy など)、イベント処理フック (クリック、入力、キーダウンなど)、およびカスタムフックが含まれます。フックはコンポーネントの制御を強化し、コンポーネントのライフサイクルに対応し、ユーザーの操作を処理し、コンポーネントの再利用性を向上させます。フックを使用するには、フック関数を定義し、ロジックを実行してオプションの値を返すだけです。