[Vue]自定义指令

最新推荐文章于 2024-06-16 13:00:26 发布
最新推荐文章于 2024-06-16 13:00:26 发布
阅读量3.1k 收藏 15
点赞数 2
分类专栏： Vue 学习笔记 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53022813/article/details/127243475
版权

前言

系列文章目录：
[Vue]目录
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版： https://note.youdao.com/s/5vP46EPC

视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

文章目录

1. 自定义指令

在vue中支持自定义指令，自定义指令声明在vue的directives节点中。

自定义指令本质为一个函数。

1.1 语法

定义自定义指令有两种形式的写法：

  • 函数形式

    new Vue({
	directives: {
		指令名(参数列表) {}
	}
})

  • 对象形式

    new Vue({
	directives: {
		指令名: {
			k: v,
			k: v,
			...
		}
	}
})

使用自定义指令，需要使用v-指令名的形式。

1.2 自定义指令的参数

自定义指令的处理函数接收两个参数，第一个参数为使用自定义指令的DOM元素(element)，第二个参数为指令的绑定信息(binding)。

2. 自定义指令实现数值放大10倍

需要实现的需求：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

2.1 查看自定义指令的参数

<!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>Document</title>
  </head>
  <body>
    <div id="root">
      <h2>n的值为: {{n}}</h2>
      <h2>n放大10倍对应的值为: <span v-big="n"></span></h2>
      <button @click="n++">n++</button>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        n: 0,
      },
      directives: {
        big(element, bingding) {
          console.log('element: ')
          console.log(element)
          console.log('binding: ')
          console.log(bingding)
        },
      },
    })
  </script>
</html>

在这里插入图片描述

2.2 需求的实现

实现把绑定的数值放大10倍，然后将放大后的数值放到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>Document</title>
  </head>
  <body>
    <div id="root">
      <h2>n的值为: {{n}}</h2>
      <h2>n放大10倍对应的值为: <span v-big="n"></span></h2>
      <button @click="n++">n++</button>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        n: 0,
      },
      directives: {
        big(element, bingding) {
          // 操作DOM元素，将放大后的数值放入DOM元素中
          // bingding.value 获取当前指令绑定的表达式的值
          // element.innerText 将放大后的数值放入DOM元素中
          element.innerText = bingding.value * 10
        },
      },
    })
  </script>
</html>

在这里插入图片描述

2.3 自定义指令调用的时机

2.3.1 指令与元素成功绑定时（初始化页面）

<!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>Document</title>
  </head>
  <body>
    <div id="root">
      <h2>n的值为: {{n}}</h2>
      <h2>n放大10倍对应的值为: <span v-big="n"></span></h2>
      <button @click="n++">n++</button>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        n: 0,
      },
      directives: {
        big(element, bingding) {
          console.log('自定义指令 big 被调用...')
          element.innerText = bingding.value * 10
        },
      },
    })
  </script>
</html>

在这里插入图片描述

2.3.2 所在的模板被重新解析时

自定义指令被调用的时机，不仅是在与自定义指令相关的数据改变时，只要自定义指令所在的模板被重新解析，自定义指令就会被调用。

<!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>Document</title>
  </head>
  <body>
    <div id="root">
      <h2>n的值为: {{n}}</h2>
      <h2>n放大10倍对应的值为: <span v-big="n"></span></h2>
      <button @click="n++">n++</button>
      <h2>x的值为: {{x}}</h2>
      <button @click="x++">x++</button>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        n: 0,
        x: 100
      },
      directives: {
        big(element, bingding) {
          console.log('自定义指令 big 被调用...')
          element.innerText = bingding.value * 10
        },
      },
    })
  </script>
</html>

在这里插入图片描述

3. 自定义指令让其所绑定的input元素默认获取焦点

需要实现的需求：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

3.1 需求实现

<!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>Document</title>
  </head>
  <body>
    <div id="root">
      <h2>n的值为: {{n}}</h2>
      <h2>n放大10倍对应的值为: <span v-big="n"></span></h2>
      <button @click="n++">n++</button> <br><br>
      <input type="text" v-fbind:value="n">
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        n: 0
      },
      directives: {
        big(element, bingding) {
          element.innerText = bingding.value * 10
        },
        // 让指令fbind所绑定的input元素默认获取焦点
        fbind(element, binding) {
          // 将n的值放入input中
          element.value = binding.value
          // 然后input获取焦点
          element.focus()
        }
      },
    })
  </script>
