vue實例

var vm = new Vue({
  // 選項
})

數(shù)據(jù)與方法

當(dāng)實例被創(chuàng)建時蒿秦，data對象中所有屬性都加入到vue響應(yīng)式系統(tǒng)中戴尸，當(dāng)屬性的值發(fā)生改變時颜凯，視圖會更新為新的值。

只有實例被創(chuàng)建時就存在data中的屬性才是響應(yīng)式的枯途，因此需要使用的值最好都先初始化

var vm = new Vue({
  data: {
    newTodoText: '',
    visitCount: 0,
    hideCompletedTodos: false,
    todos: [],
    error: null
  }
})

實例屬性

• vm.$data
  Vue 實例觀察的數(shù)據(jù)對象
• vm.$props
  當(dāng)前組件接收到的 props 對象
• vm.$el
  根 DOM 元素
• vm.$options

實例方法/數(shù)據(jù)

• vm.$watch(expOrFn,callback,[options])
  觀察 Vue 實例變化的一個表達(dá)式或計算屬性函數(shù)教寂。回調(diào)函數(shù)得到的參數(shù)為新值和舊值憔足。表達(dá)式只接受監(jiān)督的鍵路徑胁附。對于更復(fù)雜的表達(dá)式，用一個函數(shù)取代滓彰。

// 鍵路徑
vm.$watch('a.b.c', function (newVal, oldVal) {
  // 做點什么
})

// 函數(shù)
vm.$watch(
  function () {
    // 表達(dá)式 `this.a + this.b` 每次得出一個不同的結(jié)果時
    // 處理函數(shù)都會被調(diào)用控妻。
    // 這就像監(jiān)聽一個未被定義的計算屬性
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // 做點什么
  }
)

• vm.$set(target,propertyName/index,value)
• vm.$delete(target,propertyName/index)

實例方法/事件

• vm.$on(event,callback)
  監(jiān)聽當(dāng)前實例上的自定義事件。事件可以由vm.$emit觸發(fā)揭绑」颍回調(diào)函數(shù)會接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)。

vm.$on('test', function (msg) {
  console.log(msg)
})
vm.$emit('test', 'hi')
// => "hi"

• vm.$once(event,callback)
  監(jiān)聽一個自定義事件他匪，但是只觸發(fā)一次菇存，在第一次觸發(fā)之后移除監(jiān)聽器。
• vm.$off([event,callback])
  移除自定義事件監(jiān)聽器
• vm.$emit(eventName,[...args])
  觸發(fā)當(dāng)前實例上的事件邦蜜。附加參數(shù)都會傳給監(jiān)聽器回調(diào)

實例方法/生命周期

• vm.$mount([elementOrSelector])
  如果 Vue 實例在實例化時沒有收到 el 選項依鸥，則它處于“未掛載”狀態(tài)，沒有關(guān)聯(lián)的 DOM 元素悼沈〖伲可以使用 vm.$mount() 手動地掛載一個未掛載的實例。

如果沒有提供 elementOrSelector 參數(shù)井辆，模板將被渲染為文檔之外的的元素关筒，并且你必須使用原生 DOM API 把它插入文檔中。

