フロントエンド開発学習【Vue】-前編

1。概要

1 はじめに

Vue (/vjuː/ と発音、ビューと同様) は、ユーザー インターフェイスを構築するための進歩的な JavaScript フレームワークです。これは標準の HTML、CSS、および JavaScript に基づいて構築されており、ユーザー インターフェイスを効率的に開発するのに役立つ一連の宣言型コンポーネント化プログラミング モデルを提供します。

• ユーザー インターフェイスを構築する: 何らかの方法でデータをユーザー インターフェイスに変換します。
• プログレッシブ: Vue を下から上にレイヤーごとに適用できます。単純なアプリケーションには軽量でコンパクトなコア ライブラリのみが必要で、複雑なアプリケーションにはさまざまな Vue プラグインを導入できます。
• You Yuxi開発

2. 特徴

• MVVMパターンに従う
• コーディングが簡単、サイズが小さく、操作効率が高く、モバイル/PC開発に最適
• UI 自体にのみ焦点を当てており、他のサードパーティ ライブラリ開発プロジェクトを導入することができます。
• コンポーネント モードを採用してコードの再利用率を向上させ、コードの保守を容易にします。
• 宣言型コーディングにより、コーダーは DOM を直接操作する必要がなく、開発効率が向上します。
• 仮想 DOM と Diff アルゴリズムを使用して、DOM ノードをできるだけ再利用します。

3.差分アルゴリズム

Real DOM :
ブラウザーのレンダリングのプロセスには、主に次の 5 つのステップが含まれます。

• ブラウザは HTML ドキュメントを取得し、DOM ツリーを解析します。
• CSS を解析してカスケード スタイル シート モデル CSSOM (CSS Object Model) を構築する
• DOM ツリーと CSSOM を 1 つのレンダー ツリーにマージする
• Render Treeを使用すると、ブラウザは各ノードのCSS定義と所属を取得できるため、各ノードの実際の位置を計算できます。
• 前のステップの計算ルールに従ってページを描画する

仮想 DOM とは、実際の DOM を操作するブラウザのパフォーマンスの問題を解決するために、実際の DOM ツリーを js オブジェクトの形式で構築することを指します。
仮想DOMとは、jsの実行速度の速さを利用してDOMの動作を最適化するもので、jsを使ってDOMツリーをシミュレートし、レンダリング前にDOMの動作をjsで処理するもので、簡単にまとめると以下の3点に分かれます。

• JavaScript オブジェクトを使用して DOM ツリーをシミュレートし、DOM ツリーをレンダリングします。
• diff アルゴリズムを通じて古い DOM ツリーと新しい DOM ツリーを比較し、相違点のオブジェクトを取得します。
• 差分オブジェクトをレンダリングされた DOM ツリーに適用します。

diff アルゴリズムは、同じレベルのツリー ノードを比較するための効率的なアルゴリズムです。

• 比較は同じレベルでのみ実行され、レベル間の比較は行われません。
• diff 比較のプロセスでは、ループは両側から中央まで比較します。
  

4. 環境を構築する

Vueプロジェクトのビルド方法

5. 使いやすい

Vue インスタンス化オブジェクトがルート要素にマウントされた後、グローバル Vue オブジェクト インスタンスが生成されます。Vue オブジェクトは、インスタンス化プロセス中に構成オブジェクト (オプション) を渡します。オプションには、データ、メソッド、計算済み、監視などが含まれます。

• Vue が機能するには、Vue インスタンスを作成し、構成オブジェクトを渡す必要があります。
• ルート コンテナ内のコードは引き続き HTML 仕様に準拠していますが、一部の特殊な Vue 構文が混在しています。
• ルート コンテナ内のコードは Vue テンプレートと呼ばれます
• Vue インスタンスとコンテナーの間には1 対 1 の対応関係があり、後者は Vue に置き換えられません。
• 実際の開発には Vue インスタンスが 1 つだけあり、コンポーネントとともに使用されます。
• { {xxx}} の xxx は js 式を記述する必要があり、xxx はデータ内のすべての属性を自動的に読み取ることができます
• データ内のデータが変更されると、テンプレート内のデータが使用されている場所も自動的に更新されます。