</html>

观察运行结果发现，input输入框并没有在最开始默认获取焦点，而是在点击按钮n+1后才自动获取焦点。
在这里插入图片描述
在这里插入图片描述

3.2 需求未实现的解释

通过操作DOM元素，让input输入框获取焦点，操作时，input输入框必须出现在页面上，否则input输入框获取焦点的代码不会在正常的时机生效，就达不到我们所需要的效果。

使用js操作DOM进行模拟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		<button id="btn">创建一个输入框</button>
		
		<script type="text/javascript" >
			const btn = document.getElementById('btn')
			btn.onclick = ()=>{
				// 创建input输入框
				const input = document.createElement('input')
				// 输入框的value值默认为99
				input.value = 99
				// input输入框加入页面
				document.body.appendChild(input)
				// 输入框获取焦点
				input.focus()
				// 控制台输出打印新建的输入框的父元素
				console.log(input.parentElement)
			}
		</script>
	</body>
</html>

新建输入框并默认获取焦点的效果正常实现
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		<button id="btn">创建一个输入框</button>
		
		<script type="text/javascript" >
			const btn = document.getElementById('btn')
			btn.onclick = ()=>{
				// 创建input输入框
				const input = document.createElement('input')
				// 输入框的value值默认为99
				input.value = 99

				// 输入框获取焦点
				input.focus()
				// 控制台输出打印新建的输入框的父元素
				console.log(input.parentElement)

				// input输入框加入页面
				document.body.appendChild(input)
				
			}
		</script>
	</body>
</html>

由于input输入框还未放入页面，所以无法操作input使其获取焦点，同时也无法获取input输入框的父元素。
在这里插入图片描述

与上述示例代码同理，在页面进行初始化时，vue会先进行解析，页面解析完成后才会将元素放入页面并进行展示，vue在解析时会先将指令与元素进行绑定，这个时候自定义指令中的处理函数会先执行一次，但是此时由于页面中的元素还未在页面上，所以处理函数中的让输入框获取焦点的代码无法正常生效。

点击按钮n+1后，input输入框会获取焦点，是由于n值改变，vue会对页面重新进行解析，此时输入框已经出现在页面中了，所以获取焦点的代码能够生效。

3.3 对象形式自定义指令

为了解决该问题，可以使用对象形式自定义指令，在自定义指令对应的对象中，可以设置不同的函数，在自定义指令执行的不同时刻，vue会调用不同的函数。

对象形式自定义指令：

new Vue({
	directives: {
		指令名: {
			// 指令与元素成功绑定时被调用
			bind() {},
			// 指令所在的元素被插入页面时调用
			inserted() {},
			// 指令所在的模板被重新解析时调用
			update() {}
		}
	}
})

<!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>Document</title>
  </head>
  <body>
    <div id="root">
      <h2>n的值为: {{n}}</h2>
      <h2>n放大10倍对应的值为: <span v-big="n"></span></h2>
      <button @click="n++">n++</button> <br /><br />
      <input type="text" v-fbind:value="n" />
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        n: 0,
      },
      directives: {
        big(element, bingding) {
          element.innerText = bingding.value * 10
        },
        // 对象形式自定义指令
        fbind: {
          // 指令与元素成功绑定时被调用
          bind() {
            console.log('bind')
          },
          // 指令所在的元素被插入页面时调用
          inserted() {
            console.log('inserted')
          },
          // 指令所在的模板被重新解析时调用
          update() {
            console.log('update')
          },
        },
      },
    })
  </script>
</html>

在这里插入图片描述

3.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, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root">
      <h2>n的值为: {{n}}</h2>
      <h2>n放大10倍对应的值为: <span v-big="n"></span></h2>
      <button @click="n++">n++</button> <br /><br />
      <input type="text" v-fbind:value="n" />
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        n: 0,
      },
      directives: {
        big(element, bingding) {
          element.innerText = bingding.value * 10
        },
        // 对象形式自定义指令
        fbind: {
          // 指令与元素成功绑定时被调用
          bind(element,binding) {
            // 为input输入框的value赋值
            // 初始化input的value值
            element.value = binding.value
          },
          // 指令所在的元素被插入页面时调用
          inserted(element,binding) {
            // 默认初始获取焦点
            element.focus()
          },
          // 指令所在的模板被重新解析时调用
          update(element,binding) {
            // 重新解析模板时，更新input的value值
            element.value = binding.value
          },
        },
      },
    })
  </script>