這個方法返回實例自身杯缺，因而可以鏈?zhǔn)秸{(diào)用其它實例方法蒸播。

生命周期

• vm.$forceUpdate()
  迫使Vue實例重新渲染。注意它僅僅影響實例本身和插入插槽內(nèi)容的子組件萍肆，而不是所有子組件袍榆。
• vm.$nextTick([callback])
  將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它塘揣，然后等待 DOM 更新包雀。它跟全局方法 Vue.nextTick 一樣，不同的是回調(diào)的 this 自動綁定到調(diào)用它的實例上亲铡。
• vm.$destroy()
  銷毀一個實例才写，清理它與其它實例的連接葡兑，解綁它的全部指令及事件監(jiān)聽器。
  觸發(fā)beforeDestroy 和 destroyed 的鉤子赞草。

指令

• v-text
  更新元素的textContent如果需要更新部分的textContent讹堤，需要使用{{ Mustache }}插值。

• v-html
  更新元素的innerHTML

• v-show
  根據(jù)表達(dá)式的真假值厨疙，切換元素的display CSS屬性

• v-if
  根據(jù)表達(dá)式的值的真假條件渲染元素洲守。在切換時元素及它的數(shù)據(jù)綁定/組件被銷毀并重建。如果元素是<template沾凄，將提出它的內(nèi)容作為條件塊

  v-if和v-for一起使用時梗醇，v-for的優(yōu)先級更高

• v-else
  為 v-if 或者 v-else-if 添加“else 塊”。

• v-else-if
  表示 v-if 的 “else if 塊”撒蟀⌒鸾鳎可以鏈?zhǔn)秸{(diào)用。

• v-for
  基于源數(shù)據(jù)多次渲染元素或模板塊牙肝。此指令的值唉俗，必須使用特定語法alias in expression嗤朴，為當(dāng)前遍歷的元素提供別名配椭。

<div v-for="item in items">
  {{ item.text }}
</div>

v-for 默認(rèn)行為試著不改變整體，而是替換元素雹姊。迫使其重新排序的元素股缸，你需要提供一個 key 的特殊屬性

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

• v-on
  縮寫：@。

  綁定事件監(jiān)聽器吱雏。事件類型由參數(shù)指定敦姻。表達(dá)式可以是一個方法的名字或一個內(nèi)聯(lián)語句，如果沒有修飾符也可以省略歧杏。

  用在普通元素上時镰惦，只能監(jiān)聽原生 DOM 事件。用在自定義元素組件上時犬绒，也可以監(jiān)聽子組件觸發(fā)的自定義事件旺入。

  在監(jiān)聽原生 DOM 事件時，方法以事件為唯一的參數(shù)凯力。如果使用內(nèi)聯(lián)語句茵瘾，語句可以訪問一個 $event 屬性：v-on:click="handle('ok', $event)"。

  從 2.4.0 開始咐鹤，v-on 同樣支持不帶參數(shù)綁定一個事件/監(jiān)聽器鍵值對的對象拗秘。注意當(dāng)使用對象語法時，是不支持任何修飾器的祈惶。

<!-- 方法處理器 -->
<button v-on:click="doThis"></button>

<!-- 動態(tài)事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 內(nèi)聯(lián)語句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 縮寫 -->
<button @click="doThis"></button>

<!-- 動態(tài)事件縮寫 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默認(rèn)行為 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默認(rèn)行為雕旨，沒有表達(dá)式 -->
<form @submit.prevent></form>

<!--  串聯(lián)修飾符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 鍵修飾符扮匠，鍵別名 -->
<input @keyup.enter="onEnter">

<!-- 鍵修飾符，鍵代碼 -->
<input @keyup.13="onEnter">

<!-- 點擊回調(diào)只會觸發(fā)一次 -->
<button v-on:click.once="doThis"></button>

<!-- 對象語法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

• v-bind
  縮寫:凡涩。
  動態(tài)的綁定一個或多個特性餐禁，或一個組件prop到表達(dá)式。

  在綁定 class 或 style 特性時突照，支持其它類型的值帮非，如數(shù)組或?qū)ο蟆讹蘑？梢酝ㄟ^下面的教程鏈接查看詳情末盔。

  在綁定 prop 時，prop 必須在子組件中聲明座慰≡刹眨可以用修飾符指定不同的綁定類型。

  沒有參數(shù)時版仔，可以綁定到一個包含鍵值對的對象游盲。注意此時 class 和 style 綁定不支持?jǐn)?shù)組和對象。

• v-model
  在表單控件或者組件上創(chuàng)建雙向綁定蛮粮。限制在<input>
<select> <textarea>

• v-slot
  限用于template益缎、組件。提供具名插槽或需要接受prop的插槽然想。

• v-pre
  跳過這個元素和它的子元素的編譯過程莺奔。可以用來顯示原始 Mustache 標(biāo)簽变泄。跳過大量沒有指令的節(jié)點會加快編譯令哟。

• v-cloak
  這個指令保持在元素上直到關(guān)聯(lián)實例結(jié)束編譯。和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時妨蛹，這個指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實例準(zhǔn)備完畢屏富。

• v-once
  只渲染元素和組件一次。隨后的重新渲染蛙卤，元素/組件及其所有的子節(jié)點將被視為靜態(tài)內(nèi)容并跳過狠半。這可以用于優(yōu)化更新性能。