Vue例項詳解
Vue例項初始化的選項配置物件詳解
前面我們已經用了很多次 new Vue({…})的程式碼,而且Vue初始化的選項都已經用了data、methods、el、computedd等,估計您看到這裡時,應該已經都明白了他們的作用,我們就詳細講解一下他們的使用情況。更詳細的請參考官網內容
Vue例項的的data物件
介紹
Vue的例項的資料物件data 我們已經用了很多了,資料繫結離不開data裡面的資料。也是Vue的核心屬性。
它是Vue繫結資料到HTML標籤的資料來源泉,另外Vue框架會自動監視data裡面的資料變化,自動更新資料到HTML標籤上去。本質原理是:Vue會自動將data裡面的資料進行遞迴抓換成getter和setter,然後就可以自動更新HTML標籤了,當然用getter和setter所以老的瀏覽器Vue支援的不夠好。data物件的型別:
1) 型別是Object或者Function。
2) 如果是元件物件中,data必須是Function型別。【後面學了元件後就明白了,暫時對元件先放放。】
- 例項:
// 建立普通的Vue例項
var vm = new Vue({
data: data
})
// 元件定義【後面會詳細講的】
// Vue.extend() 中 data 必須是函式
var Component = Vue.extend({
data: function () { //這裡必須是函式!!!!
return { a: 1 }
}
})
Vue例項的computed
介紹
Vue的計算屬性(computed)的屬性會自動混入Vue的例項中。所有 getter 和 setter 的 this 上下文自動地繫結為 Vue 例項。這就很強大了,再計算屬性中定義的函式裡面可以直接使用指向了vue例項的this,異常方便的啊。型別
{ 鍵:函式}
{ [key: string]: Function | { get: Function, set: Function
} }
當然,可以省略setter,如果省略了setter,那麼值就可以是普通函式,但是必須有返回值。
- 官方的例項
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
methods
- 型別 :
{ [key: string]: Function }
- 詳細:
methods 將被混入到 Vue 例項中。可以直接通過 VM 例項訪問這些方法,或者在指令表示式中使用。方法中的 this 自動繫結為 Vue 例項。
注意,不應該使用箭頭函式來定義 method 函式 (例如 plus: () => this.a++)。理由是箭頭函式綁定了父級作用域的上下文,所以 this 將不會按照期望指向 Vue 例項,this.a 將是 undefined。
- 示例:
var vm = new Vue({
data: { a: 1 },
methods: {
plus: function () {
this.a++
}
}
})
vm.plus()
vm.a // 2
watch
- 型別
{ [key: string]: string | Function | Object }
詳細:
一個物件,鍵是需要觀察的表示式,值是對應回撥函式。值也可以是方法名,或者包含選項的物件。Vue 例項將會在例項化時呼叫 $watch(),遍歷 watch 物件的每一個屬性。示例:
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3
},
watch: {
// 監控a變數變化的時候,自動執行此函式
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 深度 watcher
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
}
}
})
vm.a = 2 // -> new: 2, old: 1
//注意,不應該使用箭頭函式來定義 watcher 函式 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭頭函式綁定了父級作用域的上下文,所以 this 將不會按照期望指向 Vue 例項,this.updateAutocomplete 將是 undefined。
參考綜合案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之資料監控</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ number }}</p>
<input type="button" name="btnGetNumber" value="增加" v-on:click="getNumber()">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
number: 1
},
methods: {
// 事件響應方法的邏輯程式碼
getNumber: function (e) {
this.number += 1; // 不管是內聯方法呼叫,還是繫結事件處理器兩種方式執行事件響應方法的時候 this都是指向 app
}
},
watch: {
// 監控number的變化,並自動執行下面的函式
number: function (val, oldVal) {
console.log('val:' + val + ' - oldVal: ' + oldVal);
}
}
});
</script>
</body>
</html>
設定el的詳解
- 型別
string | HTMLElement
限制: 只在由 new 建立的例項中遵守。
- 詳細:
提供一個在頁面上已存在的 DOM 元素作為 Vue 例項的掛載目標,也就是說Vue繫結資料到哪裡去找。可以是CSS選擇器,也可以是一個 HTMLElement例項。
在例項掛載之後(生命週期的內容後面會詳細講的奧), 元素可以用 vm.$el 訪問。
如果這個選項在例項化時有作用,例項將立即進入編譯過程,否則,需要顯式呼叫 vm.$mount() 手動開啟編譯。
// 幾乎所有例子都用到這個,所以就不再贅述
var app = new Vue({
el: '#app',
...
});
Vue例項的全域性配置
這一塊都是一些小的知識點,我就不贅述了,直接copy 官網
Vue.config 是一個物件,包含 Vue 的全域性配置。可以在啟動應用之前修改下列屬性:
silent
- 型別:
boolean
預設值: false
- 用法:
Vue.config.silent = true
//取消 Vue 所有的日誌與警告。
optionMergeStrategies
- 型別:
{ [key: string]: Function }
預設值: {}
- 用法:
Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {
return child + 1
}
const Profile = Vue.extend({
_my_option: 1
})
// Profile.options._my_option = 2
//自定義合併策略的選項。
//合併策略選項分別接受第一個引數作為父例項,第二個引數為子例項,Vue例項上下文被作為第三個引數傳入。
devtools
- 型別:
boolean
預設值: true (生產版為 false)
- 用法:
// 務必在載入 Vue 之後,立即同步設定以下內容
Vue.config.devtools = true
//配置是否允許 vue-devtools 檢查程式碼。開發版本預設為 true,生產版本預設為 false。生產版本設為 true 可以啟用檢查。
errorHandler
- 型別 :
Function
預設值: 預設丟擲錯誤
- 用法:
Vue.config.errorHandler = function (err, vm) {
// handle error
}
//指定元件的渲染和觀察期間未捕獲錯誤的處理函式。這個處理函式被呼叫時,可獲取錯誤資訊和 Vue 例項。
//Sentry, an error tracking service, provides official integration using this option.
ignoredElements
- 型別 :
Array<string>
預設值: []
- 用法:
Vue.config.ignoredElements = [
'my-custom-web-component', 'another-web-component'
]
須使 Vue 忽略在 Vue 之外的自定義元素 (e.g., 使用了 Web Components APIs)。否則,它會假設你忘記註冊全域性元件或者拼錯了元件名稱,從而丟擲一個關於 Unknown custom element 的警告。
keyCodes
- 型別:
{ [key: string]: number | Array<number> }
預設值: {}
- 用法:
Vue.config.keyCodes = {
v: 86,
f1: 112,
mediaPlayPause: 179,
up: [38, 87]
}
//給 v-on 自定義鍵位別名。
Vue的全域性API
Vue的全域性API提供大量的功能,我這裡就給大家羅列幾個常用的結果,其他的還是參考官網.
Vue.nextTick
- 語法:
Vue.nextTick( [callback, context] )
引數:
{Function} [callback]
{Object} [context]
- 用法:
在下次 DOM 更新迴圈結束之後執行延遲迴調。在修改資料之後立即使用這個方法,獲取更新後的 DOM。
// 修改資料
vm.msg = 'Hello'
// DOM 還沒有更新
Vue.nextTick(function () {
// DOM 更新了
})
Vue.set
- 語法:
Vue.set( object, key, value )
引數:
{Object} object
{string} key
{any} value
返回值: 設定的值.
- 用法:
設定物件的屬性。如果物件是響應式的,確保屬性被建立後也是響應式的,同時觸發檢視更新。這個方法主要用於避開 Vue 不能檢測屬性被新增的限制。
注意物件不能是 Vue 例項,或者 Vue 例項的根資料物件。
Vue.compile
- 語法:
Vue.compile( template )
引數:
{string} template
- 用法:
//在render函式中編譯模板字串。只在獨立構建時有效
var res = Vue.compile('<div><span>{{ msg }}</span></div>')
new Vue({
data: {
msg: 'hello'
},
render: res.render,
staticRenderFns: res.staticRenderFns
})
全域性API總結
其實還有幾個其他的全域性API,不打算在這裡講了,比如擴充套件元件Vue.extend 的用法、Vue.use載入外掛、Vue.filter載入過濾器、Vue.directive自定義指令等
後面再講其他Vue的知識點的時候,再加上這些,全域性API其實就是Vue型別的靜態方法,全域性範圍內都可以使用的,某些例項的方法本質也是呼叫了這些全域性的,後面用到時候再說。
Vue事件處理
監聽事件的Vue處理
Vue提供了協助我們為標籤繫結時間的方法,當然我們可以直接用dom原生的方式去繫結事件。Vue提供的指令進行繫結也是非常方便,而且能讓ViewModel更簡潔,邏輯更徹底。所以還是推薦大家使用的。
Vue提供了v-on指令幫助我們進行事件的繫結。
基本的內聯事件處理方法[官方demo]:
<div id="example-1">
<!-- 為按鈕繫結點選事件,執行counter += 1的任務。 -->
<button v-on:click="counter += 1">增加 1</button>
<p>這個按鈕被點選了 {{ counter }} 次。</p>
</div>
<script>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
</script>
事件處理方法整合到Vue物件
內聯的方式繫結的事件,只能處理簡單的事件的處理邏輯。複雜的情況還是封裝到js中最方便,也不容易出錯。
Vue物件中可以新增methods屬性,開發者可以把事件處理函式的邏輯放到methods中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之動態顯示錶格</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ number }}</p>
<input type="button" name="btnGetNumber" value="增加[繫結事件處理器]" v-on:click="getNumber">
<input type="button" name="btnGetNumber" value="增加[內聯方法呼叫]" v-on:click="getNumber()">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
number: 1
},
methods: {
// 事件響應方法的邏輯程式碼
getNumber: function (e) {
this.number += 1; // 不管是內聯方法呼叫,還是繫結事件處理器兩種方式執行事件響應方法的時候 this都是指向 app
}
}
});
</script>
</body>
</html>
事件修飾符
官網上寫的非常好,這塊就直接用管網的吧。在事件處理程式中呼叫 event.preventDefault()
或 event.stopPropagation()
是非常常見的需求。儘管我們可以在 methods 中輕鬆實現這點,但更好的方式是:methods 只有純粹的資料邏輯,而不是去處理 DOM 事件細節。
為了解決這個問題, Vue.js 為 v-on 提供了 事件修飾符。通過由點(.)表示的指令字尾來呼叫修飾符。
.stop
.prevent
.capture
.self
.once
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再過載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 新增事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身(而不是子元素)觸發時觸發回撥 -->
<div v-on:click.self="doThat">...</div>
<!-- the click event will be triggered at most once -->
<a v-on:click.once="doThis"></a>
按鍵修飾符
在監聽鍵盤事件時,我們經常需要監測常見的鍵值。 Vue 允許為 v-on 在監聽鍵盤事件時新增按鍵修飾符:
<!-- 只有在 keyCode 是 13 時呼叫 vm.submit() -->
<input v-on:keyup.13="submit">
記住所有的 keyCode 比較困難,所以 Vue 為最常用的按鍵提供了別名:
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">
全部的按鍵別名:
.enter
.tab
.delete (捕獲 “刪除” 和 “退格” 鍵)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
事件繫結的簡寫
Vue中屬性的繫結的簡寫直接是 : === 'v-bind:'
而事件的縮寫是直接變成@. 也就是說:v-on: === @
看下面的例子:
<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>
事件繫結總結
Vue為了方便大家進行開發,提供了事件的相關的封裝,可以讓我們方便我們用Vue對事件進行開發,尤其是v-on指令的非常方便的跟Vue物件中methods進行配合進行復雜的事件處理,非常方便。