詳細(xì)內(nèi)容可以到vue官方文檔查看

指令

指令 (Directives) 是帶有 v- 前綴的特殊特性仁锯。指令特性的值預(yù)期是單個 JavaScript 表達(dá)式 (v-for 是例外)怀泊。指令的職責(zé)是：當(dāng)表達(dá)式的值改變時呻纹，將其產(chǎn)生的連帶影響，響應(yīng)式地作用于 DOM见妒。

參數(shù)

• 綁定屬性（v-bind重抖，簡寫 : ）宴偿，href 是參數(shù)

<a v-bind:href="url">...</a>
簡寫：<a :href="url">...</a>

• 添加事件（v-on，簡寫 @ ）尿招，事件名是參數(shù)

<a v-on:click="doSomething">...</a>
簡寫：<a @click="doSomething">...</a>

動態(tài)參數(shù)

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

• 這里的 attributeName （動態(tài)屬性）會被作為一個 JavaScript 表達(dá)式進(jìn)行動態(tài)求值矾柜，求得的值將會作為最終的參數(shù)來使用。
• 動態(tài)參數(shù)表達(dá)式有一些語法約束就谜，因為某些字符怪蔑，例如空格和引號，放在 HTML 特性名里無效丧荐。同樣缆瓣，在 DOM 中使用模板時需要回避大寫鍵名。

修飾符

• 修飾符 (modifier) 是以半角句號 . 指明的特殊后綴虹统，用于指出一個指令應(yīng)該以特殊方式綁定弓坞。
• 使用修飾符時，順序很重要车荔；相應(yīng)的代碼會以同樣的順序產(chǎn)生昼丑。因此，用 v-on:click.prevent.self 會阻止所有的點擊夸赫，而 v-on:click.self.prevent 只會阻止對元素自身的點擊菩帝。
  事件修飾符
• .stop
• .prevent
• .capture
• .self
• .once
• .passive（ .passive 修飾符尤其能夠提升移動端的性能。）

<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監(jiān)聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進(jìn)行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>

<!-- 點擊事件將只會觸發(fā)一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滾動事件的默認(rèn)行為 (即滾動行為) 將會立即觸發(fā) -->
<!-- 而不會等待 `onScroll` 完成  -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>

• 不要把 .passive 和 .prevent 一起使用呼奢，因為 .prevent 將會被忽略宜雀，同時瀏覽器可能會向你展示一個警告。請記住握础，.passive 會告訴瀏覽器你不想阻止事件的默認(rèn)行為辐董。

計算屬性與偵聽屬性

下面的計算屬性將不再更新，因為 Date.now() 不是響應(yīng)式依賴：

computed: {
  now: function () {
    return Date.now()
  }
}

每調(diào)用一次now方法就會刷新時間：

methods: {
  now: function () {
    return Date.now()
  }
}

計算屬性：computed
方法：methods
偵聽屬性：watch（響應(yīng)數(shù)據(jù)的變化）

• 計算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的禀综，只有在相關(guān)響應(yīng)式依賴發(fā)生改變時简烘，它們才會重新求值。就是說如果相關(guān)的變量沒有發(fā)生改變定枷，多次訪問計算屬性孤澎，會立即返回之前的計算結(jié)果，而不必再次執(zhí)行函數(shù)欠窒。
• 而每當(dāng)觸發(fā)重新渲染時覆旭，調(diào)用方法就會再次執(zhí)行函數(shù)。
• 如果不希望有緩存岖妄，可以用方法來替代計算屬性型将。
• Vue 提供了一種更通用的方式來觀察和響應(yīng) Vue 實例上的數(shù)據(jù)變動：偵聽屬性。當(dāng)有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動而變動時荐虐，很容易濫用 watch 七兜，然而，通常更好的做法是使用計算屬性而不是命令式的 watch 回調(diào)福扬。但當(dāng)需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時惊搏，這個方式是最有用的。
• computed 一般用于進(jìn)行簡單的計算忧换，把模板上的簡單計算邏輯放到 computed 中恬惯，簡化模板，減輕模板負(fù)擔(dān)亚茬。
• watch 更多用于更為復(fù)雜的計算酪耳，監(jiān)聽數(shù)據(jù)與數(shù)據(jù)之間的變動。還可以執(zhí)行異步操作刹缝。

樣式設(shè)置

綁定 class（v-bind:class）

