Vue詳細知識點總結1

**

創建vue實體物件

// mvvm 
const vm = new Vue({
      el: '#app', // element - View,
      data: { // 資料 - Model
        message: 'hello'
      },
      methods: { // 方法
        
      },
      computed: { // 計算屬性
        
      }
    })

說明：在創建vue實體時，會將定義的資料，方法等直接掛載到vue物件實體下，
注意：在vue物件實體下，已有_或者 開 頭 的 屬 性 ， 在 d a t a 中 定 義 的 數 據 最 好 不 要 或 者 開頭的屬性，在data中定義的資料最好不要_或者 開頭的屬性，在data中定義的數據最好不要或?者開頭，如果定義的data 資料中有以_或者 開 頭 的 則 不 會 自 動 掛 在 到 v u e 實 例 下 ， 如 果 要 訪 問 這 些 屬 性 ， 需 要 使 用 開頭的則不會自動掛在到vue實體下，如果要訪問這些屬性，需要使用 開頭的則不會自動掛在到vue實例下，如果要訪問這些屬性，需要使用data去獲取對應屬性的使用，

**

插值

{{ 文本插值 }}

“Mustache”語法，說明，在 {{ }} 內部所書寫的是 JavaScript 的運算式，在標簽的屬性中不能使用 {{ }} 系結屬性值（如果需要動態系結屬性值，使用 v-bind）

指令

v-html

渲染HTML文本

v-text

渲染純文本

v-bind

動態系結屬性值，可以簡寫為 ：

v-on

系結事件，可以簡寫為 @
修飾符：

• .prevent ---- 阻止默認行為
• .stop ---- 阻止事件傳播
• .enter ---- 回車鍵
• .ctrl ---- ctrl 控制鍵，例如：@keydown.ctrl.enter=“sendMessage”

條件渲染指令

v-show

切換元素顯示/隱藏時，操作的是節點的 CSS 樣式（display）：顯示時將 display: none; 洗掉，隱藏時添加 display: none;

v-if與v-show的區別：

• v-if操作的是DOM樹，v-show操作的是css樣式
• v-if有更高的切換開銷，而v-show又更高的初始化渲染開銷，如果要頻繁的切換，則使用v-show更好，如果是運行條件很少改變，則使用v-if較好，

串列渲染指令

v-for

通常在使用v-for實作串列渲染時，需要動態系結key屬性，key值應該是唯一，

陣列變異（變更）方法：

• pop() pop()方法洗掉最后一個元素，把陣列長度減 1，并且回傳它洗掉的元素的值，如果陣列已經為空，則 pop() 不改變陣列，并回傳 undefined 值，
• push() push() 方法可向陣列的末尾添加一個或多個元素，并回傳新的長度
• shift() shift() 方法用于把陣列的第一個元素從其中洗掉，并回傳第一個元素的值
• unshift() unshift() 方法可向陣列的開頭添加一個或更多元素，并回傳新的長度，
• splice(index,howmany,replace)
• sort()
• reverse()

v-once
只渲染元素和組件一次，隨后的重新渲染，元素/組件及其所有的子節點將被視為靜態內容并跳過，

v-pre

跳過這個元素和它的子元素的編譯程序，

v-cloak

和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到實體準備完畢，（作用：避免出現編譯前后頁面節點的閃爍效果）

v-model

通常用于表單元素的資料雙向系結

語法糖

v-model在內部為不用的輸入元素使用不用的property并拋出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 欄位將 value 作為 prop 并將 change 作為事件，

v-slot

用于使用插槽

<template v-slot:subtitle>

</template>

計算屬性和偵聽屬性

計算屬性

說明：計算屬性通常是根據已有的資料，計算出新的資料，一般都是使用到計算屬性的getter.

new Vue({
    data: {
        message: 'hello'
    },
    computed: { // 計算屬性
        reverseMsg() { // 屬性 getter 的簡寫
            return this.message.split('').reverse().join('')
        },
        reverseMsg2: { // 與 reverseMsg() 書寫等價
            get() { // getter
                return this.message.split('').reverse().join('')
            }
        }
    }
})

計算屬性的值會被快取，如果依賴項不改變時，會一直使用快取的資料，當依賴項發生改變時，會重新計算computed屬性的值并繼續快取，

**計算屬性是基于它們的回應式依賴進行快取的，**只在相關的回應式依賴發生改變時他們才會重新求值，

偵聽屬性

關鍵字：watch
用于監聽到資料變化后執行對應的任務

computed 與 method 的區別：

• computed 有快取，watch 無快取
• computed 計算屬性中不能執行異步操作，而 watch 中可以執行異步操作
• computed 通常是由一個或多個資料的變化，生成一個新的資料，而 watch 通常是監聽一個資料的變化，可能引起一個或多個其它資料的變化

組件系統

在組件定義時，data必須是函式的結構，在函式體內部回傳一個普通物件，

**data必須是函式的原因：**因為如果使用普通物件，當組件被復用時，多個組件實體參考到同一個資料物件，當其中某一個組件實體對data資料修改時，其他組件組件實體也會受影響，而使用函式時，每創建一個組件實體時，都是回傳一個新的data物件資料，多個組件實體間data是獨立開來的，當修改組件實體中的資料時，其他組件實體不受影響，

在template中定義布局結構時，必須保存所有的布局使用單個根元素包裹起來

組件注冊

全域注冊

Vue.component('組件名稱', 選項物件)

區域注冊

{
    components: {
        組件名稱: 選項物件
    }
}

在組件或者vue實體的選項物件中，添加components欄位，來區域注冊子組件，而區域注冊的組件，只能在注冊它的父組件內部使用，

組件使用

將組件名作為自定義標簽名使用，
規范：如果組件名稱是使用駝峰命名規范，則在作為自定義標簽名使用時，轉換為短橫線命名規范（各單詞之間使用 短橫線 分隔，所有單詞小寫）

插槽

用作于內容分發，在父組件中可以向子組件傳遞布局結構的內容，

組件通信

父子通信

• 父傳子：通過屬性的方式傳遞資料 ---- prop，
• 子傳父：使用事件的方式傳遞資料，在父組件中使用子組件時，系結一個自定義事件(@customEvent)，在子組件中需要傳遞資料時，觸發對應的事件執行( this.$emit(事件名稱, 需要傳遞的資料) ) 并傳遞相應資料（相當于傳遞的資料是攜帶在 $event 物件中傳遞給父組件的） 即可，

跨組件通信

• 將組件關系轉換為一系列的父子關系（會增加中間組件的處理負擔）
• event bus （事件總線）：創建一個全域的 Vue() 實體（可以將該 Vue() 實體添加到 Vue.prototype 中，這樣就可以在各組件實體中呼叫到了 ），在需要接收資料的組件中使用 $on() 方法注冊一個自定義事件，在需要傳遞資料的組件中使用 $emit() 方法去觸發對應事件的執行并傳遞資料，
• vuex

Prop

父組件向子組件傳遞資料時，可使用 prop ( 屬性 ) 的方式，在組件的選項物件中，使用 props 來定義組件可接收到的屬性，props 可取陣列和物件的結構，陣列中每個元素通常是所能接收屬性的屬性名稱，物件通常是對屬性做校驗使用，

組件中的屬性應該是只讀的（不要修改組件接收到的屬性值）