監視リスナー、計算されたプロパティ、Vue-cli、および Vue のコンポーネントの簡単な分析

この記事では、Vue の学習を継続し、Vue のウォッチ リスナー、計算プロパティ、Vue-cli、および Vue コンポーネントについて詳しく紹介します。入門に必要な知識となります。みんな！

1. ウォッチリスナー

(1) ウォッチリスナーとは

ウォッチ リスナーを使用すると、開発者はデータの変更を監視し、データの変更に対して 特定の操作を実行できます。 (学習ビデオ共有: vue ビデオ チュートリアル )

構文形式は次のとおりです。

(2) 使用するユーザーを検出するために監視します。名前が使用可能かどうかを確認します。

ユーザー名の値の変更をリッスンし、

axios を使用して Ajax リクエストを開始し、名前が使用可能かどうかを確認します。現在入力されているユーザー名は利用可能です:

コードは次のように示されています:

watch: {
	// 监听 username 值的变化
	async username( newVal ) {
		if (newVal === '') return
		// 使用 axios 发起请求，判断用户名是否可用
		const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
		console.log(res)
	}
}

(3)即時オプション

デフォルトでは、コンポーネントは初期ロード後に監視リスナーを呼び出します。

watch リスナーを すぐに呼び出す場合は、immediate オプションを使用する必要があります。

コードのデモは次のとおりです。

watch: {
	username: {
	// handler 是固定写法，表示当 username 的值变化时，自动调用 handler 处理函数
		handler: async function ( newVal ) {
			if (newVal === '') return
			const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
			console.log(res)
		},
		// 表示页面初次渲染好之后，就立即触发当前的 watch 侦听器
		immediate: true
	}
}

(4) 深いオプション

If watch がリッスンしている場合オブジェクトのプロパティ値が変更された場合、それを監視することはできません。 現時点では、deep オプションを使用する必要があります。

コードのデモは次のとおりです:

(5) オブジェクトの単一属性の変更を監視します

If

オブジェクト内の 1 つのプロパティへの変更のみを監視したい は次のように定義できますwatch リスナー:

コードは次のように示されます:

---

2. 計算プロパティ

(1) 計算プロパティとは

1️⃣ 計算プロパティとは、

への一連の操作 を経て、最終的に 属性値 が得られます。

2️⃣

この動的に計算された属性値は、テンプレート構造またはメソッド メソッドで使用できます。

コードのデモは次のとおりです:

(2) 計算プロパティの特徴

1️⃣ 計算プロパティは宣言されていますが、メソッドとして定義されている場合、計算プロパティの

本質はプロパティです;

2️⃣ 計算プロパティは計算結果を

キャッシュします 、計算されたプロパティのみ 依存データが変更されると、操作が再計算されます;

---

3. vue-cli

(1) vue-cli とは

1️⃣ vue-cli は、Vue.js 開発の標準ツールです。これにより、プログラマが Webpack に基づいてエンジニアリングされた Vue プロジェクトを作成するプロセスが簡素化されます。

2️⃣ vue-cli 公式 Web サイトからの引用: プログラマーは、Webpack の構成の問題を心配して何日も過ごすのではなく、アプリケーションの作成に集中できます;

3️⃣ 中国語の公式 Web サイト:

https:// cli.vuejs.org/zh/

(2) インストールと使用

1️⃣ vue-cli は npm 上にあります。グローバル パッケージなので簡単にインストールできます。 npm install コマンドを使用してコンピュータにインストールします:

npm install -g @vue/cli2️⃣ バージョンが正しいかどうかを確認してください?

vue --version3️⃣ ターミナルで次のコマンドを実行して、指定した名前でプロジェクトを作成します:

vue create プロジェクトの名前

(3) vueプロジェクトのsrcディレクトリの構成

