Vue学习—深入剖析自定义指令

最新推荐文章于 2023-07-20 15:51:08 发布
最新推荐文章于 2023-07-20 15:51:08 发布
阅读量362 收藏 1
点赞数
分类专栏： vue学习 文章标签： vue 自定义指令
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xun__xing/article/details/108517253
版权

自定义指令

一、自定义指令

1.简介

我们可以自己写一个自定义指令去操作DOM元素，以达到代码复用的目的。注意，在 Vue 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

全局注册指令：

Vue.directive('focus', {/** */})

局部注册指令

const vm = new Vue({
  el: '#app',
  directives: {
    focus: {/** */}
  }
})

使用：

<input v-focus></input>

例如，写一个自动聚焦的输入框：

<div id="app">
    <!-- <input type="text" v-focus> -->
    <my-input></my-input>//只能同时对焦一个哦
</div>
<script>
    Vue.directive('focus',{
        inserted: function(el){
            el.focus();
        }
    });
    Vue.component('my-input',{
        template: `
            <input type='text' v-focus>
        `
    });
    const vm = new Vue({
        el: '#app',
        data: {

        }
    });
</script>

此时，在input元素上使用 v-focus 指令就可以实现自动聚焦了。

2.钩子函数

自定义指令对象提供了钩子函数供我们使用，这些钩子函数都为可选。

1.bind

只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

2.inserted

被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已被插入文档中)。

3.update

所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。

4.componentUpdated

指令所在组件的 VNode 及其子 VNode 全部更新后调用。

5.unbind

只调用一次，指令与元素解绑时调用(被绑定的Dom元素被Vue移除)。

<div id="app">
    <my-input :name='name' v-if='show'></my-input>
</div>
<script>
    Vue.directive('focus',{
        bind () {
            console.log('bind');
        },
        inserted (el) {
            // el.focus();
            console.log('inserted');
        },
        update () {
            console.log('update');
        },
        componentUpdated () {
            console.log('componentUpdated');
        },
        unbind() {
            console.log('unbind');
        }
    });
    Vue.component('my-input',{
        props: ['name'],
        template: `
            <input type='text' v-focus="name">
        `
    });
    const vm = new Vue({
        el: '#app',
        data: {
            name: 'jimo',
            show: true
        }
    });
</script>

在这里插入图片描述

3.钩子函数参数

  • el: 指令所绑定的元素，可以用来直接操作DOM。

  • binding：对象，包含以下属性：

    • name：指令名，不包括 v- 前缀。
    • value：指令的绑定值，例如：v-focus="name" 中，绑定值为 'jimo'。
    • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    • expression：字符串形式的指令表达式。例如 v-focus="1 + 1" 中，表达式为 "1 + 1"。
    • arg：传给指令的参数，可选。例如 v-focus:src 中，参数为 "src"。
    • modifiers：一个包含修饰符的对象。例如：v-focus:src.x.y 中，修饰符对象为 { x: true, y: true }。

  • vnode：Vue 编译生成的虚拟节点。
    在这里插入图片描述

  • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

4.练习

1.模拟 v-show

// 绑定的值为false，display为none，值为true，display为""
Vue.directive('myshow',{
    bind(el,binding){
        const { value } = binding;
        const display = value ? '' : 'none';
        el.style.display = display;
    },
    update(el,binding){
        const { value } = binding;
        const display = value ? '' : 'none';
        el.style.display = display;
    }
});

2.模拟 v-model

// 1. 通过绑定的数据，给元素设置value
// 2. 当触发input事件时，去更改数据的值
// 3. 更改数据后，同步input的value值
Vue.directive('mymodel', {
  bind (el, binding, vnode) {
    const vm = vnode.context;
    const { value, expression } = binding;
    el.value = value;

    el.oninput = function (e) {
      const inputVal = el.value;
      vm[expression] = inputVal;
    }
  },
  update (el, binding) {
    const { value } = binding;
    el.value = value;
  },
})

3.写一个 v-slice（截取文本框）

<div id="app">
    <input type="text" v-slice:7.number='name'>
    <!-- <my-input :name='name'></my-input> -->
    {{ name }}

