- 每個(gè)Vue會(huì)應(yīng)用通過(guò)
new Vue()方法創(chuàng)建一個(gè)根Vue實(shí)例，創(chuàng)建Vue實(shí)例時(shí)可傳入一個(gè)選項(xiàng)對(duì)象。 - Vue雖然并未完全遵循MVVM模型，但Vue設(shè)計(jì)也受它啟發(fā)。
- Vue應(yīng)用通過(guò)
new Vue()創(chuàng)建的根Vue實(shí)例，以及可選的嵌套的、可復(fù)用的組件樹組成。 - 所有Vue組件都是Vue實(shí)例，并接受相同的選項(xiàng)對(duì)象。
import Vue from "vue";
const vm = new Vue(options={});
選項(xiàng)對(duì)象options
選項(xiàng)對(duì)象的屬性涉及到的參數(shù)可劃分為五類，分別是數(shù)據(jù)、DOM、生命周期鉤子、資源、組合、其它。
數(shù)據(jù)
| 數(shù)據(jù) | 描述 |
|---|---|
| data | Vue實(shí)例的數(shù)據(jù)對(duì)象 |
| props | 用于接收來(lái)自父組件的數(shù)據(jù) |
| propsData | 創(chuàng)建Vue實(shí)例時(shí)傳遞給props的參數(shù)，方便測(cè)試。 |
| computed | 計(jì)算屬性，會(huì)被混入到Vue實(shí)例中。 |
| methods | 方法，將被混入到Vue實(shí)例中。 |
| watch | 對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)的回調(diào)函數(shù)。 |
data
當(dāng)Vue實(shí)例被創(chuàng)建時(shí)，它向Vue的響應(yīng)式系統(tǒng)中加入了data對(duì)象中能找到的所有屬性。當(dāng)屬性發(fā)生改變時(shí)，視圖產(chǎn)生響應(yīng)，即匹配更新為新值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
</div>
<script>
//數(shù)據(jù)對(duì)象
var user = {username:'alice'};
//將數(shù)據(jù)對(duì)象添加到Vue實(shí)例中
var vm = new Vue({
data:user
});
console.log(vm.username === user.username);
//設(shè)置屬性會(huì)影響到原始數(shù)據(jù)，反之亦然。
vm.username = 'ben';
console.log(user.username);
</script>
</body>
</html>
當(dāng)數(shù)據(jù)改變時(shí)，視圖重渲染。只有當(dāng)實(shí)例被創(chuàng)建時(shí)data中存在的屬性才是響應(yīng)式的。即若添加新屬性則它的改動(dòng)不會(huì)觸發(fā)任何視圖的更新。
若你之后需某屬性，之前定義時(shí)設(shè)置初始值即可。
var vm = new Vue({
data:{
error:null,
list:[],
count:0,
}
});
唯一的例外是使用Object.freeze()，會(huì)阻止修改現(xiàn)有屬性，也意味著響應(yīng)系統(tǒng)無(wú)法再追蹤變化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{data.message}}</p>
<button @click="data.message='world'">change</button>
</div>
<script>
var data = {message:'hello'};
var vm = new Vue({
el:'#app',
data(){
return {data};
}
});
</script>
</body>
</html>
除了數(shù)據(jù)屬性，Vue實(shí)例還暴露了一些有用的實(shí)例屬性和方法。它們都有前綴$，以便與用戶自定義的屬性區(qū)分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{data.message}}</p>
<input type="text" v-model="data.message">
</div>
<script>
var data = {message:'hello'};
var vm = new Vue({
el:'#app',
data:data
});
//Vue實(shí)例實(shí)例屬性
console.log(vm.$el===document.getElementById('app'));//output:true
console.log(vm.$data===data);//output:true
//Vue實(shí)例方法
vm.$watch('message', function(newVal, oldVal){
console.log('message change');//回調(diào)將在vm.message改變后調(diào)用
});
</script>
</body>
</html>
DOM
| DOM | 描述 |
|---|---|
| el | 已存在的頁(yè)面DOM元素的CSS選擇器或HTMLElement實(shí)例，作為Vue實(shí)力的掛載目標(biāo)。 |
| render | 字符串模板代替方案 |
el
如果在Vue實(shí)例化時(shí)存在el選項(xiàng)，Vue實(shí)例將立即進(jìn)入編譯過(guò)程。否則需要顯示調(diào)用vm.$mount()方法手動(dòng)開啟編譯。
const vm = new Vue({
el:"#app"
});
const vm = new Vue();
vm.$mount("#app");
Vue實(shí)例對(duì)象vm提供了$muont生命周期方法，如果vm對(duì)象在實(shí)例化時(shí)沒(méi)有收到el選項(xiàng)，則會(huì)處于“未掛載”的狀態(tài)，即沒(méi)有關(guān)聯(lián)的DOM元素。此時(shí)可使用vm.$mount(elementOrSelector)方法手動(dòng)掛載一個(gè)尚未掛載的實(shí)例。若沒(méi)有提供elementOrSelector參數(shù)，模板將被渲染為文檔之外的元素。
例如：入口文件main.js
import Vue from 'vue';
import Axios from "axios";
import App from './App.vue';
import router from "./router.js";
Vue.config.productionTip = false;
Vue.prototype.axios = Axios;
//創(chuàng)建vue應(yīng)用實(shí)例并掛在到#index元素上
const vm = new Vue({render:h=>h(App), router:router});//未掛載狀態(tài)
//手工掛載vm實(shí)例
vm.$mount('#index');
$mount方法會(huì)返回vm實(shí)力自身，因此可鏈?zhǔn)秸{(diào)用其他實(shí)例方法。
render
render作為字符串模板的替代方案，render渲染函數(shù)接收一個(gè)createElement方法作為第一個(gè)參數(shù)用來(lái)創(chuàng)建VNode節(jié)點(diǎn)。若組件是一個(gè)函數(shù)組件則render渲染函數(shù)還會(huì)接收一個(gè)額外的context上下文參數(shù)，為沒(méi)有實(shí)例的函數(shù)組件提供上下文信息。
生命周期鉤子
每個(gè)Vue實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過(guò)一系列初始化過(guò)程--例如，需設(shè)置數(shù)據(jù)監(jiān)聽、編譯、模板、將實(shí)例掛載到DOM并在數(shù)據(jù)變化時(shí)更新DOM等。同時(shí)在這個(gè)過(guò)程中也會(huì)運(yùn)行一些叫做生命周期鉤子的函數(shù)，這給用戶在不同階段添加自己的代碼的機(jī)會(huì)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p>{{data.message}}</p>
<input type="text" v-model="data.message">
</div>
<script>
var data = {message:'hello'};
var vm = new Vue({
el:'#app',
data:data,
created:function(){
console.log('created', this.message);
},
mounted:function(){
console.log('mounted', this.message);
},
updated:function(){
console.log('updated', this.message);
},
destroyed:function(){
console.log('destroyed', this.message);
}
});
</script>
</body>
</html>
created鉤子可用來(lái)在實(shí)例被創(chuàng)建后執(zhí)行代碼，其他鉤子在實(shí)例生命周期不同階段被調(diào)用，如mounted、updated、destroyed。生命周期鉤子的this上下文指向調(diào)用它的Vue實(shí)例。
不要在選項(xiàng)屬性或回調(diào)上使用箭頭函數(shù)，比如created:()=>console.log(this.message)。因?yàn)榧^函數(shù)是和父級(jí)上下文綁定在一起的，this不會(huì)是如你所期待的Vue實(shí)例，經(jīng)常導(dǎo)致Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.method is not a function之類的錯(cuò)誤。