2. 文法

1. テンプレートの構文

テンプレートの構文には、テキスト補間構文と命令構文の 2 種類があります。

1. 補間構文: タグの内容を解析するために使用されます。

<div>{
   
   {xxx}}</div>
//xxx 是 js 表达式，可以直接读取到 data 中的所有区域

2. 命令構文: タグの解析に使用されます (タグ属性、タグ本体の内容、バインディング イベントなど)。

• v-html: HTML として挿入;

<span v-html="xxx"></span>

• v-bind: 一方向のデータ バインディング。データはデータからページにのみ流れることができます。

<div v-bind:id="dynamicId"></div>
简写为：
<div :id="dynamicId"></div>

动态绑定多个值：
<div v-bind="objectOfAttrs"></div>
data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

• v-model: 双方向データ バインディング。データはデータからページに流れるだけでなく、ページからデータに流れることもできます。 と省略され、v-model:valueフォームv-modelコンポーネントでよく使用されます。

<input type="text" v-model:value="name"><br/>
简写为
<input type="text" v-model="name">

• v-if: このコマンドは、式の true または false の値に基づいて要素を削除/挿入します。

<p v-if="seen">Now you see me</p>

• v-on: DOM イベントをリッスンします。@文字として省略されます。

<a v-on:click="doSomething"> ... </a>

<!-- 简写 -->
<a @click="doSomething"> ... </a>

動的パラメータ:
コマンド パラメータに JavaScript 式を使用することもできます。これは角かっこで囲む必要があります。

<a v-bind:[attributeName]="url"> ... </a>

<!-- 简写 -->
<a :[attributeName]="url"> ... </a>

• 動的パラメータの式の値は文字列または null である必要があります。
• HTML 属性名ではスペースと引用符は無効です。
• DOM インライン テンプレート (HTML ファイルに直接記述されたテンプレート) を使用する場合、ブラウザによって強制的に小文字に変換されるため、名前に大文字を使用しないようにする必要があります。

2. レスポンシブの基本

data : オプション API を使用する場合、データ オプションはコンポーネントのリアクティブ状態を宣言するために使用されます。このオプションの値は、オブジェクトを返す関数である必要があります。Vue は、新しいコンポーネント インスタンスを作成するときにこの関数を呼び出し、関数によって返されたオブジェクトをリアクティブ システムでラップします。このオブジェクトのすべてのトップレベル プロパティはコンポーネント インスタンス (つまり、メソッドとライフサイクル フック内) にプロキシされます。

つまり、data は Vue インスタンスを作成するときに呼び出される関数であり、この関数はレスポンシブ コンポーネントで応答する値で構成されるオブジェクトを返します。オブジェクトのトップレベルのプロパティはコンポーネント インスタンスにリンクされています。

データを書き込むには 2 つの方法があります。

• オブジェクトタイプ: データ: { }
• 関数形式: data() { return { } }
  選択方法: 現時点ではどのような記述方法でも問題ありませんが、将来コンポーネントになると、データは関数を使用する必要があります。関数を使用しないとエラーが報告されます。
  Vue によって管理される関数はアロー関数を記述してはなりません。そうしないと、これは Vue インスタンスではなくなります。

el :
el には 2 つの書き方があります

• Vue インスタンス オブジェクトの作成時に el 属性を構成する
• まず Vue インスタンスを作成し、次に vm.$mount('#root') を通じて el の値を指定します。

3. MVVMモデルデータエージェント

MVVMモデル

• M：モデル モデル、データ内のデータ
• V: ビュービュー、テンプレートコード
• VM: ビューモデル ViewModel、Vue インスタンス

データ内のすべての属性は最終的に vm 上に表示されます。vm
上のすべての属性 (つまり、Vue インスタンス) と Vue プロトタイプのすべての属性は、Vue テンプレートで直接使用できます (ページ上の大きな二重括弧)。

