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

1410

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>
复制代码

运行结果

image-20210614105938949.png

说明

我们上面使用了生命周期函数 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

© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
前端
喜欢就支持一下吧
点赞0 分享
AI-robot的头像-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
14年前 2.6W+
机器学习之随机森林回归篇（RandomForestRegressor）-一一网
机器学习之随机森林回归篇（RandomForestRegressor）
机器学习之随机森林回归篇（RandomForestRegressor）
4年前 4202
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS-一一网
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
4年前 3895
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞-一一网
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
19年前 3842
Wireshark之抓包文件保存-一一网
Wireshark之抓包文件保存
Wireshark之抓包文件保存
4年前 3406
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3135
相关推荐
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3135
手摸手教你实现vue的动态路由（addRoute版）-一一网
手摸手教你实现vue的动态路由（addRoute版）
手摸手教你实现vue的动态路由（addRoute版）
4年前 3118
Unity实用功能之使用TextMeshPro组件-一一网
Unity实用功能之使用TextMeshPro组件
Unity实用功能之使用TextMeshPro组件
4年前 3062
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …-一一网
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …...
4年前 2847
Windi CSS 在 Vue3 + Vite 项目中的使用-一一网
Windi CSS 在 Vue3 + Vite 项目中的使用
Windi CSS 在 Vue3 + Vite 项目中的使用
3年前 2728
vue3 使用 qrcode.vue 生成二维码-一一网
vue3 使用 qrcode.vue 生成二维码
vue3 使用 qrcode.vue 生成二维码
4年前 2621
搜索
开启精彩搜索
世界，您好！-一一网
3.7W+人已阅读
世界，您好！
TOP1
番茄社区无限观看+付费视频破解教程-一一网
番茄社区无限观看+付费视频破解教程
5年前3.2W+人已阅读
TOP2
香蕉视频v3.8.3_VIP会员破解教程-一一网
香蕉视频v3.8.3_VIP会员破解教程
5年前3.1W+人已阅读
TOP3
[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网
密码保护：[桜井宁宁]COS和泉纱雾超可爱写真福利集
5年前2.8W+人已阅读
TOP4
[桜井宁宁] 爆乳奶牛少女cos写真-一一网
密码保护：[桜井宁宁] 爆乳奶牛少女cos写真
5年前2.8W+人已阅读
TOP5
快猫v1.1.7会员破解版_最新快猫vip破解教程大全-一一网
快猫v1.1.7会员破解版_最新快猫vip破解教程大全
5年前2.7W+人已阅读
TOP6
标签云
默认路由黑裙黑群晖麦克风车机鸿蒙系统鸿蒙系统鸿蒙OS鸿蒙驱动软件驱动题库音频剪辑音乐剪辑面板面具静态雷石集群随机阿里云