</div>
<script>
	Vue.directive('slice', {
	    bind (el, binding, vnode) {
	    	const vm = vnode.context;
	    	let { value, expression, arg, modifiers } = binding;

	    	if(modifiers.number) {
	      		value = value.replace(/[^0-9]/g, '');
	    	}

	    	el.value = value.slice(0, arg);
	    	vm[expression] = value.slice(0, arg);

	    	el.oninput = function (e) {
	      		let inputVal = el.value;

 	     		if(modifiers.number) {
 	       			inputVal = inputVal.replace(/[^0-9]/g, '');
 	     		}

	      		el.value = inputVal.slice(0, arg);
	      		vm[expression] = inputVal.slice(0, arg);
	    	}
	  },
	  update (el, binding, vnode) {
	    	const vm = vnode.context;
	    	let { value, arg, expression, modifiers } = binding;

	    	if(modifiers.number) {
	      		value = value.replace(/[^0-9]/g, '');
	    	}

	    	el.value = value.slice(0, arg);
	    	vm[expression] = value.slice(0, arg);
	  	},
	});
    const vm = new Vue({
        el: '#app',
        data: {
            name: 'jimohuabukai',
            show: true
        }
    });
</script>

在这里插入图片描述

4.动态指令参数

指令的参数可以是动态的。如：v-directive:[arguments]="value，argument参数可以根据组件实例数据进行更新。(此时要在update中监听改变argument后)

重写 v-slice

Vue.directive('slice', {
  bind (el, binding, vnode) {
    const vm = vnode.context;
    let { value, expression, arg, modifiers } = binding;

    if(modifiers.number) {
      value = value.replace(/[^0-9]/g, '');
    }

    el.value = value.slice(0, arg);
    vm[expression] = value.slice(0, arg);

    el.oninput = function (e) {
      let inputVal = el.value;

      if(modifiers.number) {
        inputVal = inputVal.replace(/[^0-9]/g, '');
      }

      el.value = inputVal.slice(0, arg);
      vm[expression] = inputVal.slice(0, arg);
    }
  },
  update (el, binding, vnode) {
    const vm = vnode.context;
    let { value, arg, expression, modifiers } = binding;
    
    if(modifiers.number) {
      value = value.replace(/[^0-9]/g, '');
    }

    el.value = value.slice(0, arg);
    vm[expression] = value.slice(0, arg);

    el.oninput = function (e) {
      let inputVal = el.value;

      if(modifiers.number) {
        inputVal = inputVal.replace(/[^0-9]/g, '');
      }

      el.value = inputVal.slice(0, arg);
      vm[expression] = inputVal.slice(0, arg);
    }
  }
});

5.函数简写

当想在 bind 和 update 中触发相同行为，而不关心其他钩子时，可以写成函数的形式：

Vue.directive('myshow', (el, binding) => {
  const { value } = binding;
  const display = value ? '' : 'none';
  el.style.display = display;
});

Vue.directive('slice', (el, binding, vnode) => {
  const vm = vnode.context;
  let { value, expression, arg, modifiers } = binding;

  if(modifiers.number) {
    value = value.replace(/[^0-9]/g, '');
  };

  el.value = value.slice(0, arg);
  vm[expression] = value.slice(0, arg);

  el.oninput = function (e) {
    let inputVal = el.value;

    if(modifiers.number) {
      inputVal = inputVal.replace(/[^0-9]/g, '');
    };

    el.value = inputVal.slice(0, arg);
    vm[expression] = inputVal.slice(0, arg);
  }
});

6.对象字面量

