08-Vue自定义指令

在这里插入图片描述

前言

📋前言📋
💝博客:【无聊大侠hello word】💝
✍有一点思考,有一点想法,有一点理性!✍
✍本文由在下【无聊大侠hello word】原创,首发于CSDN✍

指令语法

指令语法用于解析标签(包括标签属性、标签体内容、绑定事件等)。

函数式自定义指令

示例:

<body>
    <div id="app">
        <h2>当前值是:<span v-text="n"></span></h2>
        <br>
        <h2>放大10倍后的值是:<span v-big="n"></span></h2>
    </div>
</body>
<script>
    Vue.config.productionTip = false;

    new Vue({
        el: '#app',
        data: {
            n: 1
        },
        directives: {
            // element就是最后渲染出的真实dom标签span
            // binding是该标签绑定对象,常用的是bingding.value,获取该指定的值n
            big(element, binding){
                // 使用原生dom操作
                element.innerText = binding.value * 10
            }
        }
    });
</script>

directives中自定义指令。自定义指令在使用时需要加v-前缀,但是定义时不加该前缀。

函数式自定义指令时,函数有2个参数:

  • 参数1:指令对应的真实的dom对象
  • 参数2:指令绑定的对象,常用的是该对象的value属性,也即该指令后面接收的值

自定义指令的函数调用时机:

  1. 指令与元素成功绑定时
  2. 指定所在的模板被重新解析时。(不管变化的变量是不是该指令所用到的,都会重新执行)

对象式自定义指令

函数式自定义的指令首次执行是在指令与元素成功绑定时,这时候指令所在元素可能还没有被加载进页面,还只是位于Vue的ViewModel中。所以有些操作没有办法完成,比如:页面刚进来时使指令所在元素获取焦点、获取指令所在元素的父元素等等,这些功能需要指令所在的元素已经被插入页面后才可以运行。

对于这些需要指令所在元素被插入页面后才能运行的功能,可以使用对象式自定义指令编写。

例如:刚进页面时,使v-fbind指令所在元素获取焦点

directives: {
    // 指令与元素绑定时,指令所在元素还没有被插入页面,所以element.focus()在刚进页面时没有执行
    // fbind(element, binding) {
    //     element.value = binding.value;
    //     element.focus();
    // }

    // 使用对象式自定义指令
    fbind: {
        // 指令与元素成功绑定时
        bind(element, binding) {
            console.log('bind...');
            element.value = binding.value;
        },
		// 指令所在元素被插入页面时
        inserted(element, binding) {
            console.log('inserted')
            element.focus();
        },

        // 指令所在模板被重新解析时
        update(element, binding) {
            console.log('update')
            element.value = binding.value;
        }
}

对象式自定义指令,常用的属性函数有三个

  • bind:指令与元素成功绑定时执行
  • inserted:指令所在元素被插入页面时执行
  • update:指令所在模板被重写解析时执行

所以,函数式自定义指令,其实就是对象式自定义指令定义了bind和update的内容。

指令名称

如果指令名称由多个单词组成,多个单词之间使用-连接,不支持驼峰命名,驼峰命名会被转成全小写形式。

<div id="app">
    <!-- big-number之间使用短横连接,不能使用驼峰命名bigNumber -->
    <input type="text" v-big-number:value="n">
</div>
<script>
    Vue.config.productionTip = false;
    new Vue({
        el: '#app',
        data: { n: 1 },
        directives: {
            // big-number在json中需要加引号,或者写成全拼 'big-number':function(element, binding) {}
            'big-number'(element, binding) {
                element.value = binding.value * 10;
            }
        }
    });
</script>

定义全局指令:

// 全局函数式自定义指令
Vue.directive('tBig', function(element, binding) {
    element.value = binding.value * 10;
});

// 全局对象式自定义指令
Vue.directive('tbind', {
    bind(element, binding) {
        console.log('bind...');
        element.value = binding.value * 20;
    },
    inserted(element, binding) {
        console.log('inserted')
    },
    update(element, binding) {
        console.log('update')
        element.value = binding.value * 20;
    }
});

先赞后看,养成习惯!!!^ _ ^ ❤️ ❤️ ❤️
码字不易,大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值