AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【Vue3从零开始-第五章】5-2 自定义指令

2022-09-26 149
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【Vue3从零开始-第五章】5-2 自定义指令

]UWOD(KIB9LJS9~S[T{QHM9.png


前言


在上一篇的文章中，我们了解了vue高级语法中的mixin语法，本章节中将会和大家一起学习vue里面的自定义指令的内容。


前菜


在vue里面比如想要操作DOM，可以通过ref属性去定义，然后通过$refs获取到DOM元素从而实现操作DOM。


比如想要做一个输入框自动聚焦的功能，就可以在input标签中定义ref属性，然后在mounted生命周期函数中使用$refs操作input标签。


<script>
  const app = Vue.createApp({
    mounted(){
      this.$refs.input.focus()
    },
    template: `
      <div>
        <input ref='input' />
      </div>
    `
  });
  const vm = app.mount('#root');
</script>
复制代码


4~JP2[~RZHT`UN@8]BL$`SS.png


刷新页面之后，input标签就会自动获取焦点了。但是通过ref操作DOM元素在一些简单的需求中比较好用，但是它不能被复用，其实如果想要操作DOM，还可以通过自定义指令directive的方式去实现。


directive


全局指令


<script>
  const app = Vue.createApp({
    template: `
      <div>
        <input v-focus />
      </div>
    `
  });
  app.directive('focus', {
    mounted(el){
      el.focus()
    }
  })
  const vm = app.mount('#root');
</script>
复制代码


  • 全局的directive方法和定义组件一样，也是通过app定义的。


  • directive方法中的第一个参数是自定义指令的名称，在标签中可以通过v-指令名称的方式使用自定义指令。


  • directive方法中的第二个参数是一个对象，里面可以写当前指令的生命周期函数。


  • 在生命周期中会接收一个el参数，这个参数可以用来操作DOM元素。


局部指令


const directives = {
    focus: {
      mounted(el){
        el.focus()
      }
    }
  }
const app = Vue.createApp({
    directives: directives,
    template: `
      <div>
        <input v-focus />
      </div>
    `
});
复制代码


  • 局部的自定义指令方式和局部组件的定义方式差不多，都是在app实例上面自定义一个对象。


  • 自定义的对象里面会有一个指令名称的对象，指令名称里面也是当前自定义指令对应的生命周期函数。


  • 组件实例中通过directives引用局部自定义指令。


  • 标签上还是通过v-指令名称的方式使用自定义指令。


生命周期


自定义指令的生命周期和vue组件实例的生命周期是一样的，其中的区别就是：


  • 组件实例的beforeMount、mounted是组件挂载到vue上面的时候触发的。


  • 自定义指令的beforeMount、mounted是指令挂载到标签上面的时候触发的。


  • 自定义指令的生命周期函数中会接收参数，从而操作DOM。


自定义指令的生命周期函数：beforeMount、mounted、beforeUpdate、updated、beforeUnmout、unmounted


<script>
  const app = Vue.createApp({
    data(){
      return {
        show: true
      }
    },
    template: `
      <div v-if="show">
        <input v-focus />
      </div>
    `
  });
  app.directive('focus', {
    beforeMount(el){
      console.log('focus beforeMount')
    },
    mounted(el){
      console.log('focus mounted')
    },
    beforeUpdate(el){
      console.log('focus beforeUpdate')
    },
    updated(el){
      console.log('focus updated')
    },
    beforeUnmount(el){
      console.log('focus beforeUnmount')
    },
    unmounted(el){
      console.log('focus unmounted')
    }
  })
  const vm = app.mount('#root');
</script>
复制代码


Z[L5WOC7GE]Y{P({ZX)WZUP.png


通过v-if指令去判断DOM是否被销毁，然后在浏览器控制台中改变show的值，就会输出beforeUnmount和unmounted生命周期函数中的内容。


🐔大家可以试试用v-show指令，看看会执行哪些生命周期函数。


传值


上面用到的v-if指令，亦或是以前学到的v-show、v-model指令都会赋值，那我们自定义指令也想要赋值，并且在指令生命周期函数中使用该怎么做呢？


🌰 小例子：比如想要通过自定义指令给一个DOM元素距顶部的距离


<script>
  const app = Vue.createApp({
    template: `
      <div v-pos="100" style="position: absolute;">
        Hello World
      </div>
    `
  });
  app.directive('pos', {
    mounted(el, binding){
      el.style.top = binding.value + 'px'
    }
  })
  const vm = app.mount('#root');
</script>
复制代码


~~_}P_`2)D8(QQGK499`XAJ.png


  • 自定义指令的mounted生命周期函数中额外接收了一个参数binding，这个参数里面有一个value就是自定义指令中传递过来的值。


  • 通过el参数操作DOM元素，然后拿到binding中的value值，就可以实现自定义指令传值了。


当然我们也可以把自定义指令的值改为动态的，这样也会方便修改。


const app = Vue.createApp({
    data(){
      return {
        top: 110
      }
    },
    template: `
      <div v-pos="top" style="position: absolute;">
        Hello World
      </div>
    `
});
复制代码


UG[UM1}2Q3I40%XVJ(KZ7]G.png


当我们在浏览器控制台修改top的值时，发现DOM元素上的样式并没有修改，那这时候就可以用到自定义指令的另外一个生命周期函数updated。


app.directive('pos', {
    mounted(el, binding){
      el.style.top = binding.value + 'px'
    },
    updated(el, binding){
      el.style.top = binding.value + 'px'
    }
})
复制代码


H9QW80BJU%Z_QD6MCOGL2A0.png


其实mounted和updated生命周期函数中的内容是一样的，那么就可以使用一种简写的方式。


app.directive('pos', (el, binding) => {
    el.style.top = binding.value + 'px'
})
复制代码


  • directive函数中第二个参数改为一个函数，同样接收el和binding两个参数，这样就可以同时实现mounted和updated生命周期函数了。


绑定属性


以前的内容中，我们可以通过v-bind:属性名亦或者v-on:事件名的方式绑定一些自定义的名称，那么在自定义指令里面是不是也可以绑定自定义属性呢？


<script>
  const app = Vue.createApp({
    template: `
      <div v-pos:right="100" style="position: absolute;">
        Hello World
      </div>
    `
  });
  app.directive('pos', (el, binding) => {
    console.log('binding:', binding)
    el.style.top = binding.value + 'px'
  })
  const vm = app.mount('#root');
</script>
复制代码


W%WHAC4{1RC8JCBDFA0)F]C.png


在directive函数中打印了binding的值，会看到里面有一个arg就是我们在DOM元素中通过自定义指令绑定的属性，而value就是自定义指令后面传递的值。


那么我们就可以通过binding.arg的方式去使用自定义指令绑定的属性。


app.directive('pos', (el, binding) => {
    el.style[binding.arg] = binding.value + 'px'
})
复制代码


P8$WY`7]@UHO9Y(L0HJ]NDP.png


总结


本章节主要讲解了自定义指令directive，它也分为全局和局部，类似于组件的定义方式。还讲解了自定义指令传值、绑定属性的方式，希望大家多写写代码熟悉它的使用方法。大家一起加油！！💪🏻

文章标签：
JavaScript
关键词：
自定义指令VUE.js
vue3自定义指令VUE.js
蜡笔小心_
目录
相关文章
那年春天
|
9天前
vue3+Ts 二次封装ElementUI form表单
【10月更文挑战第8天】
那年春天
157 59
你都不懂
|
3天前
|
JavaScript 容器
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
你都不懂
19 2
LKIDTI数据
|
6天前
|
JavaScript API
Vue3实现面板分割
Vue3实现面板分割
LKIDTI数据
20 1
chnjames
|
5天前
|
移动开发 JavaScript 前端开发
💻揭秘！如何用 Vue 3 实现酷炫的色彩魔方游戏✨
本文分享了开发基于Canvas技术的小游戏"色彩魔方挑战"的完整过程。游戏旨在考验玩家的观察力和耐心，通过随机生成的颜色矩阵和一个变化点，玩家需在两幅画布中找出不同的颜色点。文章详细讲解了游戏的核心功能，包括随机颜色矩阵生成、点的闪烁提示、自定义配色方案等。此外，作者展示了使用Vue 3和TypeScript开发的代码实现，带领读者一步步深入了解游戏的逻辑与细节。
chnjames
120 69
大树营养快线
|
2天前
|
JavaScript 搜索推荐 UED
vue的自定义指令
【10月更文挑战第14天】Vue 自定义指令为我们提供了一种强大的工具，使我们能够更灵活地控制和扩展 Vue 应用的行为。通过合理地使用自定义指令，可以提高开发效率，增强应用的功能和用户体验。
大树营养快线
7 1
我是快乐的嘟嘟
|
3天前
|
JavaScript
vue3 生命周期
【10月更文挑战第14天】vue3 生命周期
我是快乐的嘟嘟
10 2
谢妹纸
|
4天前
|
JavaScript 前端开发
Vue 2 和 Vue 3 之间响应式区别
10月更文挑战第7天
谢妹纸
17 2
邹荣乐
|
5天前
|
存储 前端开发 中间件
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
邹荣乐
27 0
邹荣乐
|
5天前
|
JavaScript 前端开发 API
vue3中常用插件的使用方法：按需引入自定义组件，自动导入依赖包，自动生成路由，自动生成模拟数据
vue3中常用插件的使用方法：按需引入自定义组件，自动导入依赖包，自动生成路由，自动生成模拟数据
邹荣乐
92 0
前端徐徐
|
5天前
|
JavaScript 前端开发 算法
对比一下Vue2 和 Vue3？—— 8个方面给你答案
本文介绍了 Vue 和 React 的起源、核心思想、表现形式、API 差异、社区差异、升级方向、响应式原理、Diff 算法、事件机制，并进行了总结。Vue 以其渐进式框架设计和简洁性著称，而 React 则强调单向数据流和灵活性。两者均支持组件化开发和虚拟 DOM，适用于不同的开发场景。
前端徐徐
14 0
对比一下Vue2 和 Vue3？—— 8个方面给你答案

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    使用vue-demi来开发一个vue2和vue3组件
  • 3
    OSS对象存储后端实现+Vue实现图片上传【基于若依管理系统开发】
  • 4
    docker nginx 部署 vue项目
  • 5
    vue3 使用第三方插件问题 bundler to alias “vue“ to “vue/dist/vue.esm-bundler.js
  • 6
    浅尝Vue最新状态管理工具Pinia(实战使用Pinia管理登录状态)
  • 7
    VUE element-ui之table表格前端自动过滤（筛选），不调用数据接口筛选表格，方法
  • 8
    vue2 el-select 改造成下拉树，支持数据回显
  • 9
    解决 vue-router 报错：Navigation cancelled from “/...“ to “/...“ with a new navigation
  • 10
    手撸vue3核心源码——响应式原理(ref)
  • 1
    搞懂Vue一篇文章就够了
    37
  • 2
    Vue3的 组件事件
    52
  • 3
    Vue 异步组件
    31
  • 4
    Vue自定义指令的三个方法
    31
  • 5
    vue3组件之间传值通讯
    48
  • 6
    vue引入vuex
    53
  • 7
    vue怎么自定义底部导航
    58
  • 8
    vue3引入element-plus完整步骤
    646
  • 9
    vue3引入vant完整步骤
    410
  • 10
    vue3实现文字垂直滚动
    176

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战
  • React 入门教程开发文档
  • JavaScript入门与实战

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 利用编译将 Vue 组件转成 React 组件

    • 相关实验场景

    更多
  • 函数计算入门-HelloWorld应用开发
    • 下一篇
    AI助理直击要害，从繁复中提炼精华——使用CDN加速访问OSS存储的图片