生命周期
一個(gè)Vue實(shí)例是一個(gè)對(duì)象求豫，對(duì)象就會(huì)有生命周期，一個(gè)Vue實(shí)例會(huì)經(jīng)歷下面以下生命周期平痰。
- 實(shí)例初始化 - 初始化事件 & 生命周期
- 創(chuàng)建 - 數(shù)據(jù)觀測(cè)（data observer）& 觀察事件配置
- 掛載 - 視圖渲染
- 更新 - 若數(shù)據(jù)發(fā)生變更觸發(fā)重新渲染視圖
- 銷毀 - 組件因?yàn)榍袚Q或內(nèi)部調(diào)用vm.$destroy()方法
Vue在這個(gè)生命周期的幾個(gè)階段提供了鉤子函數(shù)齐婴，方便在這個(gè)過程添加自己代碼做一些處理
- 創(chuàng)建前/后 ：beforeCreate/created
- 掛載前/后 ：beforeMount/mounted
- 更新前/后 ：beforeUpdate/updated
- 銷毀前/后 ：beforeDestroy/destroyed
| 鉤子 | $data綁定 | $el綁定 | 渲染頁面 |
|---|---|---|---|
| beforeCreate | 否 | 否 | 否 |
| created | 是 | 否 | 否 |
| beforeMount | 是 | 是 | 否 |
| mounted | 是 | 是 | 是 |
| beforeUpdate | 是 | 是 | 否 |
| updated | 是 | 是 | 是 |
| beforeDestroy | 是 | 是 | 否 |
| destroyed | 否 | 否 | 否 |
驗(yàn)證代碼
<template>
<div id="app">
<h1 @click='clear'>{{message}}</h1>
<img alt="Vue logo" src="./assets/logo.png" />
</div>
</template>
<script>
export default {
name: "App",
data() {
return { message: "Wilson Pan" };
},
methods: {
clear() {
this.$destroy();
}
},
beforeCreate() {
console.log("-----beforeCreate start------");
console.log("$el : " + this.$el);
console.log("$data : " + this.$data);
console.log(this.$data);
console.log("-----beforeCreate end------");
},
created() {
console.log("-----created start------");
console.log("$el : " + this.$el);
console.log("$data : " + this.$data);
console.log(this.$data);
console.log("-----created end------");
},
beforeMount() {
console.log("-----beforeMount start------");
console.log("$el : " + this.$el);
console.log("$data : " + this.$data);
console.log(this.$el);
console.log(this.$refs);
debugger; // eslint-disable-line no-debugger
console.log("-----beforeMount end------");
},
mounted() {
console.log("-----mounted start------");
console.log("$el : " + this.$el);
console.log("$data : " + this.$data);
console.log(this.$el);
console.log(this.$refs);
this.message = "Alice";
console.log("-----mounted end------");
debugger; // eslint-disable-line no-debugger
},
beforeUpdate() {
console.log("-----beforeUpdate start------");
console.log("$el : " + this.$el);
console.log("$data : " + this.$data);
console.log("-----beforeUpdate end------");
debugger; // eslint-disable-line no-debugger
},
updated() {
console.log("-----updated start------");
console.log("$el : " + this.$el);
console.log("$data : " + this.$data);
console.log("-----updated end------");
debugger; // eslint-disable-line no-debugger
},
beforeDestroy() {
console.log("-----beforeDestroy start------");
console.log("$el : " + this.$el);
console.log("$data : " + this.$data);
console.log("-----beforeDestroy end------");
debugger; // eslint-disable-line no-debugger
},
destroyed() {
console.log("-----destroyed start------");
console.log("$el : " + this.$el);
console.log("$data : " + this.$data);
console.log("-----destroyed end------");
debugger; // eslint-disable-line no-debugger
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
常用指令
- v-text
官方：更新元素的文本textContent
注意：會(huì)對(duì)內(nèi)容進(jìn)行編譯，特殊字符編譯成轉(zhuǎn)義字符夕凝，保證是文本
<span v-text="message"></span>
<br />
<button v-text="buttonText" />
- v-html
官方：更新元素的 innerHTML
注意：內(nèi)容按普通 HTML 插入 - 不會(huì)作為 Vue 模板進(jìn)行編譯
<span v-html="message"></span>
- v-show
官方：根據(jù)表達(dá)式之真假值烤蜕，切換元素的 display CSS 屬性
注意：false 還是會(huì)創(chuàng)建元素，只是元素的display:none
<h3>v-show</h3>
<span v-show="showText">你看得到我</span>
<span v-show="!showText">你看不到我</span>
- v-if/v-else-if/v-else
官方：根據(jù)表達(dá)式的值的真假來有條件地渲染元素
注意：false 不會(huì)創(chuàng)建元素
<h3>v-if</h3>
<span v-if="showText">你看得到我</span>
<span v-if="!showText">你看不到我</span>
- v-for
官方: 基于源數(shù)據(jù)多次渲染元素或模板塊
注意：必須使用特定語法 alias in expression迹冤，為當(dāng)前遍歷的元素提供別名
<h3>v-for</h3>
待學(xué)內(nèi)容
<ul>
<li v-for="(item, index) in todoList" :key="item.id">{{index+1}} - {{ item.name }}</li>
</ul>
- v-on
縮寫：@
官方：綁定事件監(jiān)聽器
<h3>v-on</h3>
<button v-on:click="clickMe">點(diǎn)擊事件</button>
<button @click="clickMe">縮寫點(diǎn)擊</button>
<button @[buttonEvent]="clickMe">動(dòng)態(tài)事件</button>
<button @click.once="clickMe">只觸發(fā)一次</button>
<button @click.left="clickMe">鼠標(biāo)左鍵點(diǎn)擊</button>
<button @click.right="clickMe">鼠標(biāo)右鍵點(diǎn)擊</button>
-
v-bind
縮寫：:
官方: 動(dòng)態(tài)地綁定一個(gè)或多個(gè) attribute，或一個(gè)組件 prop 到表達(dá)式
<!-- 綁定一個(gè)屬性 -->
<img v-bind:src="imageSrc">
<!-- 動(dòng)態(tài) attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>
<!-- 縮寫 -->
<img :src="imageSrc">
<!-- 動(dòng)態(tài) attribute 名縮寫 (2.6.0+) -->
<button :[key]="value"></button>
<!-- 內(nèi)聯(lián)字符串拼接 -->
<img :src="'/path/to/images/' + fileName">
<!-- class 綁定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 綁定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 綁定一個(gè)有屬性的對(duì)象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通過 prop 修飾符綁定 DOM 屬性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 綁定虎忌∨葆悖“prop”必須在 my-component 中聲明。-->
<my-component :prop="someThing"></my-component>
<!-- 通過 $props 將父組件的 props 一起傳給子組件 -->
<child-component v-bind="$props"></child-component>
- v-model
官方：在表單控件或者組件上創(chuàng)建雙向綁定
<input v-model="message" placeholder="edit me">
