Vue筆記

Vue.js筆記

1. 常用命令

   • 安裝webpack

     npm install webpack [-g]		//-g代表global，表示將webpack安裝到全局環境中
     

   • 安裝vue腳手架

     npm install vue -cli [-g]
     

   • 項目常用命令

     /** 通過webpack創建vue項目工程 */
     vue init webpack project-name		//project-name爲你的工程名，不能用中文，建議用小寫
     
     /** 指定vue的版本創建vue項目工程 */
     vue init webpack#1.0 project-name	//創建vue1.0的項目
     
     /** 安裝項目依賴 */
     npm install 							//安裝基本依賴
     
     /** 安裝vue路由模塊vue-router和網絡請求模塊vue-resource */
     npm install vue-router vue-resource
     
     /** 啓動項目 */
     npm run dev
     

2. 生命週期

   1. created： created是vm實例已創建但未掛載。
   2. mounted： 一些DOM操作應該放在mounted中。

3. 計算屬性–cumputed

   • 使用計算屬性時，當值發生改變時，便會出發計算屬性重新計算，讓後將計算結果更新到頁面
   • watch屬性是當某一參數發生變化便會執行。其作用是彌補，當需要在數據變化時執行異步或開銷較大的操作時,computed屬性無法高效處理時的不足。

4. 組件通信

   1. 父子通信：在Vue.js中，父子組件的關係可以總結爲 props down, events up 。父組件通過props向下傳遞數據給子組件，子組件通過events給父組件發送消息。

      1. 父->子： props，prop是單向綁定的，當父組件的屬性變化時，將傳導給子組件，但是不會反過來。這是爲了防止子組件無意修改了父組件的狀態——這會讓應用的數據流難以理解。另外，每次父組件更新時，子組件的所有prop都會更新爲最新值。這意味着你不應該在子組件內部改變prop。
      • 注：在JavaScript中對象和數組是引用類型，指向同一個內存空間，如果prop是一個對象或數組，在子組件內部改變它會影響父組件的狀態。
      2. 子->父：通過events事件傳遞消息（$emit和$on）

   2. 非父子通信：有時候兩個組件也需要通信(非父子關係)。在簡單的場景下，可以使用一個空的Vue實例作爲中央事件總線。在複雜的情況下，我們應該考慮使用專門的狀態管理模式。

5. 官網VUE教程筆記

   1. 模板語法：

      1. 使用{{}}在<template>中引用模塊中綁定的變量或js數值表達式，添加v-once屬性後將使該變量不再更新。
      2. v-html="rawHtml"可以輸出帶html格式的變量rawHtml樣式效果。
      3. 標籤元素自身屬性在其屬性名前加v-bind:或:即可引用變量來作爲屬性值，當屬性對應的是方法名時，使用v-on:或@。
      4. 修飾符 (Modifiers) 是以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault();

         <form v-on:submit.prevent="onSubmit">...</form>
         

      5. 計算屬性 VS 方法： 兩者的不同點是計算屬性是基於它們的依賴進行緩存的。只在相關依賴發生改變時它們纔會重新求值。
      6. 計算屬性默認只有getter方法，可以在需要時，自己提供一個setter方法

         // ...
         computed: {
         	fullName: {
         		// getter
         		get: function () {
         			return this.firstName + ' ' + this.lastName
         		},
         		// setter
         		set: function (newValue) {
         			var names = newValue.split(' ')
         			this.firstName = names[0]
         			this.lastName = names[names.length - 1]
         		}
         	}
         }
         // ...
         

         7. 偵聽器：Vue 通過 watch 選項提供了一個更通用的方法，來響應數據的變化。當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的。
         8. 可以通過v-bind或:來給class屬性和style屬性進行樣式的動態綁定。

            <!-- class屬性的動態綁定 -->
            <div v-bind:class="[{ active: isActive }, errorClass]"></div>
            
            <!-- style樣式動態綁定 -->
            <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
            

   2. 條件渲染 (v-if and v-show)

      1. v-if="ok"中當ok爲true時該元素纔會顯示
      2. v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，否則它將不會被識別。

         <div v-if="type === 'A'">
           A
         </div>
         <div v-else-if="type === 'B'">
           B
         </div>
         <div v-else-if="type === 'C'">
           C
         </div>
         <div v-else>
           Not A/B/C
         </div>
         

      3. Vue 會儘可能高效地渲染元素，通常會複用已有元素而不是從頭開始渲染。通過添加一個具有唯一值的key屬性即可不進行復用。

         <template v-if="loginType === 'username'">
         	<label>Username</label>
         	<input placeholder="Enter your username" key="username-input">
         </template>
         <template v-else>
         	<label>Email</label>
         	<input placeholder="Enter your email address" key="email-input">
         </template>
         

      4. v-show指令效果和v-if差不多，不同的是帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display。
         • 注意，v-show 不支持 <template> 元素，也不支持 v-else
      5. v-if VS v-show
         • v-if在條件爲真時纔開始渲染，否則什麼都不做，v-show不管初始條件是什麼，元素都會被渲染。

   3. 列表渲染 (v-for)

6. vue 父子組件的生命週期順序

1. 加載渲染過程
   父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
2. 子組件更新過程
   父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
3. 父組件更新過程
   父beforeUpdate -> 父updated
4. 銷燬過程
   父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed