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等

一、生命周期函数

    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 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。 

代码展示：

   

	
	
	



	

		
{
    {todo}}
	
	
v-if=true
	
v-if=false
	
v-show
	v-bind
	

		v-on
		uname
	
	

		

			姓名：
			
		
	

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