• 對象
  可以傳給 v-bind:class 一個對象碗暗，動態(tài)地切換 class。
  <div v-bind:class="{ active: isActive }"></div>
  上面的語法表示 active 這個 class 是否存在取決于數(shù)據(jù)屬性 isActive 的 truthiness
  梢夯。isActive 為 true 則顯示 active樣式表 言疗。

data: {
  isActive: true
}

v-bind:class 指令也可以與普通的 class 屬性共存，

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

如下data：

data: {
  isActive: true,
  hasError: false
}

結(jié)果渲染為：

<div class="static active"></div>

• 數(shù)組
  可以把一個數(shù)組傳給 v-bind:class颂砸，當(dāng)成一個 class 列表來用噪奄。

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染為：

<div class="active text-danger"></div>

如果你也想根據(jù)條件切換列表中的 class死姚，可以用三元表達(dá)式：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

這樣寫將始終添加 errorClass，但是只有在 isActive 是 truthy
時才添加 activeClass勤篮。
不過都毒，當(dāng)有多個條件 class 時這樣寫有些繁瑣。所以在數(shù)組語法中也可以使用對象語法：

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

• 組件
  當(dāng)在一個自定義組件上使用 class 屬性時碰缔，這些類將被添加到該組件的根元素上面账劲。這個元素上已經(jīng)存在的類不會被覆蓋。
  例如金抡，如果你聲明了這個組件：

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

然后在使用它的時候添加一些 class：

<my-component class="baz boo"></my-component>

HTML 將被渲染為:

<p class="foo bar baz boo">Hi</p>

對于帶數(shù)據(jù)綁定 class 也同樣適用：

<my-component v-bind:class="{ active: isActive }"></my-component>

當(dāng) isActive 為 truthy 時瀑焦，HTML 將被渲染成為：

<p class="foo bar active">Hi</p>

綁定內(nèi)聯(lián)樣式（v-bind:style）

• 對象
  v-bind:style 的對象語法十分直觀，看著非常像 CSS梗肝，但其實是一個 JavaScript 對象榛瓮。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名：

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

• 數(shù)組
  v-bind:style 的數(shù)組語法可以將多個樣式對象應(yīng)用到同一個元素上：

<div v-bind:style="[styleObject1, styleObject2]"></div>

條件渲染

v-if 统捶，v-else榆芦，v-else-if 柄粹，v-show

• v-if 指令用于條件性地渲染一塊內(nèi)容喘鸟。這塊內(nèi)容只會在指令的表達(dá)式返回 truthy 值的時候被渲染。

<h1 v-if="awesome">Vue is awesome!</h1>

也可以用 v-else 添加一個“else 塊”：

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no ??</h1>

• v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面驻右，否則它將不會被識別什黑。
• 類似于 v-else，v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素之后堪夭。
• v-show 指令用于根據(jù)條件展示元素愕把。
  注意，v-show 不支持 <template> 元素森爽，也不支持 v-else恨豁。
  帶有 v-show 的元素始終會被渲染并保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display爬迟。

v-if （條件渲染）和 v-show （條件展示）

• v-if 是“真正”的條件渲染橘蜜，因為它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。
• v-if 也是惰性的：如果在初始渲染時條件為假付呕，就什么也不做计福，直到條件第一次變?yōu)檎鏁r，才會開始渲染條件塊徽职。
• 而v-show不管初始條件是什么象颖，元素總是會被渲染，并且只是簡單地基于 CSS 進(jìn)行切換姆钉。
• 一般來說说订，v-if 有更高的切換開銷抄瓦，而 v-show 有更高的初始渲染開銷。因此克蚂，如果需要非常頻繁地切換闺鲸，使用 v-show 更好；如果在運行時條件很少改變埃叭，使用 v-if 更好摸恍。

列表渲染

用 v-for 指令根據(jù)一組數(shù)組（或者一個對象）的選項列表進(jìn)行渲染。v-for 指令需要使用 item in items （對象：value in object）形式的特殊語法赤屋，items 是源數(shù)據(jù)數(shù)組并且 item 是數(shù)組元素迭代的別名（items是數(shù)組名 item是數(shù)組項立镶，value是屬性值 object是對象名）。
變異方法 (mutation method)类早，顧名思義媚媒，會改變被這些方法調(diào)用的原始數(shù)組，例如：push()涩僻，pop()缭召，shift()，unshift()逆日，splice()嵌巷，sort()，reverse()室抽。相比之下搪哪，也有非變異方法 (non-mutating method) ，例如：filter()坪圾，concat() 和 slice() 晓折。這些不會改變原始數(shù)組，但總是返回一個新數(shù)組兽泄。當(dāng)使用非變異方法時漓概，可以用新數(shù)組替換舊數(shù)組。

