【Vue3 从入门到实战 进阶式掌握完整知识体系】025-Vue中的高级语法：自定义vue指令

最新推荐文章于 2024-06-07 13:26:13 发布
最新推荐文章于 2024-06-07 13:26:13 发布
阅读量301 收藏
点赞数
分类专栏： Vue.js 文章标签： vue 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29689343/article/details/118370404
版权

文章目录

2、自定义vue指令

使用ref获焦点

可以通过 ref 获得 DOM ，然后操作 DOM 实现获取焦点

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

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


  const vm = app.mount('#root');
</script>

</html>

运行结果

使用ref也能实现，但无法复用！

image-20210614104922045.png

自定义指令实现获取焦点

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  const app = Vue.createApp({
    // 使用 v-focus
    template: `
        <div>
          <input v-focus />
        </div>
    `
  });

  // 自定义指令
  app.directive("focus",{
    // 时间：2021年06月15日 16时39分43秒
    // 这里接收一个参数，参数就是 DOM 节点
    mounted(el){
      el.focus();
    }
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210614105243711.png

局部自定义指令

类似组件、mixin，上面是全局自定义指令，我们来写一个局部自定义指令（写法有差异）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  // 局部自定义指令
  const directives = {
    focus: {
      mounted(el){
        el.focus();
      }
    }
  }

  const app = Vue.createApp({
    // 引入自定义指令
    // 理论写法
    // directives: directives,
    // 解构写法（简化）
    directives,
    // 使用 v-focus
    template: `
        <div>
          <input v-focus />
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2JgpKwtB-1625061243455)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/06c7ba050c314771a39f6347c15e8b65~tplv-k3u1fbpfcp-watermark.image)]

说明

我们上面使用了生命周期函数 mounted ，实际上其他的生命周期函数也可以使用在自定义指令里面！

带属性值的自定义指令

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
  <!-- 样式 -->
  <style>
    .header{
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  // 局部自定义指令
  const directives = {
    pos: {
      mounted(el, binding){
        el.style.top = binding.value + 'px';
      }
    }
  }

  const app = Vue.createApp({
    // 引入自定义指令
    directives,
    // 使用 v-pos
    template: `
        <div v-pos='50' class="header">
          <input />
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210614110924832.png

修改数据并使数据生效

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
  <!-- 样式 -->
  <style>
    .header{
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  // 局部自定义指令
  const directives = {
    pos: {
      // mounted只会执行一次，因此 data 里面的 top 改变不会反映到页面上
      mounted(el, binding){
        el.style.top = binding.value + 'px';
      },
      // 我们写一个 updated 生命周期函数
      updated(el, binding){
        el.style.top = binding.value + 'px';
      }
    }
  }

  const app = Vue.createApp({
    // 引入自定义指令
    directives,
    // 使用数据代替 50
    data(){
      return {
        top: 60
      }
    },
    // 使用 v-pos
    template: `
        <div v-pos='top' class="header">
          <input />
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210614111541278.png

简写

// 下面写法1等价于写法2，只要这两种等价，再加生命周期函数就不等价了
// 写法1
app.directive("focus", (el, binding) => {
    el.style.top = binding.value + 'px';
});

// 写法2
app.directive("focus",{
    mounted(el, binding){
        el.style.top = binding.value + 'px';
    },
    updated(el, binding){
        el.style.top = binding.value + 'px';
    }
});

自定义指令的属性

类似 v-ops:abc，abc即是属性，下面我们来看看如何获取这个abc

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
  <!-- 样式 -->
  <style>
    .header{
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  // 局部自定义指令
  const directives = {
    pos: {
      mounted(el, binding){
        console.log(binding);
        console.log(binding.arg);
        el.style.top = binding.value + 'px';
      },
    }
  }

  const app = Vue.createApp({
    // 引入自定义指令
    directives,
    // 使用数据代替 50
    data(){
      return {
        top: 60
      }
    },
    // 使用 v-pos
    template: `
        <div v-pos:abc='top' class="header">
          <input />
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210614112247871.png

优化上面的距离设置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
  <!-- 样式 -->
  <style>
    .header{
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="root"></div>
</body>

<script>

  // 局部自定义指令
  const directives = {
    pos: {
      mounted(el, binding){
        el.style[binding.arg] = binding.value + 'px';
      },
    }
  }

  const app = Vue.createApp({
    // 引入自定义指令
    directives,
    // 使用数据代替 50
    data(){
      return {
        top: 60
      }
    },
    // 使用 v-pos
    template: `
        <div v-pos:left='top' class="header">
          <input />
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

我们把left改成right等，也能够实现同样的效果！

image-20210614112540115.png

訾博ZiBo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue3 从入门到实战 进阶式掌握完整知识体系-探索组件的理念：组件间双向绑定高级内容（005）
weixin_42066070的博客
12-01 832
组件间双向绑定高级内容 不能写多个v-model但是可以写多个带属性的v-model:XXX <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid
Vue全家桶从基础入门到进阶项目实战第三篇中级进阶实战篇
06-20
本课程主要讲解vue实例常用属性和方法、自定义指令、自定义过滤器、过度、开发插件、组件及组件间的通信、使用axios发送http请求、使用Vue Router实现路由控制，使用webpack打包工具的用法、ES6的语法、webpack与...
Vue3 从入门到实战 进阶式掌握完整知识体系
m0_73617968的博客
09-07 597
了解的都知道，我这么不思进取的人怎么可能突发奇想的去了解一个工作中没用过的类，不出意外的，还是在今天做 LeetCode 347. 前 K 个高频元素题的时候，尝试了几次都不知道怎么做，看评论区发现这道题实际上应该是使用 优先级队列 来做，我才知道有优先级队列这么个东西。优先级队列，依旧是 顾名思义，优先级队列会自动按照元素的权值排列，也就是说，优先级队列其实有反 先进先出规则，但是其对外接口依旧是从队头取元素，队尾添加元素，再无其他存取方式，看起来就是一个队列。优先级队列其实是一个 披着队列外皮的堆。
浅析Vue3(vue3笔记之进阶篇)
最新发布
qq_32453495的博客
06-07 648
在我们实际项目开发中,往往会遇到跨组件通信、数据集中管理等需求,单靠手动管理状态会拙荆见肘。更强的团队协作约定与Vue DevTools集成,包括时间轴、组件内部审查和时间旅行测试模块化更新(HMR)服务端渲染(SSR)Pinia解决了以上问题,它是由Vue官方维护和更新,兼容Vue2 和Vue3版本,据官网描述,Pinia是为了探索Vuex下一个版本Vuex5而生,,它简单上手、对Typescript支持更友好提供了更完善的类型引导, Vue官方已经将其作为新的官方推荐状态管理库。
【Vue3 从入门到实战 进阶式掌握完整知识体系】007-Vue语法基础：列表循环渲染
訾博（ZiBo）的博客
06-20 507
文章目录7、列表循环渲染使用v-for渲染数组运行结果使用v-for渲染对象运行结果使用key优化性能运行结果控制数组给对象添加属性运行结果循环n次运行结果指定某元素不显示运行结果存在问题解决问题：使用template运行结果 7、列表循环渲染 使用v-for渲染数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com
【Vue3 从入门到实战 进阶式掌握完整知识体系】003-Vue语法基础：模板语法
訾博（ZiBo）的博客
06-17 511
文章目录3、常用模板语法官方文档简单插值语法运行结果插值语法内使用表达式运行结果插值语法中使用自定义函数运行结果使用v-html指令渲染html代码运行结果使用v-bind指令动态绑定属性值运行结果使用v-once指令使得插值内容不再改变运行结果使用v-if指令控制标签的加载与否show为true运行结果show为false运行结果使用v-on指令进行事件绑定运行结果简写运行结果动态绑定属性名运行结果动态绑定事件名运行结果阻止事件的默认行为运行结果 3、常用模板语法 官方文档 时间：2021年06月15日
【Vue3 从入门到实战 进阶式掌握完整知识体系】002-Vue语法基础：Vue中的应用和组件的基本部分解析、生命周期
訾博（ZiBo）的博客
06-17 510
文章目录二、Vue语法基础1、Vue中的应用和组件的基本部分代码运行结果2、理解Vue的生命周期函数*生命周期图代码运行结果关于模板Vue3的生命周期函数图Vue3全部的生命周期钩子与Vue2比较 二、Vue语法基础 1、Vue中的应用和组件的基本部分 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib
70G新课程！新技术新高度-Vue3+TypeScript前端全新技术荟萃 前端大师殿堂进阶高级实战
07-05
课程内容通过整合Vue3+TypeScript及相关技术栈的高级技术与开发特性，让同学们迅速掌握最新的开发技术，并能够直击应用于开发工作之中。 ├─1.邂逅Vue3和Vue3开发体验.mp4 ├─10.Vite3新增语法特性（⼆）....
Vue.js 3.0从入门到实战【配套资源】.zip
06-24
这个压缩包“Vue.js 3.0从入门到实战【配套资源】.zip”包含了两个重要的子文件：书配套代码.zip和视频配套代码.zip，它们分别对应于学习Vue.js 3.0理论知识的书籍和实践操作的视频教程的源代码。 1. **Vue.js 3.0...
vue 3.0学习笔记(从入门到精通)
10-07
本文将从入门到精通的角度详细介绍Vue 3.0的关键知识点。 首先，安装Vue 3.0的开发环境是至关重要的。你可以通过npm（Node Package Manager）全局安装Vue CLI的最新版本，命令为`npm I -g @vue/cli@next`。接着，...
首个 Vue3.x教程_Vue3.x+Ts+Vuex+Antd Ui框架入门进阶视频教程(34讲)-大地老师
01-30
核心文件分析、Vue模板语法、Vue事件、Vue表单、Vue双休数据绑定、Vue Dom操作以、JavaScript表达式 、条件判断、 计算属性、watch侦听器、Vue3集成Sass、Vue3.x todolist 待办事项、Vue3中的单文件组件、Vue3.x
【Vue3 从入门到实战 进阶式掌握完整知识体系】021-Vue中的动画：组件和元素切换动画的实现
訾博（ZiBo）的博客
06-29 276
文章目录3、组件和元素切换动画的实现代码运行结果使得它们”出入有序“运行结果第一次渲染页面就有动画效果运行效果多个单组件动画切换运行结果 3、组件和元素切换动画的实现 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
【Vue3 从入门到实战 进阶式掌握完整知识体系】022-Vue中的动画：列表动画
訾博（ZiBo）的博客
06-29 145
文章目录4、列表动画代码运行结果让其他列表项“温柔地”后移运行结果 4、列表动画 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init
【Vue3 从入门到实战 进阶式掌握完整知识体系】001-Vue语法初探
訾博（ZiBo）的博客
06-17 766
文章目录一、Vue语法初探1、第一个Vue程序hello world 代码运行结果我们在模板里面写一个变量运行结果使用mounted函数运行结果这告诉我们什么？2、反转字符串代码运行结果3、显示与隐藏代码显示状态隐藏状态4、了解循环和双向绑定代码运行结果往列表里面添加新的数据运行结果来点更有意思的运行结果5、组件概念初探先了解一下v-bind指令运行结果关于组件运行结果让组件灵活起来运行结果 一、Vue语法初探 1、第一个Vue程序 hello world 代码 <!DOCTYPE html>
【Vue3 从入门到实战 进阶式掌握完整知识体系】016-探索组件的理念：使用插槽和具名插槽解决组件内容传递问题
訾博（ZiBo）的博客
06-29 264
文章目录7、使用插槽和具名插槽解决组件内容传递问题通过插槽向子组件传标签运行结果除了标签还可以传递字符串、子组件运行结果一些说明slot插槽默认内容运行结果多个插槽运行结果插槽的简写运行结果作用域插槽运行结果作用域插槽解构写法运行结果 7、使用插槽和具名插槽解决组件内容传递问题 通过插槽向子组件传标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta htt
【Vue3 从入门到实战 进阶式掌握完整知识体系】005-Vue语法基础：样式绑定语法
訾博（ZiBo）的博客
06-19 355
文章目录5、样式绑定语法通过动态绑定 class 属性来控制样式的展示运行结果通过 class 对象来控制样式的展示运行结果通过 class 数组来控制样式的展示运行结果控制子组件样式的展示运行结果demo3问题解决运行结果动态绑定样式内容运行结果 5、样式绑定语法 通过动态绑定 class 属性来控制样式的展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me
【Vue3 从入门到实战 进阶式掌握完整知识体系】004-Vue语法基础：数据、方法、计算属性、侦听器
訾博（ZiBo）的博客
06-19 188
文章目录4、数据、方法、计算属性、侦听器代码运行结果计算属性和方法的不同运行结果侦听器运行结果侦听器参数代码运行结果总结 4、数据、方法、计算属性、侦听器 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo
【Vue3 从入门到实战 进阶式掌握完整知识体系】008-Vue语法基础：事件绑定
訾博（ZiBo）的博客
06-20 257
文章目录8、事件绑定基本使用运行结果绑定事件为表达式运行结果默认的event参数运行结果传参数运行结果传参数且获取默认的event参数运行结果一个事件执行多个函数运行结果事件修饰符stop运行结果其他时间修饰符参考鼠标修饰符、按键修饰符、系统修饰符参考文档 8、事件绑定 基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-
【Vue3 从入门到实战 进阶式掌握完整知识体系】009-Vue语法基础：表单中双向绑定指令的使用
訾博（ZiBo）的博客
06-22 392
9、表单中双向绑定指令的使用 input双向绑定写法 双向绑定：你变我也变，我变你也变，时时刻刻一起变！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-
Vue自定义v-bind:style指令详解及实战应用
本文将详细介绍如何在Vue中使用自定义指令，特别是针对`v-bind:style` 的应用。 首先，自定义指令是由`v-`前缀加上开发者自定义的名字组成的，它们的作用是提供了一种在Vue组件内部实现特定行为的途径，比如处理...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值