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

生命周期函数

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

• beforeCreated：在实例生成之前会自动执行的函数

• created：在实例生成之后会自动执行

• beforeMount：在组件内容被渲染到页面之前自动执行的函数

• mounted：在组件内容被渲染到页面之后自动执行的函数

• beforeUpdate：当data内的数据发生变化时会立即自动执行的函数

• updated：当data内的数据发生变化，且已经在页面渲染后，会自动执行的函数

• beforeUnmount：当页面中存在dom对象失效时，自动执行的函数

• unmounted：当页面中存在dom对象失效时，且dom完全销毁后，自动执行的函数

常用指令

• v-model：双向绑定指令

可用修饰符：

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

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

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

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

• 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

• 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>
/*注意：这里需要三个标签放在一起，如果中间插入其他标签会出现报错的问题*/
1
2
3
4
5
6
7
8
9
10

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

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

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

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

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

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

• 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>
`
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22