表單輸入綁定

• 可以用 v-model 指令在表單 <input>病梢、<textarea> 及 <select> 元素上創(chuàng)建雙向數(shù)據(jù)綁定胃珍。它會根據(jù)控件類型自動選取正確的方法來更新元素。
• v-model 在內(nèi)部為不同的輸入元素使用不同的屬性并拋出不同的事件：text 和 textarea 元素使用 value 屬性和 input 事件飘千；checkbox 和 radio 使用 checked 屬性和 change 事件堂鲜；select 字段將 value 作為 prop 并將 change 作為事件。

組件

• 組件是可復(fù)用的 Vue 實例护奈，所以它們與 new Vue 接收相同的選項缔莲，例如 data、computed霉旗、watch痴奏、methods 以及生命周期鉤子等蛀骇。除了像 el 這樣根實例特有的選項。
• 組件的復(fù)用,每用一次組件读拆，就會有一個它的新實例被創(chuàng)建擅憔。
• 一個組件的 data 選項必須是一個函數(shù)：

data: function () {
  return {
   data : data
  }
},
或者：data () {
  return {
   data : data
  }
}

• 通過Vue.component注冊組件（全局組件），components定義需使用的組件檐晕，通過 prop 向子組件傳遞數(shù)據(jù)暑诸， props 驗證數(shù)據(jù)類型。

import ComponentA from './ComponentA.vue'//導(dǎo)入想使用的組件
import ComponentItems from './ComponentItems.vue'

export default {
  props:{
    title : String // name:type（名稱 : 類型）
}
  components: {
    ComponentA, //等同于ComponentA : ComponentA
    'component-items' : ComponentItems //在模板中引用<component-items />
  },
  // ...
}

• 每個組件只有一個根元素

<div id="App">
  <h1>{{ App }}</h1>
  <div><a :href = "url"></a></div>
</div>

• 自定義組件名
  使用kebab-case（短橫線分隔命名）和PascalCase（首字母大寫命名）辟灰，推薦字母全小寫且使用短橫線分隔命名个榕。注意定義組件名和引用組件名一致。
• 單向數(shù)據(jù)流
  所有的父子之間的 prop 都形成一個單向下行綁定：父級 prop 的更新會向下流動到子組件中芥喇，但是反過來則不行西采；每次父級組件發(fā)生更新時，子組件中所有的 prop 都將會刷新為最新的值继控。這意味著我們不應(yīng)該在一個子組件內(nèi)部改變 prop械馆。
  type 可以是下列原生構(gòu)造函數(shù)中的一個：
• 類型檢查
  type 可以是以下原生構(gòu)造函數(shù)中的一個：String，Number武通，Boolean霹崎，Array，Object厅须，Date仿畸，Function食棕，Symbol朗和；type 還可以是一個自定義的構(gòu)造函數(shù)，并且通過 instanceof 來進(jìn)行檢查確認(rèn)簿晓。
• 特性繼承
  如果不希望組件的根元素繼承特性眶拉，可以在組件的選項中設(shè)置inheritAttrs: false。配合實例的 $attrs 屬性使用憔儿，該屬性包含了傳遞給一個組件的特性名和特性值忆植。有了 inheritAttrs: false 和 $attrs，就可以手動決定這些特性會被賦予哪個元素谒臼。

動態(tài)組件和異步組件

動態(tài)組件

• 在一個多標(biāo)簽的界面中使用 is 特性來切換不同的組件朝刊，當(dāng)在這些組件之間切換的時候，有時會想保持這些組件的狀態(tài)蜈缤，以避免反復(fù)重渲染導(dǎo)致的性能問題拾氓。
• 每次切換新標(biāo)簽的時候，Vue 都創(chuàng)建了一個新的綁定 is 屬性的對象的實例底哥，有時候希望那些標(biāo)簽的組件實例能夠在它們第一次被創(chuàng)建的時候緩存下來咙鞍，可以用一個 <keep-alive> 元素將其動態(tài)組件包裹起來房官。