如果自定义指令需要多个值，可以传入一个 JS 对象字面量。指令函数能够接受所有合法的 JS 表达式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
});
飞羽逐星
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue自定义指令实现方法详解
10-17
主要介绍了vue自定义指令实现方法,结合实例形式分析了vue.js自定义指令相关定义、注册、使用方法及操作注意事项,需要的朋友可以参考下
ES6系列一：let 与 const
p1967914901的博客
11-23 731
ES6系列一：let 与 constES6系列一：let 与 constvar作用域变量提示重复声明letconstvar、let、const 的区别变量提升暂时性死区块级作用域重复声明变量值的可修改性 ES6系列一：let 与 const var 作用域 在ES5中，用var声明的变量既是全局变量，也是顶层变量。 变量提示 无论是在全局作用域还是在局部作用域，使用var定义的变量都存着变量提升：Javascript引擎在预编译的时候，会讲代码中var定义的变量声明提升到当前作用域的最顶层。 例如： con
vue 权限指令
记录点滴
04-13 362
在开发后台管理系统中，按钮权限判断是必须的！以下是一个简易的权限判断指令，实际还需要结合自己业务来： 全局权限指令： // permission/index.js import store from 'store' export default { inserted(el, binding) { const { value } = binding co...
Vue自定义指令之按钮级别权限的管理
xyphf的博客
12-16 2231
Vue按钮级别权限控制
vue自定义指令
smileMrz的博客
03-06 124
vue2自定义指令的学习与使用，批量注册全局自定义指令，局部指令注册
Vue 自定义指令可以实现哪些有用的功能
太空编程
08-10 679
Vue 有一些很实用的指令v-showv-ifv-textv-htmlv-bindv-on可以帮助我们实现很复杂的功能，同时它还开辟了钩子供我们自己实现自定义指令。根据自己平时开发总结了一些可以通过指令实现的功能场景：控制页面元素显示与隐藏，可用作控制权限功能页面元素点击事件防抖与节流通过自定义指令控制图片懒加载针对页面特定元素添加自定义行为对输入内容进行过...
Vue自定义弹窗指令的实现代码
10-18
使用vue2.0实现自定义弹窗指令，当标签有该指令时，点击标签可以弹出弹窗。下面通过实例代码给大家介绍Vue自定义弹窗指令的相关知识，感兴趣的朋友一起看看吧
详解Vue.directive 自定义指令
10-17
主要介绍了Vue.directive 自定义指令，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue 自定义指令实现一键 Copy功能
10-16
指令 (Directives) 是带有 v- 前缀的特殊特性。这篇文章主要介绍了Vue 自定义指令实现一键 Copy的功能,需要的朋友可以参考下
学习笔记 JavaScript ES6 声明方式const（二）
白鸽同学的博客
12-19 1004
声明方式const（二）
const用法详解
vanlin5566的专栏
11-26 508
const用法详解 面向对象是C++的重要特性.  但是c++在c的基础上新增加的几点优化也是很耀眼的 就const直接可以取代c中的#define 以下几点很重要,学不好后果也也很严重 const 1. 限定符声明变量只能被读    const int i=5;    int j=0;    ...    i=j;   //非法，导致编译错误    j=i;   /
js实现let 和const
qfm17773971907的博客
05-05 638
ES5实现let 和const let的特性 用来声明一个变量： 在块级作用域内有效，不能预处理，不存在变量提升，即未声明之前的代码不能调用 不能重复声明 通过匿名函数和闭包的形式来模拟let (function(){ var c =3 console.log(c) //1 })() console.log(c) //c is not defined 用匿名函数的作用域来模拟块级作用域，相当于将将用到let的代码放到匿名函数中，不会造成变量污染了 const的特性 用于声明一个常量， 在块
Vue自定义指令
热门推荐
qq_46149597的博客
11-05 1万+
Vue自定义指令，全局、局部自定义指令，指令定义对象的钩子函数，自定义指令的绑定值
Vue3： 修改const 声明的变量的值
weixin_44016350的博客
12-12 4397
Vue3： 修改const 声明的变量的值
新手Vue3学习第3天
m0_53479584的博客
09-15 1195
的 attribute 可能和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且所有支持 Vue 的浏览器都能正确解析它。当使用直接在 DOM 中书写的模板时，可能会出现一种叫做“未编译模板闪现”的情况：用户可能先看到的是还没编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容。如果一个属性的值是变量，boolean类型，number类型，对象，数组，null，undefined，使用绑定属性。将它们和动态的字符串绑定。
Vue--自定义指令
qq_62254095的博客
07-20 952
这都是Vue给咱们内置的一些指令，可以直接使用自定义指令：同时Vue也支持让开发者，自己注册一些指令。这些指令被称为自定义指令每个指令都有自己各自独立的功能概念：自己定义的指令，可以封装一些DOM操作，扩展额外的功能全局注册//在main.js中 Vue . directive('指令名' , {// 可以对 el 标签，扩展额外功能 el . focus() } })局部注册//在Vue组件的配置项中"指令名": {// 可以对 el 标签，扩展额外功能el.focus()使用指令。
Vue3后台管理系统（九）自定义指令
Good Luck
02-21 1万+
Vue3后台管理系统（九）自定义指令
vue3中的自定义指令例子
最新发布
10-20
下面是一个Vue3中的自定义指令例子： ``` <div v-highlight="'red'">Hello, World! import { directive } from 'vue'; const highlightDirective = directive('highlight', { beforeMount(el, binding) { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飞羽逐星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值