vue2.0對API的一些理解
Vue API
全域性配置（Vue.config）
Vue.config是一個與全域性配置有關的物件，可以在啟動應用之前修改下列屬性。
1.silent
型別： Boolean
取消Vue所有的日誌和警告 Vue.config.silent = false
2.optionMergeStrategies
型別：Function
自定義合併策略的選項。
合併策略選項分別接受第一個引數作為父例項，第二個引數為子例項，Vue例項上下文被作為第三個引數傳入。
Vue.config.optionMergeStrategies._my_option = function(parent, child, vm) - 1
- 2
- 3
- 4
- 5
- 6
關於自定義選項的混合策略：
基礎
混合是一種靈活的分散式複用Vue元件的方式。混合物件可以包含任意元件選項(比如data，created，methods等等)。以元件使用混合物件時，所有混合物件的選項將被混入該元件本身的選項。
例子：
// 定義一個混合物件
var myMixin = {
created: function() {
this.hello()
},
methods: {
hello: function - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
選項合併
當元件和混合物件含有同名選項時，這些選項將以恰當的方式混合。比如，同名鉤子函式將混合為一個數組，因此都將被呼叫。另外，混合物件的鉤子將在元件自身鉤子之前呼叫：
var mixin = {
created: function - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
值為物件的選項，例如methods，components和directives，將被混合為同一物件。兩個物件鍵名衝突時，取元件物件的鍵值對。
var mixin = {
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
全域性混合
也可以全域性混合物件。但是，一旦使用全域性混合物件，將會影響到所有之後建立的Vue例項。使用恰當時，可以為自定義物件注入處理邏輯。
// 為自定義的選項 'myOption' 注入一個處理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// -> "hello!"- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
自定義選項混合策略
自定義選項將使用預設策略，即簡單地覆蓋已有值。如果想染自定義選項以自定義邏輯混合，可以向Vue.config.optionMergeStrategies 新增一個函式：
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// return mergedVal
}- 1
- 2
- 3
devtools
型別：Boolean
配置是否允許vue-devtools檢查程式碼，開發版本預設為true，生產版本則是false
// 務必在載入 Vue 之後，立即同步設定以下內容
Vue.config.devtools = true- 1
- 2
errorHandler
型別：Function
指定元件的渲染和觀察期間未捕獲錯誤的處理函式。這個處理函式被呼叫時，可獲取錯誤資訊和Vue例項。
Vue.config.errorHandler = function (err, vm) {
// handle error
}- 1
- 2
- 3
ignoredElements
型別： Array
須使Vue忽略在Vue之外的自定義元素，否則，它會假設你忘記註冊全域性元件或者拼錯了元件名稱，從而丟擲一個關於Unknown custom element的警告。
Vue.config.ignoredElements = [
'my-custom-web-component', 'another-web-component'
]- 1
- 2
- 3
keyCodes
型別： { [key: string]: number | Array }
給 v-on自定義鍵位別名。
Vue.config.keyCodes = {
v: 86,
f1: 112,
mediaPlayPause: 179,
up: [38, 87]
}- 1
- 2
- 3
- 4
- 5
- 6
全域性API
Vue.extend(options)
使用基礎Vue構造器，建立一個子類。引數是一個包含了元件選項的物件。
data選項時特例，需要注意，在Vue.extend()中它必須是函式
<div id="mount-point"></div>
// 建立構造器
var Profile = Vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 建立 Profile 例項，並掛載到一個元素上。
new Profile().$mount('#mount-point')- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
Vue.nextTick（[callback, context]）
在下次DOM更新迴圈結束之後執行延遲迴調。在修改資料之後立即使用這個方法，獲取更新後的DOM。
// 修改資料
vm.msg = 'Hello'
// DOM 還沒有更新
Vue.nextTick(function () {
// DOM 更新了
})- 1
- 2
- 3
- 4
- 5
- 6
Vue.set(object, key，value)
設定物件的屬性。如果物件是響應式的，確保屬性被建立後也是響應式的，同時觸發檢視更新。這個方法用於避開Vue不能檢測屬性被新增的限制。
Vue.delete(object, key)
刪除物件的屬性
Vue.directive(id, [definition])
註冊或獲取全域性指令。
// 註冊
Vue.directive('my-directive', {
bind: function () {},
inserted: function () {},
update: function () {},
componentUpdated: function () {},
unbind: function () {}
})
// 註冊（傳入一個簡單的指令函式）
Vue.directive('my-directive', function () {
// 這裡將會被 `bind` 和 `update` 呼叫
})
// getter，返回已註冊的指令
var myDirective = Vue.directive('my-directive')- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
Vue.filter（id,[definition]）
註冊或獲取全域性過濾器
// 註冊
Vue.filter('my-filter', function(value) {
// 返回處理後的值
})
// getter，返回已註冊的過濾器
var myFilter = Vue.filter('my-filter')- 1
- 2
- 3
- 4
- 5
- 6
- 7
Vue.component(id,[definition])
註冊或獲取全域性元件。註冊還會自動使用給定的id設定元件的名稱。
// 註冊元件，傳入一個擴充套件過的構造器
Vue.component('my-component', Vue.extend({/*..*/}))
// 註冊元件，傳入一個選項物件（自動呼叫Vue.extend）
Vue.component('my-component', {/*..*/})
// 獲取註冊的元件（始終返回構造器）
var MyComponent = Vue.component('my-component')- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
Vue.use(plugin)
安裝Vue.js外掛。如果外掛是一個物件，必須提供install方法。如果外掛是一個函式，它會被作為install方法。
當 install方法被同一外掛多次呼叫，外掛將只會被安裝一次。
Vue.mixin(mixin)
全域性註冊一個混合，影響註冊之後所有建立的每個Vue例項
Vue.compile(template)
在render函式中編譯模板字串。只在獨立構建時有效
var res = Vue.compile('<div><span>{{ msg }}</span></div>')
new Vue({
data: {
msg: 'hello'
},
render: res.render,
staticRenderFns: res.staticRenderFns
})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
選項/資料
data
該使用的響應資料最好一開始就宣告。
以_或$開頭的屬性不會被Vue例項代理，比如vm._a就不行，必須用
vm.$data._a。
var data = { a: 1 }
// 直接建立一個例項
var vm = new Vue({
data: data
})
vm.a // -> 1
vm.$data === data // -> true
// Vue.extend() 中 data 必須是函式
var Component = Vue.extend({
data: function () {
return { a: 1 }
}
})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
注意，不能對data屬性使用箭頭函式
props
props可以是陣列或物件，用於接收來自父元件的資料。props可以是簡單的陣列，或者使用物件作為替代，物件允許配置高階選項，如型別檢測、自定義檢驗或設定預設值。
// 簡單語法
Vue.component('props-demo-simple', {
props: ['size', 'myMessage']
})
// 物件語法，提供校驗
Vue.component('props-demo-advanced', {
props: {
// 只檢測型別
height: Number,
// 檢測型別 + 其他驗證
age: {
type: Number,
default: 0,
required: true,
validator: function (value) {
return value >= 0
}
}
}
})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
computed
var vm = new Vue({
data: { a: 1 },
computed: {
// 僅讀取，值只須為函式
aDouble: function () {
return this.a * 2
},
// 讀取和設定
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
})
vm.aPlus // -> 2
vm.aPlus = 3
vm.a // -> 2
vm.aDouble // -> 4- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
methods
var vm = new Vue({
data: { a: 1 },
methods: {
plus: function () {
this.a++
}
}
})
vm.plus()
vm.a // 2- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
watch
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3
},
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 方法名
b: 'someMethod',
// 深度 watcher
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
}
}
})
vm.a = 2 // -> new: 2, old: 1- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
選項/DOM
el
提供一個在頁面上已存在的 DOM 元素作為 Vue 例項的掛載目標。可以是 CSS 選擇器，也可以是一個 HTMLElement 例項。
在例項掛載之後， 元素可以用 vm.$el 訪問。
template
一個字串模板作為 Vue 例項的標識使用。模板將會 替換 掛載的元素。掛載元素的內容都將被忽略，除非模板的內容有分發 slot。
如果值以 # 開始，則它用作選項符，將使用匹配元素的 innerHTML 作為模板。常用的技巧是用
render
字串模板的代替方案，允許你發揮 JavaScript 最大的程式設計能力。render 函式接收一個 createElement 方法作為第一個引數用來建立 VNode。
選項/生命週期鉤子
選項/資源
directives
filters
components
選項/雜項
parent
型別： Vue instance
指定已建立的例項之父例項，在兩者之間建立父子關係。子例項可以用this.$parent訪問父例項，而子例項被推入父例項的$children陣列中。
同時使用$parent和$children有衝突，他們作為同一個入口。
更推薦使用props和events實現父子元件通訊。
mixins
extends
允許宣告擴充套件另一個元件，元件自身的選項會比要擴充套件的源元件具有更高的優先順序。
var CompA = { ... }
// 在沒有呼叫 Vue.extend 時候繼承 CompA
var CompB = {
extends: CompA,
...
}- 1
- 2
- 3
- 4
- 5
- 6
例項屬性
vm.$data
vm.$el
vm.$options
用於當前Vue例項的初始化選項。需要在選項中包含自定義屬性時會有用處。
vm.$parent
vm.$root
vm.$children
vm.$slots
vm.$refs
vm.$isServer
例項方法/資料
vm.$watch
vm.$set
vm.$delete
例項方法/事件
vm.$on(event, callback)
引數：
{string} event
{Function} callback
監聽當前例項上的自定義事件。事件可以由vm.$emit觸發。回撥函式會接收所有傳入事件觸發函式的額外引數。
vm.$on('test', function (msg) {
console.log(msg)
})
vm.$emit('test', 'hi')
// -> "hi"- 1
- 2
- 3
- 4
- 5
vm.$once(event, callback)
監聽一個自定義事件，只觸發一次，觸發後移除監聽器
vm.$off([event, callback])
引數：
event：string
callback：function
用法：
如果沒有提供引數，則移除所有的事件監聽器；
如果只提供了事件，則移除該事件的所有監聽器；
如果同時提供了兩個引數，則只移除這個回撥的監聽器。
vm.$emit(event, […args])
觸發當前例項上的某事件，並傳引數給監聽器回撥
例項方法/生命週期
vm.$mount
如果 Vue 例項在例項化時沒有收到 el 選項，則它處於“未掛載”狀態，沒有關聯的 DOM 元素。可以使用 vm.$mount() 手動地掛載一個未掛載的例項。
如果沒有提供 elementOrSelector 引數，模板將被渲染為文件之外的的元素，並且你必須使用原生DOM API把它插入文件中。
這個方法返回例項自身，因而可以鏈式呼叫其它例項方法。
var MyComponent = Vue.extend({
template: '<div>Hello!</div>'
})
// 建立並掛載到 #app (會替換 #app)
new MyComponent().$mount('#app')
// 同上
new MyComponent({ el: '#app' })
// 或者，在文件之外渲染並且隨後掛載
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
vm.$forceUpdate
迫使Vue例項重新渲染。注意它僅僅影響例項本身和插入插槽內容的子元件，而不是所有子元件。
vm.$nextTick
將回調延遲到下次 DOM 更新迴圈之後執行。在修改資料之後立即使用它，然後等待 DOM 更新。它跟全域性方法 Vue.nextTick 一樣，不同的是回撥的 this 自動繫結到呼叫它的例項上。
vm.$destroy
完全銷燬一個例項。清理它與其它例項的連線，解綁它的全部指令及事件監聽器。
指令
v-text
更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。
<span v-text="msg"></span>
<!-- 和下面的一樣 -->
<span>{{msg}}</span>- 1
- 2
- 3
v-show
根據表示式之真假值，切換元素的 display CSS 屬性。
當條件變化時該指令觸發過渡效果。
v-if
根據表示式的值的真假條件渲染元素。在切換時元素及它的資料繫結 / 元件被銷燬並重建。如果元素是<template> ，將提出它的內容作為條件塊。
當條件變化時該指令觸發過渡效果。
v-else
不需要表示式
限制： 前一兄弟元素必須有 v-if 或 v-else-if。
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>- 1
- 2
- 3
- 4
- 5
- 6
v-else-if
型別: any
限制: 前一兄弟元素必須有 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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
v-for
型別： Array | Object | number | string
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>- 1
- 2
- 3
v-for 預設行為試著不改變整體，而是替換元素。迫使其重新排序的元素,您需要提供一個 key 的特殊屬性:
<