</html>

在这里插入图片描述
在这里插入图片描述

4. 自定义指令注意点

4.1 指令名多个单词之间使用短线符连接

指令名多个单词之间使用短线符连接之后，在自定义指令的声明定义时，需要使用引号进行包裹。

      directives: {
        // 完整写法
        // 'big-number': function(element, bingding) {
        //   element.innerText = bingding.value * 10
        // },
        // 简写
        'big-number'(element, bingding) {
          element.innerText = bingding.value * 10
        },
      },

<!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>Document</title>
  </head>
  <body>
    <div id="root">
      <h2>n的值为: {{n}}</h2>
      <h2>n放大10倍对应的值为: <span v-big-number="n"></span></h2>
      <button @click="n++">n++</button> <br /><br />
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        n: 0,
      },
      directives: {
        // 完整写法
        // 'big-number': function(element, bingding) {
        //   element.innerText = bingding.value * 10
        // },
        // 简写
        'big-number'(element, bingding) {
          element.innerText = bingding.value * 10
        },
      },
    })
  </script>
</html>

在这里插入图片描述

4.2 自定义指令中的this

自定义指令中的this都指向window，不指向vue实例对象。

<!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>Document</title>
  </head>
  <body>
    <div id="root">
      <h2>n的值为: {{n}}</h2>
      <h2>n放大10倍对应的值为: <span v-big-number="n"></span></h2>
      <button @click="n++">n++</button> <br /><br />
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        n: 0,
      },
      directives: {
        // 简写
        'big-number'(element, bingding) {
          element.innerText = bingding.value * 10
          console.log(this)
        },
      },
    })
  </script>
</html>

在这里插入图片描述

5. 定义全局自定义指令

5.1 语法

5.1.1 函数形式

Vue.directive( '指令名', 回调函数 )

5.1.2 对象形式

Vue.directive( '指令名', 配置对象 )

5.2 全局自定义指令实现需求

<!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>Document</title>
  </head>
  <body>
    <div id="root">
      <h2>n的值为: {{n}}</h2>
      <h2>n放大10倍对应的值为: <span v-big="n"></span></h2>
      <button @click="n++">n++</button> <br /><br />
      <input type="text" v-fbind:value="n">
    </div>

    <hr />

    <div id="root2">
      <h2>n的值为: {{n}}</h2>
      <h2>n放大10倍对应的值为: <span v-big="n"></span></h2>
      <button @click="n++">n++</button> <br /><br />
      <input type="text" v-fbind:value="n">
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    // 定义全局自定义指令
    // 函数形式
    Vue.directive('big', function (element, bingding) {
      element.innerText = bingding.value * 10
    })
    // 配置对象形式
    Vue.directive('fbind', {
      bind(element, binding) {
        element.value = binding.value
      },
      inserted(element, binding) {
        element.focus()
      },
      update(element, binding) {
        element.value = binding.value
      },
    })

    const vm = new Vue({
      el: '#root',
      data: {
        n: 0,
      },
    })

    new Vue({
      el: '#root2',
      data: {
        n: 0,
      },
    })
  </script>
</html>

在这里插入图片描述

6. 自定义指令 总结

  • 一、定义语法：

    • (1).局部指令：

      new Vue({															
	directives:{指令名:配置对象}     		
}) 		

      new Vue({
	directives{指令名:回调函数}
})

    • (2).全局指令：

      Vue.directive(指令名,配置对象) 

      Vue.directive(指令名,回调函数)

  • 二、配置对象中常用的3个回调：

    • (1).bind：指令与元素成功绑定时调用。
    • (2).inserted：指令所在元素被插入页面时调用。
    • (3).update：指令所在模板结构被重新解析时调用。

  • 三、备注：

    • 1.指令定义时不加v-，但使用时要加v-；
    • 2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
