当前栏目
Vue自定义指令
一、前言
我们了解的vue指令有: v-model
,v-show
,v-for
等,除了这些指令,我们也可以实现自己的自定义指令。在vue中代码的抽取和复用主要是通过组件,如果我们想要对DOM元素进行底层操作,可以通过自定义组件来完成。
二、自定义指令的分类
自定义局部指令
:在options api选项中的directives中设置。
自定义全局指令
:在app的directive方法。
三、input框聚焦案例
我们需要实现的功能是:input选择框当我们打开页面是,就实现自动聚焦的功能。我们存在三种实现方法。
一、普通实现
通过ref
拿到input
标签,然后使用生命周期函数的回调,执行input
标签的focus
的操作
二、自定义局部组件实现
options api
中存在directives
选项,然后在其中设置指令。
三、自定义全局组件实现
在app
中存在directive
,可以在上面设置全局指令。
四、指令的生命周期
created
:在绑定元素的attribute或者事件监听器之前被使用
beforeMount
:当指令第一次绑定元素,并且挂载父组件之前被使用。
mounted
:在绑定元素的组件被挂载后调用。
beforeUpdate
:在指令绑定的组件更新其Vnode之前被调用
updated
:在包含组件的 VNode 及其子组件的 VNode 更新后调用
beforeUnmount
:在卸载绑定元素的父组件之前调用
unmounted
:当指令与元素解除绑定且父组件已卸载时,只调用一次。
五、生命周期的参数
el
:表示当前的元素
bindings
:可以从中取出一些参数的内容
vnode
:可以获取当前的vnode节点。
preVnode
:可以获取之前的vnode节点。
六、自定义指令的练习
我们一般从服务器端获取一些时间戳,但是我们一般在页面展示时,采用的是时间的其他格式,在vue2中我们一般使用过滤器(过滤器需要注意的是:在vue3中已经删除)
或者使用计算属性或者methods方法,此时我们还可以使用自定义指令来完成。
七、错误指出
如上图所示,此时将字符串绑定到bindings
中,如果不绑定,如果多次使用format-time
自定义指令,全局变量formateString
就会被最后一次使用的更改。
相关文章
- 一文吃透JavaScript中的DOM知识及用法
- 异常:TypeError: ‘caller‘, ‘callee‘, and ‘arguments‘ properties may not be accessed on strict mode func
- echarts实现3d柱状图的两种方式
- 【TypeScript】TS类型声明(二)
- CSS3如何调整背景图片大小
- 前端大屏常用的几种适配方案
- HTML生日快乐-生日祝福(烟花+粒子动画)
- spi~在插件开发过程中的使用
- 炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】
- web前端三大主流框架
- Web Spider 常见混淆EVAL、AA、JJ、JSFUCK
- 【vue2小知识】路由守卫的使用与解决RangeError: Maximum call stack size exceeded问题的报错。
- CSS绝对定位(absolute)、相对定位(relative)方法(详解)
- css行间距怎么设置(CSS设置行间距)
- JavaScript数组(四):判断数组相等的4种方法
- Vue项目保持用户登录状态(localStorage + vuex 刷新页面后状态依然保持)
- 自学web前端觉得好难,可能你遇到了这些困境
- Vue路由导航报错:NavigationDuplicated: Avoided redundant navigation to current location解决方法
- Vue框架背后的故事
- vue中this.$router.push()路由传值和获取的两种常见方法