vue 钩子函数的使用
1、什么是自定义指令,有哪些钩子函数及自定义指令的使用场景
①自定义指令是什么?以及自定义指令的使用场景
在Vue中,有很多内置指令,但是这些指令只能满足我们最基础的使用,当我们在实际项目中遇到了必须要对DOM进行操作的逻辑时,我们就用到了自定义指令
②自定义指令的钩子函数
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind:只调用一次,指令与元素解绑时调用。
2、父组件获取异步动态数据传递给子组件,报错如何解决?
在父组件给子组件传值的时候,给子组件加一个判断,如果数据没有请求到就不渲染当前组件
<div v-if="list">
</div>
data() {
return{
list : [ ]
}
}
3、vue-router参数传递方法详述及区别
vue-router传参两种方式:params和query
方法一:
query 方式传参和接收参数
传参:
this.$router.push({
path:'/openAccount',
query:{id:id}
});
接收参数:
this.$route.query.id
传参是this.$router,接收参数是this.$route
两者区别:
$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法
$route为当前router跳转对象,里面可以获取name、path、query、params等
方法二:
params方式传参和接收参数
传参:
this.$router.push({
name:'/openAccount',
params:{
id: id
}
})
接收参数: this.$route.params.id
query和oarams的区别:
query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示
4、vue-router有哪几种导航钩子
全局导航钩子:beforeEach、afterEach
组件内导航:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
独享导航守卫:beforeEnter
链接:https://www.jianshu.com/p/16f78e2dc004
vue 钩子函数的使用的更多相关文章
- vue 钩子函数 使用async await
示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
- Vue钩子函数生命周期实例详解
vue生命周期简介 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁 ...
- Vue钩子函数
Vue的生命周期函数 beforeCreate:function(){ console.log('1-beforeCreate 初始化之后'); }, created:function(){ cons ...
- 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的生命周期在面试中也算是比 ...
随机推荐
- 代理、反射、注解、hook
代理 通过代理对象访问目标对象.这样做的好处是:可以在目标对象实现的基础上,扩展目标对象的功能. 代理对象拦截真实对象的方法调用,在真实对象调用前/后实现自己的逻辑调用 这里使用到编程中的一个思想:不 ...
- BZOJ 4899 记忆的轮廓
话说BZOJ 是不是死了啊 (已经没有传送门了) 设 $f[i][j]$ 表示走到第 $j$ 个位置确定了 $i$ 个存档点时的最小代价,并强制第 $j$ 个位置有一个存档点 那么设 $cst[i][ ...
- 基于S7协议实现与西门子PLC通信
西门子PLC是目前工控行业市场占有额比较大的一款PLC,而且随着上位机的越来越普及, 有很多人开始考虑自己开发上位机实现与西门子PLC的通信,遇到的第一个问题就是数据通信. 其实西门子PLC提供的接口 ...
- 和 Python 2.x 说再见!项目移到python3
如果你仍在使用 2.x,那么是时候将你的代码移植到 Python 3 了. 在技术的长河中,软件.工具.系统等版本的迭代本是常事,但由于使用习惯.版本的兼容性.易用性等因素,很多用户及开发者在使用或做 ...
- 三、maven学习-高级
maven父子工程
- vim insert VISUAL模式无法右键复制问题(转)
转自:https://blog.csdn.net/coder_oyang/article/details/89096219 vim中使用鼠标右键粘贴,失败.vim的模式: 网上解法: 1. 普通模式下 ...
- php操作 cookie
1,设置cookie <?php setcookie('key'); setcookie('key1','value1'); setcookie(***); setcookie('key4', ...
- 编辑docker容器中的文件
一般docker中没有VI或者其它相应的文本编辑器,为了写个东西安装个vi就可以解决问题,除此之外还有别的办法 登陆docker中找到需要编辑的文件的位置 sudo docker ps -a sudo ...
- Centos 7.0 界面
执行:systemctl get-default //显示默认的界面方式 multi-user.target //命令行界面 graphical.target //图形化界面 执行:systemctl ...
- 【转】make menuconfig/.config/Kconfig解析
当执行#make menuconfig时会出现内核的配置界面,所有配置工具都是通过读取"arch/$(ARCH)/Kconfig"文件来生成配置界面,这个文件就是所有配置的总入口, ...