異步組件

• 在大型應(yīng)用中，可能需要將應(yīng)用分割成小一些的代碼塊续滋，并且只在需要的時候才從服務(wù)器加載一個模塊翰守。為了簡化，Vue 允許以一個工廠函數(shù)的方式定義你的組件疲酌，這個工廠函數(shù)會異步解析已經(jīng)定義的組件蜡峰。Vue 只有在這個組件需要被渲染的時候才會觸發(fā)該工廠函數(shù)，且會把結(jié)果緩存起來供未來重渲染朗恳。

自定義事件

• 不同于組件和 prop事示，事件名不存在任何自動化的大小寫轉(zhuǎn)換。觸發(fā)的事件名需要完全匹配監(jiān)聽這個事件所用的名稱僻肖，即名稱要完全一致肖爵。
• 不同于組件和 prop，事件名不會被用作一個 JavaScript 變量名或?qū)傩悦卧啵跃蜎]有理由使用 camelCase（駝峰命名） 或 PascalCase （首字母大寫命名）了劝堪。
• 并且 v-on 事件監(jiān)聽器在 DOM 模板中會被自動轉(zhuǎn)換為全小寫 (因為 HTML 是大小寫不敏感的)，所以 v-on:myEvent 將會變成 v-on:myevent揉稚，導(dǎo)致 myEvent 不可能被監(jiān)聽到秒啦。因此，推薦使用 kebab-case （短橫線分隔命名）的事件名搀玖。
• .sync 修飾符
  帶有 .sync 修飾符的 v-bind 不能和表達(dá)式或?qū)ο笞置媪恳黄鹗褂糜嗑常蝗皇菬o效的。

插槽（v-slot指令）

• 如果組件內(nèi)沒有包含一個 <slot> 元素灌诅，則該組件起始標(biāo)簽和結(jié)束標(biāo)簽之間的任何內(nèi)容都會被拋棄芳来。
• v-slot 縮寫， # 猜拾，和其它指令一樣即舌，該縮寫只在其有參數(shù)的時候才可用。

  <template #header>
    <h1>Here might be a page title</h1>
  </template>

• 編譯作用域
  父級模板里的所有內(nèi)容都是在父級作用域中編譯的挎袜；子模板里的所有內(nèi)容都是在子作用域中編譯的顽聂。

過渡、動畫

對于這些在過渡中切換的類名來說盯仪，如果你使用一個沒有名字的 <transition>紊搪，則 v- 是這些類名的默認(rèn)前綴。如果你使用了 <transition name="my-transition">全景，那么 v-enter 會替換為 my-transition-enter耀石。

過渡的類名

在進(jìn)入/離開的過渡中，會有 6 個 class 切換蚪燕。

1. v-enter：定義進(jìn)入過渡的開始狀態(tài)娶牌。在元素被插入之前生效奔浅，在元素被插入之后的下一幀移除。
2. v-enter-active：定義進(jìn)入過渡生效時的狀態(tài)诗良。在整個進(jìn)入過渡的階段中應(yīng)用汹桦，在元素被插入之前生效，在過渡/動畫完成之后移除鉴裹。這個類可以被用來定義進(jìn)入過渡的過程時間舞骆，延遲和曲線函數(shù)。
3. v-enter-to: 2.1.8版及以上 定義進(jìn)入過渡的結(jié)束狀態(tài)径荔。在元素被插入之后下一幀生效 (與此同時 v-enter 被移除)督禽，在過渡/動畫完成之后移除。
4. v-leave: 定義離開過渡的開始狀態(tài)总处。在離開過渡被觸發(fā)時立刻生效狈惫，下一幀被移除。
5. v-leave-active：定義離開過渡生效時的狀態(tài)鹦马。在整個離開過渡的階段中應(yīng)用胧谈，在離開過渡被觸發(fā)時立刻生效，在過渡/動畫完成之后移除荸频。這個類可以被用來定義離開過渡的過程時間菱肖，延遲和曲線函數(shù)。
6. v-leave-to: 2.1.8版及以上 定義離開過渡的結(jié)束狀態(tài)旭从。在離開過渡被觸發(fā)之后下一幀生效 (與此同時 v-leave 被刪除)稳强，在過渡/動畫完成之后移除。

動畫

