08-Vue自定义指令

最新推荐文章于 2022-12-18 14:00:48 发布

无聊大侠hello world

最新推荐文章于 2022-12-18 14:00:48 发布

阅读量354

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_54693844/article/details/128093804

版权

Vue 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

在这里插入图片描述

文章目录

前言
指令语法
函数式自定义指令
对象式自定义指令
指令名称

前言

📋前言📋
💝博客：【无聊大侠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属性，也即该指令后面接收的值

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

指令与元素成功绑定时
指定所在的模板被重新解析时。（不管变化的变量是不是该指令所用到的，都会重新执行）

对象式自定义指令

函数式自定义的指令首次执行是在指令与元素成功绑定时，这时候指令所在元素可能还没有被加载进页面，还只是位于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;
    }
});