この記事では、Vue の学習を継続し、Vue のウォッチ リスナー、計算プロパティ、Vue-cli、および Vue コンポーネントについて詳しく紹介します。入門に必要な知識となります。みんな！
ウォッチ リスナーを使用すると、開発者はデータの変更を監視し、データの変更に対して 特定の操作を実行できます。 (学習ビデオ共有: vue ビデオ チュートリアル )
構文形式は次のとおりです。
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)
}
}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
}
}If watch がリッスンしている場合オブジェクトのプロパティ値が変更された場合、それを監視することはできません。 現時点では、deep オプションを使用する必要があります。
オブジェクト内の 1 つのプロパティへの変更のみを監視したい は次のように定義できますwatch リスナー:
への一連の操作 を経て、最終的に 属性値 が得られます。
2️⃣この動的に計算された属性値は、テンプレート構造またはメソッド メソッドで使用できます。
コードのデモは次のとおりです:
本質はプロパティです;
2️⃣ 計算プロパティは計算結果をキャッシュします 、計算されたプロパティのみ 依存データが変更されると、操作が再計算されます;
2️⃣ vue-cli 公式 Web サイトからの引用: プログラマーは、Webpack の構成の問題を心配して何日も過ごすのではなく、アプリケーションの作成に集中できます;
3️⃣ 中国語の公式 Web サイト:
https:// cli.vuejs.org/zh/(2) インストールと使用
npm install -g @vue/cli2️⃣ バージョンが正しいかどうかを確認してください?
vue --version3️⃣ ターミナルで次のコマンドを実行して、指定した名前でプロジェクトを作成します:
vue create プロジェクトの名前
App.vue は、レンダリングされるテンプレート構造を記述するために使用されます。index.html は、EL 領域を予約する必要があります。main.js は、App.vue を index.html によって予約された領域にレンダリングします; コンポーネント開発とは、カプセル化の考え方に基づいて、カプセル化することを指します。プロジェクトの開発とメンテナンスを容易にするコンポーネントとしてページ上の再利用可能な UI 構造。
1️⃣ vue は、コンポーネント開発を サポートするフロントエンド フレームワークです。;
2️⃣ vue では、コンポーネントのサフィックス名が .vue であると規定されています。以前私が接触した App.vue ファイルは、本質的には vue コンポーネントです;
それぞれ。 vue コンポーネントは、次の 3 つの部分で構成されます。
template → コンポーネントのテンプレート構造
# script → コンポーネントの JavaScript 動作
style → コンポーネントの スタイル
ここで、各コンポーネントにはテンプレート テンプレート構造が含まれている必要があります 一方、スクリプトの動作とスタイルはオプションのコンポーネントです。
vue では次のように規定されています。各コンポーネントに対応するテンプレート構造は、<template> ノードで定義する必要があります。 
?注意喚起?:
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
