vue2生命周期函数及常用指令

最新推荐文章于 2024-09-19 17:06:04 发布

Cenobite961

最新推荐文章于 2024-09-19 17:06:04 发布

阅读量1.5k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_26942049/article/details/125941773

版权

本文详细介绍了Vue.js组件的生命周期，包括beforeCreate、create、beforeMount、mounted等各个阶段及其应用场景。同时，讲解了v-model、v-if、v-show等核心指令的使用方法，并提供了代码示例。通过学习，你可以更好地理解和掌握Vue.js的运行机制及基本操作。

摘要由CSDN通过智能技术生成

一、生命周期函数
1.beforeCreate 创建前执行（此时data和el都还未初始化，无法通过vm访问到data中的数据、methods中的方法）
2.create 完成创建（此时完成了data数据初始化，el还未初始化，可以通过vm访问到data中的数据、methods中的方法）
3.beforeMount 载入前（完成了data和el数据初始化，页面呈现的是未经vue编译的DOM结构，所有对DOM的操作均不奏效）
4.mounted 载入后html已经渲染(页面呈现的是经过vue编译的DOM，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作，ajax请求也可以放在这个函数中)
5.beforeUpdate 更新前状态（view层的数据变化前，不是data中的数据改变前，此时数据是新的，但是页面是旧的。即：页面尚未和数据保持同步）
6.update 更新状态后（此时数据是新的，页面也是新的）
7.beforeDestroy 销毁前（vm中所有的data、methods、指令等都处于可用状态，马上要进行销毁。一般在此阶段进行关闭定时器、取消订阅消息、解除自定义事件等收尾操作）
8.destroy 销毁后（Dom元素存在，只是不再受vue控制，一般不操作此函数）

二、一些常用指令

1.v-model 接收用户输入的一些数据，直接就可以将这些数据，可以挂载到data属性里面
2.v-if 判断加载固定的内容，若为真加载，为假时删除元素，常用在用在权限管理，页面模块条件加载
3.v-show 元素会始终渲染并保持在dom中，v-show用法和v-if相同，安全性没有v-if高，v-show将元素display设置成none，并不是将元素直接移除。
4.v-else 元素必须紧跟在v-if或v-show元素的后面——否则它不能被识别（报错）
5.v-bind 给页面中html属性进行绑定
6.v-on 对页面中的事件进行绑定
7.v-for 控制html元素的循环，实现数据列表的生成

三、代码示例

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div id="date">
	<ul>
        <!--这里的v-for绑定的是data里的数据，里面有多少值就会执行多少次，item为当前次的值-->
		<li v-for="item in list">{{item}}</li>
	</ul>
     <!-- 这里的v-if、v-else绑定的是data里的数据，里面的值为真就展示，为假就不展示 -->
	<div v-if="judge">v-if=true</div>
	<div v-else="judge">v-if=false</div>
    <!-- 这里的@click是v-on:click的简写，绑定的为methods里的方法 -->
	<button @click="showHidden">显示/隐藏</button>
    <!-- 这里的v-show绑定的是data里的数据，逻辑与上面的v-if、v-else相同 -->
	<div v-show="isShow">v-show</div>
    <!-- 这里的:href是v-bind:href的简写，绑定的是data里的数据 -->
	<a :href="url">v-bind</a>
	<form id="log" method="post" action="">
		<div>
			<b>姓名：</b>
            <!-- 这里的v-model绑定的是data里的数据 -->
			<input type="text" name="name" placeholder="请输入用户名" v-model="name">
		</div>
	</form>
</div>
<script>
!function(){
	var vm=new Vue({
        // 绑定的是id为date的dom
		el:'#date',
		data:{
            // 这里放需要的数据
			list:['a','b','c','d'],
			judge:false,
			isShow:true,
			name:'qin',
			url:'http://baidu.com'
		},
		methods:{
         // 这里放需要的方法
        showHidden(){
            // 如果为显示就改为隐藏，如果为隐藏就改为显示
            this.isShow = this.isShow?false:true;
        }
        },
		beforeCreate(){
			alert('创建前');
		},
		create(){
			alert('创建完成');
		},
		beforeMount(){
			alert('载入前');
		},
		mounted{
			alert('载入后');
		},
		beforeUpdate{
			alert('更新前');
		},
		update{
			alert('更新后');
		}
 
	})
}();
</script>
</body>
</html>

四、总结

以上就是本人对这些知识点的理解与总结，有什么错误或是不足的地方烦请大家指正