Vue の計算プロパティ、メソッド、リスナーについて話しましょう-Vue.js-php.cn

1 計算されたプロパティcomputed

##2 番目は、すでによく知られている メソッドです。methods

ホームページ

ウェブフロントエンド

Vue.js

Vue の計算プロパティ、メソッド、リスナーについて話しましょう

青灯夜游

Mar 29, 2023 pm 05:54 PM

javascript フロントエンド vue.js

この記事は、Vue を学習し、Vue の基本理論と実際の操作について説明し、Vue で計算されるプロパティ、メソッド、リスナーを紹介するのに役立ちます。

Vue の計算プロパティ、メソッド、リスナーについて話しましょう

要件: データには、firstName と lastName という 2 つのコンテンツがあり、ページには「」と表示されます。フルネームfullName」。

前の記事からわかるように、補間式を直接使用することでこの要件を達成できます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>前端一万小时-计算属性、方法与侦听器</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="app">
    {{firstName + &#39; &#39; + lastName}} <!-- 2️⃣使用插值表达式展示全名。 -->
  </div>

  <script>
    var vm = new Vue({
      el: &#39;#app&#39;,

      data: { // 1️⃣在 data 中定义一组数据，里面有 firstName 和 lastName 两个内容；
        firstName: &#39;Oli&#39;,
        lastName: &#39;Zhao&#39;
      }
    })
  </script>
</body>
</html>

ログイン後にコピー

Vue の計算プロパティ、メソッド、リスナーについて話しましょう

ただし、要件は達成されています。、しかし同時に、テンプレートにはいくつかのロジックがあります。テンプレート自体は表示するだけなので、ロジックを追加する必要はありません。 [関連する推奨事項: vuejs ビデオチュートリアル、Web フロントエンド開発 ]

理想的な方法は、fullName 変数を直接補間式. フルネーム表示:

<div id="app">
  {{fullName}}
</div>

<script>
  var vm = new Vue({
    el: &#39;#app&#39;,
    data: {
      firstName: &#39;Oli&#39;,
      lastName: &#39;Zhao&#39;,
      fullName: &#39;Oli Zhao&#39; // ❗️data 中添加了 fullName！
    }
  })
</script>

ログイン後にコピー

Vue の計算プロパティ、メソッド、リスナーについて話しましょう

ご覧のとおり、このようにコードを書いても問題ありません。

しかし、実際にはコードは冗長です。元のデータにはすでに firstName と lastName があり、フルネームを結合するために使用できますが、再定義されています。 fullName 。

次に、この要件を解決するための他の 3 つの方法を紹介します。

1 計算されたプロパティ`computed`

<div id="app">
  {{fullName}}
</div>

<script>
  var vm = new Vue({
    el: &#39;#app&#39;,
    data: {
      firstName: &#39;Oli&#39;,
      lastName: &#39;Zhao&#39;
    },

    computed: { // 1️⃣计算属性 computed 属于 Vue 实例的方法，直接定义在实例中；

      fullName() { // 2️⃣计算属性的值 fullName 是一个函数；

        return this.firstName + &#39; &#39; + this.lastName // ❗️一定要写上 return 把计算结果返回！
      }
    }
  })
</script>

ログイン後にコピー

計算されたプロパティを使用した後、コードはまったく冗長になりません。は firstName と lastName に基づいて計算され、ページへの影響は同じです。 Vue の計算プロパティ、メソッド、リスナーについて話しましょう計算プロパティに関するもう 1 つの非常に重要な知識ポイントがあります。

計算プロパティは、応答性の依存関係に基づいてキャッシュされます。
つまり、

計算された属性が依存するデータが変更されると再計算され、変更がない場合は計算されず、最後の計算が行われます。結果

(これにより、パフォーマンスもいくらか向上します)。コードでは、

firstName

または lastName が変更されると、fullName が再計算され、変更されていない場合は、キャッシュされた名前が再計算されます。使用した計算結果です。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><div id="app"> {{fullName}} {{age}}  </div> <script> var vm = new Vue({ el: &#39;#app&#39;, data: { firstName: &#39;Oli&#39;, lastName: &#39;Zhao&#39;, age: 18 // 1️⃣data 中添加 age 为 18； }, computed: { fullName() { console.log(&#39;计算了一次&#39;) // 3️⃣每当执行时 console.log 一次。 return this.firstName + &#39; &#39; + this.lastName } } }) </script></pre><div class="contentsignin">ログイン後にコピー</div></div>Web ページを保存して更新すると、計算属性

が 1 回計算されたことがわかります

。 age を変更するためにコンソールに vm.age = 20 と入力すると、ページが再レンダリングされ、「18」が「20」になりますが、コンソールには # が出力されません。 ## 再計算 1 回、つまり、計算された属性は再計算されません。

#そして、 Vue の計算プロパティ、メソッド、リスナーについて話しましょう lastName

を変更すると、再計算されます:

# # 2 メソッド Vue の計算プロパティ、メソッド、リスナーについて話しましょう methods

##2 番目は、すでによく知られている `メソッドです。`methods

<div id="app">

  <!-- ❗️注意：在插值表达式内，计算属性通过属性的名字就可以用，但调用方法时，
	一定要加上 () 来进行调用！ -->
  {{fullName()}}

  {{age}}
</div>

<script>
  var vm = new Vue({
    el: &#39;#app&#39;,
    data: {
      firstName: &#39;Oli&#39;,
      lastName: &#39;Zhao&#39;,
      age: 18
    },

    methods: { // ❗️在 methods 中定义 fullName 方法，逻辑上与计算属性一样；
      fullName() { 
        console.log(&#39;计算了一次&#39;)
        return this.firstName + &#39; &#39; + this.lastName
      }
    }

  })
</script>

ログイン後にコピー

保存後、ページを更新して効果を表示するときに計算が実行されます。 age を変更すると再計算され、lastName

を変更すると再計算されます。

つまり、メソッドは機械的にキャッシュされません。ページが再レンダリングされる限り、fullName Vue の計算プロパティ、メソッド、リスナーについて話しましょうメソッドは再実行されます

。

3 リスナーwatch

リスナーを使用する場合、コードを冗長にすることは避けられません: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><div id="app"> {{fullName}}  {{age}} </div> <script> var vm = new Vue({ el: &#39;#app&#39;, data: { firstName: &#39;Oli&#39;, lastName: &#39;Zhao&#39;, fullName: &#39;Oli Zhao&#39;, // 1️⃣-①：data 中定义 fullName； age: 18 }, watch: { // 2️⃣在实例中定义侦听器 watch； firstName() { /* 2️⃣-①：定义 firstName 方法，对 firstName 进行侦听，当它改变时，重新对 fullName 赋值； / console.log(&#39;计算了一次&#39;) this.fullName = this.firstName + &#39; &#39; + this.lastName }, lastName() { / 2️⃣-②：定义 lastName 方法，对 lastName 进行侦听，当它改变时，重新对 fullName 赋值。 */ console.log(&#39;计算了一次&#39;) this.fullName = this.firstName + &#39; &#39; + this.lastName } } }) </script></pre><div class="contentsignin">ログイン後にコピー</div></div>保存後、ページに戻って更新します。初めてページに入ったときは、fullNameを再定義しているため、計算せずに<p>watch</p>が表示されます。 <p>firstName<code> とlastName をリッスンするために `watch` のみを使用したため、`fullName` に関連しないデータ `age` を変更した後 `なので、計算は実行されません。` lastName `を変更すると、計算が実行されます:`
概要:

`methods` は、ページがレンダリングされるたびにメソッドを 1 回実行します。

`watch` と `computed` は両方ともキャッシュメカニズムを備えています。ただし、`watch` の構文は、`computed` の構文よりもはるかに複雑です。

だから一般に、関数が `watch`、`methods`、`computed` メソッドを通じて実装できる場合、最初の推奨は「計算されたプロパティ`computed`」です。

(学習ビデオ共有: vuejs 入門チュートリアル、基本プログラミングビデオ )
以上がVue の計算プロパティ、メソッド、リスナーについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
3週間前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.最高のグラフィック設定
3週間前 By 尊渡假赌尊渡假赌尊渡假赌

アサシンのクリードシャドウズ：シーシェルリドルソリューション
1週間前 By DDD

R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌

Atomfallのクレーンコントロールキーカードを見つける場所
1週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

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

7439

15

CakePHP チュートリアル

1369

52

Steamのアカウント名の形式は何ですか

76

11

Win11 Activation Key Permanent

32

19

もっと見る

Related knowledge

PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ Mar 16, 2024 pm 12:09 PM
PHP と Vue: フロントエンド開発ツールの完璧な組み合わせ今日のインターネットの急速な発展の時代において、フロントエンド開発はますます重要になっています。 Web サイトやアプリケーションのエクスペリエンスに対するユーザーの要求がますます高まっているため、フロントエンド開発者は、より効率的で柔軟なツールを使用して、応答性の高いインタラクティブなインターフェイスを作成する必要があります。フロントエンド開発の分野における 2 つの重要なテクノロジーである PHP と Vue.js は、組み合わせることで完璧なツールと見なされます。この記事では、PHP と Vue の組み合わせと、読者がこれら 2 つをよりよく理解し、適用できるようにするための詳細なコード例について説明します。

フロントエンドの面接官からよく聞かれる質問 Mar 19, 2024 pm 02:24 PM
フロントエンド開発のインタビューでは、HTML/CSS の基本、JavaScript の基本、フレームワークとライブラリ、プロジェクトの経験、アルゴリズムとデータ構造、パフォーマンスの最適化、クロスドメインリクエスト、フロントエンドエンジニアリング、デザインパターン、新しいテクノロジーとトレンド。面接官の質問は、候補者の技術スキル、プロジェクトの経験、業界のトレンドの理解を評価するように設計されています。したがって、候補者はこれらの分野で自分の能力と専門知識を証明するために十分な準備をしておく必要があります。

簡単な JavaScript チュートリアル: HTTP ステータスコードを取得する方法 Jan 05, 2024 pm 06:08 PM
JavaScript チュートリアル: HTTP ステータスコードを取得する方法、特定のコード例が必要です序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータスコードを取得して操作が成功したかどうかを判断し、さまざまなステータスコードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

 Django はフロントエンドですか、バックエンドですか?それをチェックしてください！ Jan 19, 2024 am 08:37 AM
Django は、迅速な開発とクリーンなメソッドを重視した Python で書かれた Web アプリケーションフレームワークです。 Django は Web フレームワークですが、Django がフロントエンドなのかバックエンドなのかという質問に答えるには、フロントエンドとバックエンドの概念を深く理解する必要があります。フロントエンドはユーザーが直接対話するインターフェイスを指し、バックエンドはサーバー側プログラムを指し、HTTP プロトコルを通じてデータと対話します。フロントエンドとバックエンドが分離されている場合、フロントエンドとバックエンドのプログラムをそれぞれ独立して開発して、ビジネスロジックとインタラクティブ効果、およびデータ交換を実装できます。

Go 言語のフロントエンドテクノロジーの探求: フロントエンド開発の新しいビジョン Mar 28, 2024 pm 01:06 PM
Go 言語は、高速で効率的なプログラミング言語として、バックエンド開発の分野で広く普及しています。ただし、Go 言語をフロントエンド開発と結びつける人はほとんどいません。実際、フロントエンド開発に Go 言語を使用すると、効率が向上するだけでなく、開発者に新たな視野をもたらすことができます。この記事では、フロントエンド開発に Go 言語を使用する可能性を探り、読者がこの分野をよりよく理解できるように具体的なコード例を示します。従来のフロントエンド開発では、ユーザーインターフェイスの構築に JavaScript、HTML、CSS がよく使用されます。

JavaScript で HTTP ステータスコードを簡単に取得する方法 Jan 05, 2024 pm 01:37 PM
JavaScript で HTTP ステータスコードを取得する方法の紹介: フロントエンド開発では、バックエンドインターフェイスとの対話を処理する必要があることが多く、HTTP ステータスコードはその非常に重要な部分です。 HTTP ステータスコードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータスコードとは何ですか? HTTP ステータスコードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが

 Golang とフロントエンドテクノロジーの組み合わせ: Golang がフロントエンド分野でどのような役割を果たすかを探る Mar 19, 2024 pm 06:15 PM
Golang とフロントエンドテクノロジーの組み合わせ: Golang がフロントエンド分野でどのような役割を果たしているかを調べるには、具体的なコード例が必要です。インターネットとモバイルアプリケーションの急速な発展に伴い、フロントエンドテクノロジーの重要性がますます高まっています。この分野では、強力なバックエンドプログラミング言語としての Golang も重要な役割を果たします。この記事では、Golang がどのようにフロントエンドテクノロジーと組み合わされるかを検討し、具体的なコード例を通じてフロントエンド分野での可能性を実証します。フロントエンド分野における Golang の役割は、効率的で簡潔かつ学びやすいものとしてです。

フロントエンドモジュラー ESM とは何ですか? Feb 25, 2024 am 11:48 AM
フロントエンド ESM とは何ですか? 特定のコードサンプルが必要です。フロントエンド開発では、ESM は ECMAScript 仕様に基づいたモジュール式開発メソッドである ECMAScriptModules を指します。 ESM は、より優れたコード構成、モジュール間の分離、再利用性など、多くの利点をもたらします。この記事では、ESM の基本概念と使用法を紹介し、いくつかの具体的なコード例を示します。 ESM の基本概念 ESM では、コードを複数のモジュールに分割することができ、各モジュールは他のモジュール用のいくつかのインターフェイスを公開します。

See all articles