訪問元素 & 組件

訪問根實(shí)例 $root

訪問父實(shí)例 $parent

訪問子組件實(shí)例或子元素 (ref 和 $refs)

• 當(dāng) ref 和 v-for 一起使用時(shí)，可得到一個(gè)包含了對(duì)應(yīng)數(shù)據(jù)源的這些子組件的數(shù)組(不論ref是否相同)。
• 在其他情況下可柿，ref總是只返回一個(gè)dom元素降宅，即使有多個(gè)同ref元素驹尼。
• 另外: $refs 只會(huì)在組件渲染完成之后生效衡未，并且它們不是響應(yīng)式的氓轰。

<base-input ref="usernameInput"></base-input>
this.$refs.usernameInput.age = 18;
...
<input ref="input">
this.$refs.input.focus()

依賴注入

通過provide 指定提供給后代組件的數(shù)據(jù)/方法婚夫，并在后代組件中通過inject獲取

provide: function () {
  return {
    getMap: this.getMap
  }
}
...
inject: ['getMap']

偵聽事件

$emit 除了可以被 v-on 偵聽，還可以

• 通過 $on(eventName, eventHandler) 偵聽一個(gè)事件
• 通過 $once(eventName, eventHandler) 一次性偵聽一個(gè)事件
• 通過 $off(eventName, eventHandler) 停止偵聽一個(gè)事件

循環(huán)引用

自身循環(huán)引用

為了防止無限遞歸署鸡，需確保遞歸調(diào)用是條件性的 (例如使用一個(gè)最終會(huì)得到 false 的 v-if)案糙。

互相循環(huán)引用

當(dāng)使用模塊系統(tǒng)依賴/導(dǎo)入組件時(shí)，會(huì)出現(xiàn)報(bào)錯(cuò)

Failed to mount component: template or render function not defined.
應(yīng)等到生命周期鉤子 beforeCreate 時(shí)再注冊(cè)它储玫，或者在本地注冊(cè)組件的時(shí)候侍筛，使用 webpack 的異步 import：

beforeCreate: function () {
  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}
//或者
components: {
  TreeFolderContents: () => import('./tree-folder-contents.vue')
}

其他模板定義方式

內(nèi)聯(lián)模板inline-template

當(dāng) inline-template 特性出現(xiàn)在子組件上時(shí)，這個(gè)組件會(huì)使用其里內(nèi)容作為模板撒穷，而非留給插槽。此時(shí)該實(shí)例的template屬性配置會(huì)失效裆熙。

<my-component inline-template>
  <div>
    I am template
  </div>
</my-component>

X-Template

在一個(gè) <script> 元素中帶上 text/x-template 的類型端礼，然后通過一個(gè) id 將模板引用過去。

<script type="text/x-template" id="hello-world-template">
  <p>Hello hello hello</p>
</script>
...
Vue.component('hello-world', {
  template: '#hello-world-template'
})

控制更新

強(qiáng)制更新

如果你發(fā)現(xiàn)你自己需要在 Vue 中做一次強(qiáng)制更新入录，99.9% 的情況蛤奥，是你在某個(gè)地方做錯(cuò)了事。
此時(shí)如果依然需要強(qiáng)制更新僚稿，可使用$forceUpdate

混入

混入 (mixin) 用于分發(fā) Vue 組件中的可復(fù)用功能凡桥。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)蚀同，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)缅刽。

• 基礎(chǔ)數(shù)據(jù)類型、數(shù)組蠢络、方法 : 以組件為準(zhǔn)
• 對(duì)象 : 合并為同一個(gè)對(duì)象衰猛，如鍵名重復(fù)則以組件數(shù)據(jù)為準(zhǔn)
• 鉤子函數(shù)(生命周期) : 都會(huì)被調(diào)用，且混入對(duì)象的鉤子將在組件自身鉤子之前調(diào)用刹孔。

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

全局混入

全局混入將會(huì)影響之后每一個(gè)創(chuàng)建的Vue實(shí)例啡省，因此通常只用于為自定義選項(xiàng)注入處理邏輯。

// 為自定義的選項(xiàng) 'myOption' 注入一個(gè)處理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"

自定義合并策略

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
  // 返回合并后的值
}

自定義指令

注冊(cè)指令

• 全局指令

// 注冊(cè)一個(gè)全局自定義指令 `v-focus`
Vue.directive('focus', {
  // 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
//如想在 bind 和 update 時(shí)觸發(fā)相同行為卦睹，而不關(guān)心其它的鉤子畦戒，可簡(jiǎn)寫為:
Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

• 局部指令

directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

鉤子函數(shù)

• bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用结序。在這里可以進(jìn)行一次性的初始化設(shè)置兢交。
• inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)笼痹。
• update：所在組件的 VNode 更新時(shí)調(diào)用配喳，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變凳干，也可能沒有晴裹。可以通過比較更新前后的值來忽略不必要的模板更新
• componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用救赐。
• unbind：只調(diào)用一次涧团，指令與元素解綁時(shí)調(diào)用。

鉤子函數(shù)參數(shù)

• el：指令所綁定的元素经磅，可以用來直接操作 DOM 泌绣。
• binding：一個(gè)對(duì)象，包含以下屬性：
  • name：指令名预厌，不包括 v- 前綴阿迈。
  • value：指令的綁定值，例如：v-my-directive="1 + 1" 中轧叽，綁定值為 2苗沧。
  • oldValue：指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用炭晒。無論值是否改變都可用待逞。
  • expression：字符串形式的指令表達(dá)式。例如 v-my-directive="1 + 1" 中网严，表達(dá)式為 "1 + 1"识樱。
  • arg：傳給指令的參數(shù)，可選震束。例如 v-my-directive:foo 中怜庸，參數(shù)為 "foo"。
  • modifiers：一個(gè)包含修飾符的對(duì)象驴一。例如：v-my-directive.foo.bar 中休雌，修飾符對(duì)象為 { foo: true, bar: true }。
• vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)肝断。移步 VNode API 來了解更多詳情杈曲。
• oldVnode：上一個(gè)虛擬節(jié)點(diǎn)驰凛，僅在 update 和 componentUpdated 鉤子中可用。

注 : 除了 el 之外担扑，其它參數(shù)都應(yīng)該是只讀的恰响，切勿進(jìn)行修改。如果需要在鉤子之間共享數(shù)據(jù)涌献，建議通過元素的 dataset 來進(jìn)行胚宦。

插件

在調(diào)用 new Vue() 啟動(dòng)應(yīng)用之前，通過全局方法 Vue.use() 使用插件燕垃。

var Vue = require('vue')
var VueRouter = require('vue-router')

Vue.use(VueRouter)

過濾器

過濾器可應(yīng)用在雙花括號(hào)插值和 v-bind 表達(dá)式 中

<!-- 在雙花括號(hào)中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

注冊(cè)過濾器

• 全局注冊(cè)
  需在創(chuàng)建 Vue 實(shí)例之前全局定義

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

• 局部注冊(cè)
  當(dāng)全局過濾器和局部過濾器重名時(shí)枢劝，會(huì)采用局部過濾器。

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}