Vue钩子函数
Vue的生命周期函数
beforeCreate:function(){
console.log('1-beforeCreate 初始化之后');
},
created:function(){
console.log('2-created 创建完成');
},
beforeMount:function(){
console.log('3-beforeMount 挂载之前');
},
mounted:function(){
console.log('4-mounted 被创建');
},
beforeUpdate:function(){
console.log('5-beforeUpdate 数据更新前');
},
updated:function(){
console.log('6-updated 被更新后');
},
activated:function(){
console.log('7-activated');
},
deactivated:function(){
console.log('8-deactivated');
},
beforeDestroy:function(){
console.log('9-beforeDestroy 销毁之前');
},
destroyed:function(){
console.log('10-destroyed 销毁之后')
}
自定义指令的生命周期
- bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
- inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)。
- update:被绑定于元素所在的模板更新时调用,而无论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
- componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
- unbind:只调用一次,指令与元素解绑时调用。
bind:function(){//被绑定
console.log('1 - bind');
},
inserted:function(){//绑定到节点
console.log('2 - inserted');
},
update:function(){//组件更新
console.log('3 - update');
},
componentUpdated:function(){//组件更新完成
console.log('4 - componentUpdated');
},
unbind:function(){//解绑
console.log('1 - bind');
}
路由中的钩子函数
- beforeRouteEnter:在路由进入前的钩子函数。
- beforeRouteLeave:在路由离开前的钩子函数。
beforeRouteEnter:(to,from,next)=>{
console.log("准备进入路由模板");
next();
},
beforeRouteLeave: (to, from, next) => {
console.log("准备离开路由模板");
next();
}
Vue钩子函数的更多相关文章
- vue 钩子函数 使用async await
示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
- Vue钩子函数生命周期实例详解
vue生命周期简介 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁 ...
- vue 钩子函数的使用
1.什么是自定义指令,有哪些钩子函数及自定义指令的使用场景 ①自定义指令是什么?以及自定义指令的使用场景 在Vue中,有很多内置指令,但是这些指令只能满足我们最基础的使用,当我们在实际项目中遇到了必须 ...
- vue 钩子函数的初接触
vue-router的路由钩子函数: 第一种:全局钩子函数. router.beforeEach((to, from, next) => { console.log('beforeEach') ...
- vue 钩子函数
beforeRouteEnter 方法名称: beforeRouteEnter 调用时机: 切换路由之前,调用该方法时,页面还没有切换 next调用时机: activated 之后 注意事项: thi ...
- vue钩子函数的妙用之“created()和activated()”
一.created() 在创建vue对象时,当html渲染之前就触发: 但是注意,全局vue.js不强制刷新或者重启时只创建一次, 也就是说,created()只会触发一次: 二.activated( ...
- vue 钩子函数中获取不到DOM节点
原文链接:https://jingyan.baidu.com/article/f96699bbfe9c9d894f3c1b4b.html 两种解决方案: 1:官方解决方案: 受到 HTML 本身的一些 ...
- VUE钩子函数created与mounted区别
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图. mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作.
- Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...
随机推荐
- python爬虫2
学习任务 获取去哪儿网的出发地列表 获取旅游景点列表 获取景点产品列表 存储数据 1 获取出发地站点 (1)访问touch.qunar.com (2)按F12,单击自由行,在自由行页面点击搜索框 (3 ...
- canal部署启动的时候报错com.alibaba.druid.pool.DruidDataSource - testWhileIdle is true, validationQuery not set
报错信息:com.alibaba.druid.pool.DruidDataSource - testWhileIdle is true, validationQuery not set 解决方法: 找 ...
- Selenium自动化获取WebSocket信息
性能日志 ChromeDriver支持性能日志记录,您可以从中获取域“时间轴”,“网络”和“页面”的事件,以及指定跟踪类别的跟踪数据. 启用性能日志 默认情况下不启用性能日志记录.因此,在创建新会话时 ...
- C++ 读取一个文件下所有文件的文件名
Windows: #include<iostream> #include<string> #include <io.h> void readFileNameInDi ...
- python函数知识六 内置函数二、匿名函数与内置函数三(重要)
19.内置函数二 abs():绝对值 lst = [1,2,-3,1,2,-5] print([abs(i) for i in lst]) enumerate("可迭代对象",&q ...
- 解决pyspider框架web预览框过小问题
解决pyspider框架web预览框过小问题 Chrome 使用pyspider框架时,web预览框只有一小条: 解决办法: 找到debug.min.css文件,替换为如下内容: body{margi ...
- 在safari下input的placeholder设置行高失效
在项目中遇到input的placeholder在safari下设置行高失效的问题,亲测 input{ width:250px; height:30px; line-height:30px; font- ...
- python 内建属性
在python中创建一个类,它不仅有我们自定义的属性和方法,还有与生俱来的一些属性和方法,我们叫它内建属性. 下面是类常用内建属性列表. 常用专有属性 说明 触发方式 __init__ 构造初始化函数 ...
- mysql FORMAT() 格式化后的数字运算出错
原文链接 FORMAT() 之后 会满三位加逗号, 在此基础上进行数字运算的时候会出现预料之外的结果, 建议使用 : convert(param, decimal(12,2)) cast(par ...
- 关于MySql升级JDBC架包导致时区问题报错(The server time zone value '?й???????' is unrecognized or represents more than one time zone)
报错信息: The server time zone value '?й???????' is unrecognized or represents more than one time zone. ...