CSS 動畫用法和 CSS 過渡相同和悦，區(qū)別是在動畫中 v-enter 類名在節(jié)點插入 DOM 后不會立即刪除退疫，而是在 animationend 事件觸發(fā)時刪除。
過渡模式

• in-out：新元素先進(jìn)行過渡摹闽，完成之后當(dāng)前元素過渡離開蹄咖。
• out-in：當(dāng)前元素先進(jìn)行過渡褐健，完成之后新元素過渡進(jìn)入付鹿。

可復(fù)用性

混入

• 混入 (mixin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能蚜迅。一個混入對象可以包含任意組件選項舵匾。當(dāng)組件使用混入對象時，所有混入對象的選項將被“混合”進(jìn)入該組件本身的選項谁不。
• 當(dāng)組件和混入對象含有同名選項時坐梯，這些選項將以恰當(dāng)?shù)姆绞竭M(jìn)行“合并”。
  • 據(jù)對象在內(nèi)部會進(jìn)行遞歸合并刹帕，并在發(fā)生沖突時以組件數(shù)據(jù)優(yōu)先吵血。
  • 同名鉤子函數(shù)將合并為一個數(shù)組谎替，因此都將被調(diào)用，混入對象的鉤子將在組件鉤子之前被調(diào)用蹋辅。
  • 兩個對象鍵名（方法）沖突時钱贯，取組件對象的鍵值對（方法）。
• 混入也可以進(jìn)行全局注冊侦另。一旦使用全局混入秩命，它將影響每一個之后創(chuàng)建的 Vue 實例。

// mixin.js  抽取公共部分
export const myMixin = {
    created: function() {
        this.hello()
    },
    fetchApi(){
    //內(nèi)容
    },
    methods: {
        hello: function() {
            console.log('hello from mixin!')
            this.fetchApi()
        }
    }
}
// ProductInfo.vue 需要引用 mixin 的組件
import {mymixin} from './mixin'  //引入mixin文件
export default {
    name: 'ProductInfo',
    mixins:[mymixin],  //可以把多個混入放到數(shù)組中
    components: {
       //組件
    },

自定義指令

// 注冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
  // 當(dāng)被綁定的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

//注冊局部指令褒傅，組件中也接受一個 directives 的選項
directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

鉤子函數(shù)

一個指令定義對象可以提供如下幾個鉤子函數(shù) (均為可選)：

• bind：只調(diào)用一次弃锐，指令第一次綁定到元素時調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置殿托。
• inserted：被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在霹菊，但不一定已被插入文檔中)。
• update：所在組件的 VNode 更新時調(diào)用支竹，但是可能發(fā)生在其子 VNode 更新之前浇辜。指令的值可能發(fā)生了改變，也可能沒有唾戚。但是可以通過比較更新前后的值來忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見下)柳洋。
• componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
• unbind：只調(diào)用一次叹坦，指令與元素解綁時調(diào)用熊镣。

指令鉤子函數(shù)會被傳入以下參數(shù)（ 指令的參數(shù)可以是動態(tài)的）：

• el：指令所綁定的元素，可以用來直接操作 DOM 募书。
• binding：一個對象绪囱，包含以下屬性：
  • name：指令名，不包括 v- 前綴莹捡。
  • value：指令的綁定值鬼吵。
  • oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用篮赢。無論值是否改變都可用齿椅。
  • expression：字符串形式的指令表達(dá)式。
  • arg：傳給指令的參數(shù)启泣，可選涣脚。
  • modifiers：一個包含修飾符的對象。
• vnode：Vue 編譯生成的虛擬節(jié)點寥茫。
• oldVnode：上一個虛擬節(jié)點遣蚀，僅在 update 和 componentUpdated 鉤子中可用。

渲染函數(shù)

節(jié)點、樹以及虛擬 DOM

• 當(dāng)瀏覽器讀到HTML代碼時芭梯，它會建立一個相對應(yīng)的“DOM 節(jié)點”樹來保持追蹤所有內(nèi)容险耀。
• 每個元素都是一個節(jié)點。每段文字也是一個節(jié)點玖喘。甚至注釋也都是節(jié)點胰耗。一個節(jié)點就是頁面的一個部分。就像家譜樹一樣芒涡，每個節(jié)點都可以有孩子節(jié)點 (也就是說每個部分可以包含其它的一些部分)柴灯。
• Vue 通過建立一個虛擬 DOM 來追蹤自己要如何改變真實 DOM。