ホームページ ウェブフロントエンド jsチュートリアル vue.js にはフック関数がいくつありますか

vue.js にはフック関数がいくつありますか

Nov 24, 2020 am 09:44 AM
vue.js フック関数

vue.js には 8 つのフック関数があります: 1. beforeCreate は作成前に使用されます; 2. created は作成後に使用されます; 3. beforeMount はマウント前に使用されます; 4. Mounted はマウントに使用されます. ロード後; 5. beforeDestroyは破壊の前に使用します。

vue.js にはフック関数がいくつありますか

このチュートリアルの動作環境: Windows 7 システム、Vue バージョン 2.9.6。この方法は、すべてのブランドのコンピューターに適しています。

vue.js には 8 つのフック関数があります:

1. beforeCreate: 作成前

1. 現在の vue のインスタンス化初期化操作はいつか実行されます。このライフサイクル関数では、初期読み込みを行うことができます。

2. データ内のプロパティには、現在の関数ではアクセスできませんが、インスタンス オブジェクトを通じてアクセスできます。 vue

2. created: after create

1. beforeCreate が実行されると、created が実行され、現在の関数では、data

2 のプロパティにアクセスできます。現在のライフサイクル関数が実行されると、データ内のすべてのプロパティとメソッド内のすべてのメソッドが vue インスタンスに追加されます。同時に、

は getter/setter メソッドを vue インスタンスに追加します。データ内のすべてのプロパティ

3. フロントエンドとリアエンドでデータ対話を実行する必要がある場合 (AJAX リクエスト時)、現時点では

# 3 を使用する必要があります。サイクル、beForemount: マウント前

## (レンダリング)

## レンダリング関数が初めて呼び出されました ---- & gt; データとテンプレートがテンプレートと結合されておらず、同時に、HTML ページではレンダリングされていません

ここでは、データの前にデータ内のデータをレンダリングする必要があります。 1. データとテンプレートは結合され、実際の DOM 構造にレンダリングされます。

2. 現在のライフサイクル関数でアクセスできます。実際の DOM 構造には、

3. vue では、 $refs

を介して実際の DOM 構造にアクセスできます。 4. ref は ID に似ており、アクセス時の値は一意である必要があります。 this.$refs.property

を渡すことができます。 5. beforeDestroy :破壊前

関数を実行すると、データとテンプレートの関係が切断されます (あなたが作成したものではありません)

このライフサイクル関数では、引き続きデータのプロパティにアクセスできます

しかし、アクセスすることはできません実際の DOM 構造

7. beforeUpdate: 更新前

データ内の属性が変更される限り、このライフサイクルが実行され、レンダリング関数が再度実行されます

このライフサイクル関数では、データ変更の最終処理を実行でき、最新の DOM 構造とデータにアクセスすることもできます

8. updated:After update

現在のライフサイクル関数では、最新の DOM 構造 (データ更新後の最新の DOM 構造) とデータにアクセスできます。

#関連する学習の推奨事項:

JavaScript ビデオ チュートリアル

以上がvue.js にはフック関数がいくつありますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

vite が .env ファイルを解析する方法についての詳細な説明 vite が .env ファイルを解析する方法についての詳細な説明 Jan 24, 2023 am 05:30 AM

Vue フレームワークを使用してフロントエンド プロジェクトを開発する場合、デプロイ時に複数の環境をデプロイすることになりますが、開発環境、テスト環境、オンライン環境で呼び出されるインターフェイス ドメイン名が異なることがよくあります。どうすれば区別できるでしょうか?それは環境変数とパターンを使用することです。

Ace コード エディターを Vue プロジェクトに統合する方法の詳細な図による説明 Ace コード エディターを Vue プロジェクトに統合する方法の詳細な図による説明 Apr 24, 2023 am 10:52 AM

Ace は、JavaScript で書かれた埋め込み可能なコード エディターです。 Sublime、Vim、TextMate などのネイティブ エディターの機能とパフォーマンスに匹敵します。あらゆる Web ページや JavaScript アプリケーションに簡単に埋め込むことができます。 Ace は Cloud9 IDE のメイン エディタとして維持されており、Mozilla Skywriter (Bespin) プロジェクトの後継です。

vue のコンポーネント化とモジュール化の違いは何ですか vue のコンポーネント化とモジュール化の違いは何ですか Dec 15, 2022 pm 12:54 PM

コンポーネント化とモジュール化の違い: モジュール化はコード ロジックの観点から分割され、コードの階層化された開発が容易になり、各機能モジュールの機能の一貫性が保証されます。コンポーネント化は UI インターフェイスの観点から計画され、フロントエンドのコンポーネント化により UI コンポーネントの再利用が容易になります。

Vue3 で単体テストを作成する方法を調べる Vue3 で単体テストを作成する方法を調べる Apr 25, 2023 pm 07:41 PM

Vue.js は、今日のフロントエンド開発において非常に人気のあるフレームワークとなっています。 Vue.js が進化し続けるにつれて、単体テストの重要性がますます高まっています。今日は、Vue.js 3 で単体テストを作成する方法を検討し、いくつかのベスト プラクティスと一般的な問題と解決策を提供します。

vue3 で Amap API を使用する方法について話しましょう vue3 で Amap API を使用する方法について話しましょう Mar 09, 2023 pm 07:22 PM

Amap を使用したとき、公式から多くのケースやデモを勧められましたが、これらのケースはすべてネイティブ メソッドを使用してアクセスしており、vue や React のデモは提供されていませんでした。vue2 アクセスについてはオンラインで多くの人が書いていますが、この記事では、 vue3 が一般的に使用される Amap API をどのように使用するかを見ていきます。皆さんのお役に立てれば幸いです。

現在の Vue バージョンをクエリする方法 現在の Vue バージョンをクエリする方法 Dec 19, 2022 pm 04:55 PM

現在の Vue バージョンを照会するには 2 つの方法があります: 1. cmd コンソールで、「npm list vue」コマンドを実行してバージョンを照会します。出力結果は Vue のバージョン番号情報です。2. パッケージを見つけて開きます。プロジェクト内のjsonファイルを検索して「依存関係」の項目でvueのバージョン情報が確認できます。

vue がファイル スライス アップロードを実装する方法の簡単な分析 vue がファイル スライス アップロードを実装する方法の簡単な分析 Mar 24, 2023 pm 07:40 PM

実際の開発プロジェクトのプロセスでは、比較的大きなファイルをアップロードする必要がある場合がありますが、その場合はアップロードが比較的遅くなり、バックグラウンドでフロントエンドがファイルのスライスをアップロードする必要がある場合があります。これは非常に簡単です。たとえば、1Aギガバイトのファイル ストリームはいくつかの小さなファイル ストリームに分割され、インターフェイスはそれぞれの小さなファイル ストリームを配信するように要求されます。

JSX 構文と Vue のテンプレート構文の簡単な比較 (利点と欠点の分析) JSX 構文と Vue のテンプレート構文の簡単な比較 (利点と欠点の分析) Mar 23, 2023 pm 07:53 PM

Vue.js では、開発者は、JSX 構文とテンプレート構文という 2 つの異なる構文を使用してユーザー インターフェイスを作成できます。どちらの構文にもそれぞれ長所と短所があるので、それらの違い、長所と短所について説明します。

See all articles