データ プロキシ: 1 つのオブジェクトを介した別のオブジェクトのプロパティに対するプロキシ操作 (読み取り/書き込み)

Object.defineproperty (属性を追加する対象、属性名、{構成項目})
構成項目:

{
    
    
	value:xx,
	enumerbale:true,//是否可枚举，默认false
	writable:true,// 是否可以被修改，默认值是false
    configurable:true// 是否可以被删除，默认值是false
	get(){
    
    }
	//当有人读取对象的该属性时，get函数(getter)就会被调用，且返回值就是该属性的值
	set(value){
    
    }
	//当有人修改对象的该属性时，set函数(setter)就会被调用，且会收到要修改的值
}

Vue のデータ プロキシ:

• Vue のデータ プロキシは、vm オブジェクトを使用して、データ オブジェクト内のプロパティの操作 (読み取り/書き込み) をプロキシします。
• Vue のデータ プロキシの利点: データ内のデータのより便利な操作
  基本原則
• object.defineProperty() を通じてデータ オブジェクト内のすべてのプロパティを VM に追加します。
• VM に追加される属性ごとに、ゲッターセッターを指定します。
• gettersetter 内のデータ内の対応する属性を操作 (読み取り/書き込み)

つまり、vue インスタンスを作成するときに、設定項目を渡します。ここで、 data 関数は一連のデータを返し、それがインスタンス (vm) にコピーされ、その後、 data 関数内のデータを使用し_dataて_data、データ。_dataデータハイジャックを実現するには、データ変更監視を実装し、Vue にレンダリングを通知します。

これは Vue2 で書かれています。Vue
インスタンスが作成されると、データ オブジェクト内のすべてのプロパティが Vue の応答システムに追加されます。これらのプロパティの値が変更されると、ビューは「応答」します。つまり、一致が新しい値で更新されます。

データを書き込む方法は 2 つありますが、オブジェクトと関数のどちらでしょうか?

4. イベント処理

• v-on:xxx または @xxx を使用してイベントをバインドします。xxx はイベント名です。
• イベントのコールバックはメソッド オブジェクトで構成する必要があり、最終的には VM 上に配置されます。
• メソッドで構成された関数については、アロー関数を使用しないでください。そうしないと、これは vm ではなく、ウィンドウをポイントすることになります。
• メソッドで設定された関数はすべて Vue によって管理される関数であり、これは vm またはコンポーネント インスタンス オブジェクトを指します。
• @click="demo" は @click="demo($event)" と同じ効果がありますが、後者はパラメーターを渡すことができます。

イベント修飾子:

修飾子は以下と組み合わせて使用​​できます。@click.prevent.stop=dosome

キーボードイベント:

5. 計算されたプロパティ

属性: データ内のデータ。前者は属性名、後者は属性値です。
定義: 使用する属性が存在しないため、既存の属性から計算する必要があります。
原則: 最下層は、Objcet.defineproperty() メソッドによって提供されるゲッターとセッターを使用します。ゲッターは、値が最初に読み取られた
とき、および依存データが変更されたときに呼び出されます。プロパティが変更されると、セッターが呼び出されます。

利点: メソッドの実装と比較して、内部にキャッシュ メカニズム (多重化) があり、より効率的でデバッグが容易です。

計算されたプロパティ値は、リアクティブな依存関係に基づいてキャッシュされます。計算されたプロパティは、そのリアクティブな依存関係が更新された場合にのみ再計算されます。それ以外の場合は、getter 関数を再実行せずに、前の計算結果がすぐに返されます。再レンダリングが発生すると、メソッド呼び出しは常に関数を再度実行します。

• 計算された属性は最終的に VM 上に表示され、直接読み取って使用するだけです
• 計算されたプロパティを変更する場合は、変更に応答するように set 関数を記述する必要があります。set により、計算が依存するデータが変更されます。
• 計算されたプロパティが変更を考慮しないと判断された場合は、計算されたプロパティの短縮形式を使用できます。

