生命周期
一个Vue实例是一个对象，对象就会有生命周期，一个Vue实例会经历下面以下生命周期。
- 实例初始化 - 初始化事件 & 生命周期
- 创建 - 数据观测（data observer）& 观察事件配置
- 挂载 - 视图渲染
- 更新 - 若数据发生变更触发重新渲染视图
- 销毁 - 组件因为切换或内部调用vm.$destroy()方法
Vue在这个生命周期的几个阶段提供了钩子函数，方便在这个过程添加自己代码做一些处理
- 创建前/后 ：beforeCreate/created
- 挂载前/后 ：beforeMount/mounted
- 更新前/后 ：beforeUpdate/updated
- 销毁前/后 ：beforeDestroy/destroyed
| 钩子 | $data绑定 | $el绑定 | 渲染页面 |
|---|---|---|---|
| beforeCreate | 否 | 否 | 否 |
| created | 是 | 否 | 否 |
| beforeMount | 是 | 是 | 否 |
| mounted | 是 | 是 | 是 |
| beforeUpdate | 是 | 是 | 否 |
| updated | 是 | 是 | 是 |
| beforeDestroy | 是 | 是 | 否 |
| destroyed | 否 | 否 | 否 |
验证代码
<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
注意：会对内容进行编译，特殊字符编译成转义字符，保证是文本
<span v-text="message"></span>
<br />
<button v-text="buttonText" />
- v-html
官方：更新元素的 innerHTML
注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译
<span v-html="message"></span>
- v-show
官方：根据表达式之真假值，切换元素的 display CSS 属性
注意：false 还是会创建元素，只是元素的display:none
<h3>v-show</h3>
<span v-show="showText">你看得到我</span>
<span v-show="!showText">你看不到我</span>
- v-if/v-else-if/v-else
官方：根据表达式的值的真假来有条件地渲染元素
注意：false 不会创建元素
<h3>v-if</h3>
<span v-if="showText">你看得到我</span>
<span v-if="!showText">你看不到我</span>
- v-for
官方: 基于源数据多次渲染元素或模板块
注意：必须使用特定语法 alias in expression，为当前遍历的元素提供别名
<h3>v-for</h3>
待学内容
<ul>
<li v-for="(item, index) in todoList" :key="item.id">{{index+1}} - {{ item.name }}</li>
</ul>
- v-on
缩写：@
官方：绑定事件监听器
<h3>v-on</h3>
<button v-on:click="clickMe">点击事件</button>
<button @click="clickMe">缩写点击</button>
<button @[buttonEvent]="clickMe">动态事件</button>
<button @click.once="clickMe">只触发一次</button>
<button @click.left="clickMe">鼠标左键点击</button>
<button @click.right="clickMe">鼠标右键点击</button>
-
v-bind
缩写：:
官方: 动态地绑定一个或多个 attribute，或一个组件 prop 到表达式
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 动态 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 动态 attribute 名缩写 (2.6.0+) -->
<button :[key]="value"></button>
<!-- 内联字符串拼接 -->
<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>
<!-- 绑定一个有属性的对象 -->
<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
官方：在表单控件或者组件上创建双向绑定
<input v-model="message" placeholder="edit me">
