Vue.js生命周期函数（钩子函数）及常用指令

Vue.js生命周期函数（钩子函数）及常用指令Vue.js的生命周期函数 beforeCreate、create 、beforeMount 、mounted 、beforeUpdate 、update 、beforeDestroy、destroy,及常用指令v-model 、v-if 、v-show 、v-else 、v-bind 、v-on 、v-for 、v-once等一、生命周期函数

木小蛮

5462人浏览 · 2018-03-20 16:21:55

木小蛮 · 2018-03-20 16:21:55 发布

Vue.js生命周期函数（钩子函数）及常用指令

Vue.js的生命周期函数 beforeCreate、create 、beforeMount 、mounted 、beforeUpdate 、update 、beforeDestroy、destroy,及常用指令v-model 、v-if 、v-show 、v-else 、v-bind 、v-on 、v-for 、v-once等

一、生命周期函数

1.beforeCreate 创建前执行（data和el都还未初始化）
2.create 完成创建（完成了data数据初始化，el还未初始化）
3.beforeMount 载入前（完成了data和el数据初始化）
4.mounted 载入后html已经渲染(ajax请求可以放在这个函数中)
5.beforeUpdate 更新前状态（view层的数据变化前，不是data中的数据改变前）
6.update 更新状态后
7.beforeDestroy 销毁前
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 对页面中的事件进行绑定
      事件修饰符 .stop (阻止单击事件冒泡) .prevent (提交事件不再重载页面) .capture (使用事件捕获模式) .self(只当事件在该元素本身（而不是子元素）触发时触发回调)

7.v-for 控制html元素的循环，实现数据列表的生成
8.v-once 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

代码展示：

<!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>
		<li v-for="todo in data">{{todo}}</li>
	</ul>
	<div v-if="judge">v-if=true</div>
	<div v-else="judge">v-if=false</div>
	<div v-if="judgeT">v-show</div>
	<a :href="url">v-bind</a>
	<div @click="alertSrt">
		<a href="javascript:;" @click="alertNum">v-on</a>
		<a href="javascript:;" @click.stop="alertUame">uname</a>
	</div>
	<form id="log" method="post" action="">
		<div>
			<b>姓名：</b>
			<input type="text" name="uname" placeholder="请输入用户名" v-model="uname">
		</div>
	</form>
</div>
<script>
!function(){
	var vm=new Vue({
		el:'#date',
		data:{
			data:['a','b','c','d'],
			judge:false,
			judgeT:true,
			uname:'111',
			url:'http://baidu.com',

		},
		methods:{
			alertSrt:function(){
				alert('str');
			},
			alertNum:function(){
				alert('num');
				this.judgeT=false;
			},
			alertUame:function(){
				alert(this.uname);
			}
		},
		beforeCreate:function(){
			alert('创建前');
		},
		create:function(){
			alert('创建完成');
		},
		beforeMount:function(){
			alert('载入前');
		},
		mounted:function(){
			alert('载入后');
		},
		beforeUpdate:function(){
			alert('更新前');
		},
		update:function(){
			alert('更新后');
		}

	})
}();
</script>
</body>
</html>

较为基础，例子不全，多练多试即可，不清楚可以留言@_@

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^