关闭

vue3.0自定义指令(directives)

时间: 2020-11-01阅读: 95标签: vue3

在大多数情况下,你都可以操作数据来修改视图,或者反之。但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令。

举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时候,我们可能会这么做。

const app = vue.createApp({
  mounted(){
    this.$refs.input.focus();
  },  
  template: `<input type="text" ref="input" />`,
});

在mounted钩子函数里,通过 $refs 获取需要聚焦的 DOM 元素,然后调用 focus 方法完成自动聚焦的功能。


基本使用

上面做法已经实现了我们需要的功能,但是假如说我们有多个组件都需要这个功能,那我们只能把这段代码复制过去,重新实现逻辑。我们下面看下如果使用自定义指令,应该怎么做。

const app = Vue.createApp({
  // 通过 v-[自定义指令名称] 绑定自定义指令
  template: `<input type="text" v-focus/>`,
});
// 注册一个全局自定义指令
app.directive('focus',{
  // 当被绑定的元素插入到DOM的时候执行..
  mounted(el){
    el.focus();
  }
})

如上,我们定义了一个全局自定义指令 focus,并通过 v-focus 绑定到需要聚焦的 input 元素上。如果,其他组件或模块也需要聚焦功能,只要简单的绑定此指令即可。


自定义指令的钩子函数

我们在上面定义指令的时候,会发现其中包含了 mounted 钩子函数,指令还提供了如下钩子函数,我们用代码的形式来给大家列出来。

app.directive('directiveName', {
  // 指令绑定元素挂载前
  beforeMount(el) {},
  // 指令绑定元素挂载后
  mounted(el, binding) {},
  // 指令绑定元素因为数据修改触发修改前
  beforeUpdate(el) {},
  // 指令绑定元素因为数据修改触发修改后
  updated(el) {},
  // 指令绑定元素销毁前
  beforeUnmount(el) {},
  // 指令绑定元素销毁后
  unmounted(el) {},
});

效果就不一一列举了,有兴趣大家可以尝试下分别触发这些钩子函数。指令钩子函数大部分与组件很类似,大家可以对比着来看。


动态指令参数

下面,我们再来看一个例子。

const app = Vue.createApp({
  template: `<div v-abs-top="num" ></div>`,
});
// 在很多时候,你可能想在 mounted 和 updated 时触发相同行为,而不关心其它的钩子,就这样写
app.directive('absTop', (el) => {
  el.style[binding.arg] = '100px';
});

我们在 div 元素上绑定 absTop 指令,div 元素本身定位是 absolute,指令执行让绑定元素的 top 为 100px。这时候,我想在绑定指令的时候能够传一个参数,使得元素的 top 值可以根据参数来改变。代码如下:

const app = Vue.createApp({
  data() { return { num: 100 } },
  template: `<div v-abs-top="num"></div>`,
});
app.directive('absTop', (el, binding) => {
  el.style.top = binding.value + 'px';
});

元素可以通过 v-directive="value" 传入动态参数,指令通过钩子函数的第二个参数 binding.value 来接收参数。

如果其他元素可能不是修改 top 的值,有可能是 left、right 或者 bottom,那么指令可以动态指定吗?其实也是可以做到的。首先,我们修改模板为:

<div class="box" v-abs:left="num"></div>

然后修改指令本身

app.directive('absTop', (el, binding) => {
  el.style[binding.arg] = binding.value + 'px';
});

在 v-mydirective:[argument]="value" ,arguments 也是可以动态改变的,这样,就可以完美的实现上述要求了。


组件的使用

组件中绑定指令与 DOM元素绑定指令并没有什么不同,指令会获取组件的原生 根DOM 来操作。但是要注意的是,在 vue3.0 中,组件可能有多个根节点,指令绑定在多根节点组件是有问题的。


局部自定义指令

最后,再来简单说下局部自定义指令是怎么定义的。

const app = Vue.createApp({
directives: {
    focus: {
      // 指令的定义
      mounted(el) {
        el.focus()
      }
    }
  }
}

局部指令定义和全局指令基本一致,如上所示,在组件中定义 directives 就可以了。


总结

自定义指令可以提取出原生DOM操作的逻辑。所以指令的应用范围主要表现在,当一些操作涉及到 DOM 底层时,而且操作逻辑可能用于多处地方,就适合用指令来封装这些逻辑。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/10032

关闭

为什么用JSX开发Vue3

在很长的一段时间中,Vue 官方都以简单上手作为其推广的重点。这确实给 Vue 带来了非常大的用户量,尤其是最追求需求开发效率, 往往不那么在意工程代码质量的国内中小企业中,Vue 占据的份额极速增长。

Vue 3 响应式原理及实现

响应基本类型变量,首先看一下响应式预期应该是什么样的,新建一个 demo.js 文件,内容如下:

Vue3中的Vue Router初探

对于大多数单页应用程序而言,管理路由是一项必不可少的功能。随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的。

Vue3源码解析(computed-计算属性)

在Vue2中我们已经对计算属性了解的很清楚了,在Vue3中提供了一个computed的函数作为计算属性的API,下面我们来通过源码的角度去分析计算属性的运行流程。

浅谈Vue3的watchEffect用途

vue2里面的 watch api 大家应该都挺熟悉的了, vue2中vue实例里面有一个 $watch 方法 在sfc(sigle file component)里面有一个 watch 选项。他可以实现在一个属性变更的时候,去执行我们想要的行为

vue3.x 新特性 - CompositionAPI

安装 vue-cli3,在使用任何 @vue/composition-api 提供的能力前,必须先通过 Vue.use() 进行安装,安装插件后,您就可以使用新的 Composition API 来开发组件了。

Vue 的数据响应式(Vue2 及 Vue3)

从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom。换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改。

Vue3 项目从零开始搭建项目及插件的使用

vue3.0 出来有段时间,借助年底这段时间不怎忙,摸会鱼,开始学习Vue3。本文主要从项目搭建到项目实战,一步步的学习Vue3 的项目搭建以及一些插件及库的使用,减少入坑。

快速使用Vue3最新的15个常用API

大家都知道,现在Vue3的各个版本已经陆续发布了,并且有很多的团队已经着手各个库的开发与Vue2向Vue3的升级,我们当然也不能落后,所以赶紧将你手中的Vue2升级到Vue3,跟着本文一起学习新的API吧

在Vue3中使元素在滚动视图时淡入

优秀的网站要对用户的互动做出反应。做到这一点的一个很好的方法就是对有人向下滚动你的页面做出反应。除了视差组件和滚动事件外,添加响应式触摸的一种好方法是使元素在滚动视图时淡入。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!