文法:

computed{
    
    
	计算属性名:
	{
    
    	get(){
    
    },
		set(){
    
    }}
	}

new Vue({
    
    
	el:'#root',
	data:{
    
    
		n:12
	},
	computed: {
    
    
		//完整写法
      fun: {
    
    
      	get(){
    
    
      		return n++;
      	},
     	set(value){
    
    
     		this.n=value
     	}
      // 简写
      fun2() {
    
    
        return this.n++
      }
	}
})

6. モニターのプロパティ

計算された属性は、「新しい属性」を取得するために既存の属性から直接計算されますが、既存の属性に対して派生操作を実行する必要がある場合、それらの操作を完了することはできません。

監視プロパティは、リアクティブ プロパティが変更されるたびに起動される関数です。監視する既存のプロパティが変更されたときに、関数をトリガーして何かを実行します。

監視監視プロパティ

• 監視対象のプロパティが変更されると、コールバック関数ハンドラーが自動的に呼び出され、関連する操作が実行されます。
• 監視対象の属性は、監視する前に存在する必要があります。データまたは計算された属性のいずれかを監視できます。
• 構成項目属性のデフォルトはimmediate:falseですが、trueに変更すると、初期化中にハンドラ(newValue,oldValue)が1回呼び出されます。

監視を記述するには 2 つの方法があります

• Vue の作成時にウォッチを渡します: {} 設定
• vm.$watch() による監視

  const vm = new Vue({
    
    
    el: '#root',
    data: {
    
    
      isHot: true,
    },
    computed: {
    
    
      info() {
    
    
        return this.isHot ? '炎热' : '凉爽'
      }
    },
    methods: {
    
    
      changeWeather() {
    
    
        this.isHot = !this.isHot
      }
    },
    // 方式一
    /* watch:{		
			isHot:{
				immediate:true,
				handler(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue)
				}
			}
		} */
  })
  // 方式二
  vm.$watch('isHot', {
    
    		
    immediate: true, // 初始化时让handler调用一下
    //handler什么时候调用？当isHot发生改变时
    handler(newValue, oldValue) {
    
    
      console.log('isHot被修改了', newValue, oldValue)
    }
  })

複数レベルの監視:
監視オブジェクト内の値に直接引用符を使用します。'对象名.属性名'

const vm = new Vue({
    
    
    el: '#root',
    data: {
    
    
      number:{
    
    
		a:1,
		b:2
		}
    },
    watch:{
    
    		
		"number.a":{
    
    
				immediate:true,
				handler(newValue,oldValue){
    
    
				}
			}
		}
  })

深い監視:
デフォルトでは監視は浅いです: 監視対象のプロパティは、新しい値が割り当てられた場合にのみコールバック関数をトリガーしますが、ネストされたプロパティの変更はトリガーされません。すべてのネストされた変更をリッスンしたい場合は、ディープ リスナーが必要です。

• Vue の監視は、デフォルトではオブジェクトの内部値の変更を監視しません (1 つのレイヤー)
• ウォッチ内の設定によりdeep:trueオブジェクトの内部値の変化を監視可能(マルチレイヤー)

知らせ

• Vue 自体はオブジェクトの内部値の変化を監視できますが、Vue が提供する監視はデフォルトでは監視できません。
• 監視を使用する場合は、監視データの具体的な構造に応じて詳細な監視を使用するかどうかを決定します

省略形:
モニタリング属性にハンドラー以外の構成項目がない場合は、省略形にすることができます。

 watch: {
    
    
      //简写
      isHot(newValue, oldValue) {
    
    
        console.log('isHot被修改了', newValue, oldValue, this)
      }

計算されたプロパティとリッスンされたプロパティ

• computed で完了できる関数は watch で完了できます。

• watch で完了できる関数は、computed では完了できない場合があります (たとえば、watch は非同期操作を実行できます)。

• Vue によって管理されるすべての関数は、通常の関数として作成するのが最適であるため、このポイントは vm またはコンポーネント インスタンス オブジェクトです。

• Vue によって管理されないすべての関数 (タイマー コールバック関数、Ajax コールバック関数など、Promise コールバック関数) については、アロー関数を作成して、そのポイントが vm またはコンポーネント インスタンス オブジェクトになるようにするのが最善です。

7. クラスとスタイルのバインディング

データ バインディングの一般的な要件シナリオは、 を使用して要素の CSS クラス リストとインライン スタイルを操作することですv-bind。

• 記述方法: :class="xxx"、xxx は文字列、配列、またはオブジェクトです。
• :style="[a,b]" ここで、a と b はスタイル オブジェクトです。
• :style="{fontSize: xxx}" ここで、xxx は動的な値です
• 文字列書き込み方式は、クラス名が不確定で動的に取得する必要がある場合に適しています。
• 配列の書き込み方法は、複数のスタイルをバインドする場合、数が不明、名前も不明な場合に適しています。
• オブジェクトの書き方が向いているのは：複数のスタイルをバインドしたい、番号も決まっていて名前も決まっているが、使うかどうか迷っている

绑定数组
<div :class="[activeClass, errorClass]"></div>

绑定对象isActive
<div :class="{ active: isActive }"></div>

<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
  <div class="basic" :class="mood" @click="changeMood">{
   
   {name}}</div><br/><br/>

  <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
  <div class="basic" :class="classArr">{
   
   {name}}</div><br/><br/>

  <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
  <div class="basic" :class="classObj">{
   
   {name}}</div><br/><br/>

  <!-- 绑定style样式--对象写法 -->
  <div class="basic" :style="styleObj">{
   
   {name}}</div><br/><br/>

  <!-- 绑定style样式--数组写法 -->
  <div class="basic" :style="styleArr">{
   
   {name}}</div>

8. 条件付きレンダリング

v-if ディレクティブは、コンテンツを条件付きでレンダリングするために使用されます。このブロックは、ディレクティブの式が true を返した場合にのみレンダリングされます。要素 v-elseはv-iforv-else-if 要素の後に続く必要があります。そうでない場合、要素は認識されません。

複数の要素を切り替えたい: この場合、1 つの要素 (非表示のラッパー要素) で v-if を使用できます。最終的にレンダリングされた結果にはこの要素は含まれません。

v-show要素を条件付きで表示することもできます。

<h1 v-show="ok">Hello!</h1>

v-if と v-for：

• v-if は、切り替え時に条件付きブロック内のイベント リスナーと子コンポーネントが確実に破棄され、再作成されるため、「true」の条件付きレンダリングです。
• v-if も遅延です。最初のレンダリングで条件が false と評価された場合、何も行われません。条件付きブロックは、条件が最初に true になった場合にのみレンダリングされます。
• 対照的に、v-show は非常に単純で、要素は初期条件に関係なく常にレンダリングされ、CSS 表示プロパティのみが切り替えられます。
• 全体的に、v-if のスイッチング オーバーヘッドは高くなりますが、v-show の初期レンダリング オーバーヘッドは高くなります。したがって、頻繁な切り替えが必要な場合は v-show の方が適しており、実行時にバインド条件がほとんど変更されない場合は v-if の方が適切です。

9. リストのレンダリング

v-for ディレクティブを使用して、配列に基づいてリストをレンダリングします。

• リストデータを表示するために使用されます
• 構文: <li v-for="(item, index) of items" :key="index">、キーはインデックスにすることができますが、トラバーサル オブジェクトの一意の識別子を使用することをお勧めします。
• 走査可能: 配列、オブジェクト、文字列 (あまり使用されない)、指定された回数 (あまり使用されない)

"(item,index) of items" :key="index" :
オブジェクトの走査: 1 つ目は属性値、2 つ目は属性名、3 つ目は位置インデックスです。配列の
走査: items 内の item

<li v-for="item in items">
  {
   
   { item.message }}
</li>

  <!-- 遍历数组 -->
  <h3>人员列表（遍历数组）</h3>
  <ul>
    <li v-for="(p,index) of persons" :key="index">{
    
    {
    
     p.name }}-{
    
    {
    
     p.age }}</li>
  </ul>

  <!-- 遍历对象 -->
  <h3>汽车信息（遍历对象）</h3>
  <ul>
    <li v-for="(value,k) of car" :key="k">{
    
    {
    
     k }}-{
    
    {
    
     value }}</li>
  </ul>

  <!-- 遍历字符串 -->
  <h3>测试遍历字符串（用得少）</h3>
  <ul>
    <li v-for="(char,index) of str" :key="index">{
    
    {
    
     char }}-{
    
    {
    
     index }}</li>
  </ul>

  <!-- 遍历指定次数 -->
  <h3>测试遍历指定次数（用得少）</h3>
  <ul>
    <li v-for="(number,index) of 5" :key="index">{
    
    {
    
     index }}-{
    
    {
    
     number }}</li>
  </ul>

v-for は整数値を直接受け入れることができます。この使用例では、テンプレートは 1 ～ n の値の範囲に基づいて複数回繰り返されます。

<span v-for="n in 10">{
   
   { n }}</span>

ここでの n の初期値は 0 ではなく 1 から始まることに注意してください。

複数の要素を含むブロックをレンダリングするには、タグで v-for を使用します。

優先順位を区別する方法がないため、v-for と v-if を同時に使用することはお勧めできません。

v-for をコンポーネント上で直接使用することはできますが、コンポーネントには独自の独立したスコープがあるため、コンポーネントにデータが自動的に渡されることはありません。

キー管理:
デフォルトでは、Vue は「インプレース更新」戦略に従って v-for によってレンダリングされる要素のリストを更新します。データ項目の順序が変更された場合、Vue はそれに応じて DOM 要素の順序を移動しませんが、最初に指定されたインデックス位置でレンダリングされるように、各要素を所定の位置で更新します。

デフォルト モードは効率的ですが、リスト レンダリング出力の結果が子コンポーネントの状態や一時的な DOM 状態 (フォーム入力値など) に依存しない場合にのみ適しています。

したがって、各要素に対応するブロックに一意のキーを提供して、各ノードの ID を追跡し、それによって既存の要素を再利用および並べ替えることができるようにする必要があります。

アレイ管理:

変更方法：元の配列を変更する

• 押す（）
• ポップ（）
• シフト（）
• シフト解除()
• スプライス（）
• 選別（）
• 逆行する（）

配列を置換: 新しい配列を返します

• フィルター（）
• concat()
• スライス（）

データモニタリング:
このリンクは非常にわかりやすく説明しています: Vue データモニタリング
簡単に言えば、それは次のとおりです。

1. データ オブジェクトを _data オブジェクトに処理します。応答性の高い get メソッドと set メソッド (データ プロキシ) を追加して、データ ハイジャックを実装し、Vue インスタンスに保存します。
2. Vue グローバル インスタンス オブジェクトは、_data オブジェクトをプロキシして、_data 内の属性に対する直接操作を実装します。
3. データ変更監視効果
   リアクティブ セッターを使用した各データが変更されると、リアクティブ セッターが呼び出され、リアクティブ セッターが呼び出されると、テンプレートの再解析がトリガーされ、新しい仮想 DOM が生成され、新旧の仮想 DOM が比較されます。 、実際の DOM へのコンテンツ マッピングを更新し、この一連のプロセスを再レンダリングします。

動的に追加される属性: 応答性の高い属性を動的に追加するための Vue.set(targetObject,attributeName,attributeValue) メソッドまたは this.$set(targetObject,attributeName,attributeValue)。

Vue は応答性のゲッターとセッターを配列要素に追加しないため、添え字による配列データへの変更を Vue で監視できません。
配列の場合、push、pop、shift、unshift、splice、reverse、sort の 7 つの API を呼び出して元の配列自体を変更するだけで、Vue は応答します。