【Vue】基础（生命周期 & 常用指令）

生命周期

一个Vue实例是一个对象，对象就会有生命周期，一个Vue实例会经历下面以下生命周期。

1. 实例初始化 - 初始化事件 & 生命周期

2. 创建 - 数据观测（data observer）& 观察事件配置

3. 挂载 - 视图渲染

4. 更新 - 若数据发生变更触发重新渲染视图

5. 销毁 - 组件因为切换或内部调用vm.$destroy()方法

Vue在这个生命周期的几个阶段提供了钩子函数，方便在这个过程添加自己代码做一些处理

1. 创建前/后 ：beforeCreate/created
2. 挂载前/后 ：beforeMount/mounted
3. 更新前/后 ：beforeUpdate/updated
4. 销毁前/后 ：beforeDestroy/destroyed

 

钩子	$data绑定	$el绑定	渲染页面
beforeCreate	否	否	否
created	是	否	否
beforeMount	是	是	否
mounted	是	是	是
beforeUpdate	是	是	否
updated	是	是	是
beforeDestroy	是	是	否
destroyed	否	否	否

验证代码

 

常用指令

•  v-text

官方：更新元素的文本textContent
注意：会对内容进行编译，特殊字符编译成转义字符，保证是文本 

• v-html

官方：更新元素的 innerHTML
注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译

•  v-show

官方：根据表达式之真假值，切换元素的 display CSS 属性
注意：false 还是会创建元素，只是元素的display:none

v-show
你看得到我
你看不到我

• v-if/v-else-if/v-else

官方：根据表达式的值的真假来有条件地渲染元素
注意：false 不会创建元素

v-if
if="showText">你看得到我
if="!showText">你看不到我

• v-for

官方: 基于源数据多次渲染元素或模板块
注意：必须使用特定语法 alias in expression，为当前遍历的元素提供别名

v-for
待学内容

    
for="(item, index) in todoList" :key="item.id">{{index+1}} - {{ item.name }}

• v-on

缩写：@
官方：绑定事件监听器

v-on
点击事件
缩写点击
动态事件
只触发一次
鼠标左键点击
鼠标右键点击

• v-bind

缩写：:
官方: 动态地绑定一个或多个 attribute，或一个组件 prop 到表达式

• v-model

官方：在表单控件或者组件上创建双向绑定

转发请标明出处：https://www.cnblogs.com/WilsonPan/p/12732803.html