assetsフォルダ
• : で使用する静的リソースファイルを格納します。プロジェクト (例: CSS スタイル シート、画像リソース;
components フォルダー
• : プログラマによってカプセル化されたすべての再利用可能なコンポーネントは、コンポーネント ディレクトリに配置する必要があります;
main.js
• はプロジェクトのエントリ ファイルです。プロジェクト全体を実行するには、main.js を最初に実行する必要があります。
App.vue
• はプロジェクトのルート コンポーネントです。

( 4) vue プロジェクト 実行プロセス

エンジニアリング プロジェクトで vue が行うことは非常に単純です。main.js を介して、index.html の指定された領域に App.vue をレンダリングします。

• App.vue は、レンダリングされるテンプレート構造を記述するために使用されます。
• index.html は、EL 領域を予約する必要があります。
• main.js は、App.vue を index.html によって予約された領域にレンダリングします;

---

4. Vue コンポーネント

(1) コンポーネント開発とは

コンポーネント開発とは、カプセル化の考え方に基づいて、カプセル化することを指します。プロジェクトの開発とメンテナンスを容易にするコンポーネントとしてページ上の再利用可能な UI 構造。

(2) vue でのコンポーネント開発

1️⃣ vue は、コンポーネント開発を サポートするフロントエンド フレームワークです。;

2️⃣ vue では、コンポーネントのサフィックス名が .vue であると規定されています。以前私が接触した App.vue ファイルは、本質的には vue コンポーネントです;

(3) vue コンポーネントの 3 つのコンポーネント

それぞれ。 vue コンポーネントは、次の 3 つの部分で構成されます。

• template → コンポーネントのテンプレート構造
• # script → コンポーネントの JavaScript 動作
• style → コンポーネントの スタイル

ここで、各コンポーネントにはテンプレート テンプレート構造が含まれている必要があります 一方、スクリプトの動作とスタイルはオプションのコンポーネントです。

3.1 template

vue では次のように規定されています。各コンポーネントに対応するテンプレート構造は、d477f9ce7bf77f53fbcf36bec1b69b7a ノードで定義する必要があります。

?注意喚起?:

• template は、vue によって提供される コンテナ タグ であり、 の役割のみを果たします。パッケージ。、実際の DOM 要素としてレンダリングされません。
• テンプレートには唯一のルート ノードのみを含めることができます。

#3.2 スクリプト

1️⃣ vue 規制: 開発者は、

3f1c4e4b6b16bbbd69b2ee476dc4f83a ノード内のコンポーネントの JavaScript ビジネス ロジック をカプセル化できます。

5b8b77bb7a3607db25abf34210579d17

ノードの基本構造は次のとおりです:
2️⃣ vue 規則:

.vue##コンポーネント データ

内の # は関数 でなければなりません。 はデータ オブジェクト を直接指すことはできません。 したがって、コンポーネントでデータ ノードを定義するとき、次の方法は

間違っています

:
3.3 style

vue は次のように規定しています: コンポーネント内の c9ccee2e6ea535a969eb3f532ad9fe89

ノードはオプションであり、開発者は

c9ccee2e6ea535a969eb3f532ad9fe89 ノードWrite できます。現在のコンポーネントの UI 構造を美しくするためのスタイル。 3f1c4e4b6b16bbbd69b2ee476dc4f83a

ノードの基本構造は次のとおりです。

# を c9ccee2e6ea535a969eb3f532ad9fe89# に追加します。 ## タグ #lang="less"

属性では、

less 構文を使用してコンポーネントのスタイルを記述することができます: ( 4) コンポーネント間の親と子の関係

4.1 コンポーネントを使用するための 3 つのステップ

4.2 グローバル コンポーネントの登録

1️⃣

components

を通じて登録されるのはプライベート サブコンポーネントです。

例:コンポーネント A の コンポーネント ノードの下に、コンポーネント F が登録されます。この場合、コンポーネント F はコンポーネント A でのみ使用でき、コンポーネント C では使用できません。 2️⃣ vue プロジェクトの main.js エントリ ファイルでは、Vue.component()

メソッドを通じてグローバル コンポーネントを登録できます。

コードのデモは次のとおりです:

(5) コンポーネントの props

props はコンポーネントのカスタム プロパティです。共通コンポーネントをカプセル化する場合、props

を合理的に使用すると、コンポーネントの再利用性が大幅に向上します。

! 構文は次のように示されます:

5.1 プロパティは読み取り専用です

1️⃣ vue は次のように規定しています: コンポーネントにカプセル化されたカスタム プロパティは 読み取り専用、プログラマーは値を直接変更できません 小道具の。それ以外の場合は、エラーが直接報告されます;

2️⃣ props の値を変更したい場合は、props の値を data にダンプできます。なぜならdata のデータは読み取りと書き込みの両方が可能です。
##5.2 props のデフォルト値

カスタム プロパティを宣言する場合、

デフォルトのデフォルト値を使用してプロパティを定義できます# ＃＃＃＃。サンプル コードは次のとおりです。

#5.3 props の type value type
カスタム プロパティを宣言するときは、

pass type 属性の値タイプ を定義します。サンプルコードは次のとおりです。

5.4 props の必須項目
カスタム プロパティを宣言する場合、次のことができます。 pass 必須オプションは、属性を必須として設定し、ユーザーに属性の値を渡すように強制します。サンプルコードは以下のとおりです。

(6) コンポーネント間のスタイル競合問題

1️⃣ デフォルトでは、 は # で記述されます。 # #.vue コンポーネント内のスタイルはグローバルに有効になるため、
複数のコンポーネント間で スタイルの競合が発生しやすくなります。

2️⃣ コンポーネント間のスタイル競合の根本的な原因は次のとおりです:

単一ページ アプリケーションでは、すべてのコンポーネントの DOM 構造は

一意のindex.html に基づいています。ページ レンダリングの ;各コンポーネントのスタイルは、index.html ページ全体の DOM 要素に影響します

6.1考え方: コンポーネント スタイルの競合の問題を解決する方法

• 各コンポーネントに一意のカスタム属性を割り当てます。コンポーネント スタイルを記述するときは、属性セレクターを使用してスタイルの範囲を制御します。サンプル コード：
• 6.2 スタイル ノードのスコープ属性

開発効率と開発エクスペリエンスを向上させるために、vue は ## を提供しますコンポーネント間のスタイルの競合を防ぐためのスタイル ノードの #scoped

属性:

6.3 /deep/ スタイルの浸透

スコープ付き属性が現在のコンポーネントのスタイル ノードに追加された場合、現在のコンポーネントのスタイルはそのサブコンポーネントには影響しません

。

特定のスタイルをサブコンポーネントに適用したい場合は、/deep/ Depth セレクターを使用できます。

(学習ビデオ共有:

Web フロントエンド開発、基本プログラミング ビデオ

)

以上が監視リスナー、計算されたプロパティ、Vue-cli、および Vue のコンポーネントの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。