VUE基础知识一：生命周期函数和常用指令

最新推荐文章于 2026-04-09 11:20:28 发布

原创最新推荐文章于 2026-04-09 11:20:28 发布 · 1.8k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端

VUE 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了Vue.js的生命周期，包括beforeCreated、created、beforeMount、mounted等关键阶段，以及如何在这些阶段自动执行函数。同时，文章讲解了v-model、v-bind、v-for、v-show、v-if、v-html、v-on和v-once等核心指令的用法，包括它们的修饰符和应用场景。最后，讨论了v-for与v-if的混合使用细节，指出在模板编写中的正确用法。

生命周期函数

概念：在生命周期中的某一时刻自动执行的函数

beforeCreated：在实例生成之前会自动执行的函数
created：在实例生成之后会自动执行
beforeMount：在组件内容被渲染到页面之前自动执行的函数
mounted：在组件内容被渲染到页面之后自动执行的函数
beforeUpdate：当data内的数据发生变化时会立即自动执行的函数
updated：当data内的数据发生变化，且已经在页面渲染后，会自动执行的函数
beforeUnmount：当页面中存在dom对象失效时，自动执行的函数
unmounted：当页面中存在dom对象失效时，且dom完全销毁后，自动执行的函数

常用指令

v-model：双向绑定指令

可用修饰符：

lazy：表示懒加载，当输入框输入值后，并且失去焦点的时候触发
number：限定输入框是数字类型，非数值字符会被自动过滤
trim：将前后的空格自动去除（中间存在空格会正常保留）

/*当输入框的值发生变化后，div标签对应的值也会发生变化*/
<input v-model="inputValue"/>
<div>{{inputValue}}</div>

v-bind：属性的绑定操作，简写:。

/*将变量赋值给div的title属性，如果直接写title="userName"是无法实现的，没有达到动态绑定的效果*/
<div v-bind:title="userName"></div>
/*简写如下*/
<div :title="userName"></div>

v-for：循环遍历列表数据（数组数据或者对象数据）

遍历数组时对应的item是数组内的每个元素，遍历对象时，value对应的是对象内属性的值，key对应的是对象内属性名。

注意：这里涉及到在标签中添加一个:key，通过这个方式优化循环，当出现key相同的时候，之前遍历的标签可以复用，提高性能，key值要保证唯一性

const list = ["张三","李四","王五"]
const listObject = {
	"id":1,
	"name":"张三",
	"age":18

}
/*循环数组*/
<ul>
    <li v-for="(item,index) of list" :key="item">{{item}}</li>
</ul>
/*循环对象value对应字段值，key对应字段名*/
<ul>
    <li v-for="(value,key,index) of listObject" :key="value">{{value}}</li>
</ul>

v-show：用于判断当前标签是否显示，通过样式的display属性来实现，不会触发beforeUnmount和Unmounted生命周期函数。

data(){
	return{
		show: true
	}
}
<div v-show="show"></div> /*当show为true的时候显示，false的时候不显示*/

v-if：用于判断当前标签是否显示，通过删除和添加当前标签实现（支持v-else-if，v-else），会触发beforeUnmount和Unmounted生命周期函数。

data(){
	return{
		show: true,
		condition: false
	}
}
<div v-if="show"></div> /*当show为true的时候显示，false的时候不显示*/
<div v-else-if="condition"></div>
<div v-else></div>
/*注意：这里需要三个标签放在一起，如果中间插入其他标签会出现报错的问题*/

v-html：将含有html标签的变量渲染到指定的元素内。

const html = "<strong>hell world</strong>"
<div>{{html}}</div> /*此方式会直接将html作为文本内容显示在div标签内，不会渲染strong标签的效果*/
<div v-html="html"></div> /*可以正常解析strong标签，并将hello world加粗*/

v-on：用来定义事件，简写@。

<div v-on:click="clickBtn"></div>
/*简写*/
<div @click="clickBtn"></div>

v-once：表示当前标签变量只渲染一次，即使此变量在不断的变化，也不会再重新渲染。

<input v-model="inputValue"/>
<div v-once>{{inputValue}}</div> /*此时input标签内的值变化并不会引起div内的数据变化*/

v-for和v-if混合使用细节

/*这种写法在Vue里面是不正确的，v-if不会生效，因为v-for优先级要高于v-if*/
template:`
	<div v-for="item in 10" :key="item" v-if="key !== 5">
        {{item}}
	</div>
`
/*改进第一步：这种方法可以显示，但是会出现外面多包了一层div*/
template:`
	<div v-for="item in 10" :key="item">
        <div v-if="key !== 5">
            {{item}}
        </div>
	</div>
`
/*终版：使用占位符标签：template*/
template:`
	<template v-for="item in 10" :key="item">
        <div v-if="key !== 5">
            {{item}}
        </div>
	</template>
`