小炜1128
关注
  • 2
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue自定义指令详解
08-29
Vue自定义指令详解 在Vue.js中，自定义指令是一种强大的机制，允许开发者将数据的变化映射为DOM行为。下面，我们将详细介绍Vue自定义指令的相关知识点。 注册自定义指令 在Vue.js中，可以使用`directive`方法注册...
基于Vue自定义指令实现按钮级权限控制思路详解
08-27
本文将深入探讨如何利用Vue自定义指令来实现按钮级别的权限控制。 首先，权限控制的基础在于用户认证。当用户成功登录并验证其凭证（如账号和密码）后，服务端会返回一个token。这个token通常被存储在客户端的...
Vue自定义指令
前端程序媛_Ying博客
04-05 1320
缺点：只能在局部使用，不能复用。注意：需要定义一个标识符 v 开头-- 方式二、自定义指令 -->focus: {// focus: {} 这个对象里放的是生命周期的函数（自定义指令），会把元素 el 传过来// 当v-focus应用到 input上，input被挂载到DOM上后，就会回调 mounted 生命周期函数console.log('v-focus 应用到元素被挂载了', el)el?.focus()// 2.方式二：自定义指令(局部指令)
vue自定义指令用法
qq_26642611的博客
12-23 1551
1、vue中的指令有： v-text v-html v-show v-if v-else v-else-if v-for v-on v-bind v-model v-pre v-cloak v-once 2.自定义指令语法： // 注册一个全局自定义指令,例如 `v-focus` Vue.directive('指令名字', 钩子) //注意：自定义指令名字不...
vue中的自定义指令
最新发布
无远弗届
06-16 1118
Vue自定义指令提供了一种强大的方法来扩展Vue的功能。它们允许开发者直接对DOM元素进行低层次操作，而无需编写大量的模板或者JavaScript代码。自定义指令可以响应Vue的响应式系统，从而在数据变化时触发相应的DOM更新。Vue提供了一些内置指令，如v-modelv-ifv-for等，它们已经覆盖了很多常见的场景。然而，内置指令的功能是有限的，自定义指令则提供了更多的灵活性和控制力。动画和过渡：实现复杂的动画效果。DOM操作：在不使用额外库的情况下，直接操作DOM。表单验证。
这15个Vue自定义指令，让你的项目开发爽到爆
weixin_59124055的博客
03-02 933
Vue 自定义指令。
vue指令
fake_8的博客
12-09 2564
vue指令
vue指令大全
qq_43235503的博客
04-13 1584
vue指令大全
vue自定义指令实现方法详解
10-17
Vue自定义指令提供了一种灵活的方式来扩展Vue的默认功能，使得我们可以更精确地控制DOM操作。通过定义不同的钩子函数，我们可以实现各种复杂逻辑，如事件监听、动画效果、DOM操作等。理解并掌握自定义指令的使用，...
Vue自定义指令封装节流函数的方法示例
08-27
Vue自定义指令封装节流函数的方法示例 今天，我们来讨论 Vue 自定义指令封装节流函数的方法示例。节流函数是一种常用的前端开发技术，用于避免过多的性能消耗。在《JavaScript高级程序设计》一书中，就有一个典型的...
Vue自定义指令实现v-on及v-model
lightning_1的博客
12-02 1597
我们来模仿v-on和v-model实现简易的v-on和v-model，带你彻底理解自定义指令的使用，运行前请先引入vue2.x
Vue自定义指令的三个方法
一个努力不被优化的程序员
02-21 1361
除了 Vue 内置的一系列指令 (比如v-model或v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。组件和组合式函数。组件是主要的构建模块，而组合式函数则侧重于有状态的逻辑。另一方面，自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。// 在模板中启用 v-focus
vue常用指令
qq_42108331的博客
05-28 1054
vue常用指令
Vue中的常用指令
weixin_55772633的博客
02-01 916
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
vue如何自定义指令
小菜鸟的博客
12-13 1011
vue如何自定义指令 vue自定义指令借助 directives 局部注册指令 directives: { color(el) { el.style.color = "red"; console.log("自定义函数"); }, }, 全局main下面注册指令 这种写法可以让指令绑定在某个生命周期执行时间段中 app.directive('focus', { // 当被绑定的元素挂载到 DOM 中时…… beforeMount(el) {
Vue2 局部自定义指令 / 全局自定义指令
技术前端，忠于热爱 @0.活在风浪里
12-06 3715
全局自定义指令 1 在mian.js写 2 在需要的组件使用 局部自定义指令 directives全局没有s 局部加s 写法也不同 script> export default { data() { return { color: "red",//为 变量背景色局部自定义指令 写值 }; }, methods: {}, components: {}, created() {}, //局部 的自定义指令directives与da.
vue 自定义指令
05-25
Vue 自定义指令是 Vue 中一种非常有用的扩展能力，它允许你在标准的模板语法中使用自定义行为，而不需要编写新的组件或者混入。 Vue 提供了全局的 `Vue.directive()` 方法来注册自定义指令。该方法接受两个参数，第...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值