Vue自定义指令

最新推荐文章于 2023-07-20 15:51:08 发布

人工智能有点

最新推荐文章于 2023-07-20 15:51:08 发布

阅读量494

点赞数

分类专栏： Web开发文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44417441/article/details/126024812

版权

Web开发专栏收录该内容

20 篇文章 1 订阅

订阅专栏

自定义指令

文章目录

需求1
- - 指令的参数
  - 需求一功能实现：
需求2
- - 需求二功能实现
总结：

用两个需求引出两种定义指令方式（函数、对象）

在这里插入图片描述

需求1

上图报错提示的指令名为：big，这里是因为没有定义v-big指令，所以失败找到big指令。

补充：Vue中有两个地方提示的名字是big,不带有v-，分别是报错和定义。

自定义指令两种写法，一种是功能详细写着比较复杂是对象写法，一种是写着简单实现的功能也较为简单的是函数写法。但指令实现的本质都是函数。这里需求一使用的是函数写法。

注意：指令实现不靠返回值，靠的是收到的参数。利用收到的参数修改DOM。

指令的参数

输出两个参数，第一个参数a是真实DOM元素span

在这里插入图片描述

证明a是真实DOM元素：

第一种：利用console.dir(a)，图片可见其拥有真实DOM所有属性和方法。

第二种：利用 instanceof

以上两种方法证明了a是真实的DOM元素。所以可以把形参a修改为element。这不必须，不过能起到见名知意的作用。

第二个参数：我们更加关注value属性。文档中把形参b叫做binding，绑定。

在这里插入图片描述

所以，当两个参数结合在一起使用时候，有一种把元素和指令绑定的意思，绑定后就能进行对应的功能实现了。绑定如下：

在这里插入图片描述

需求一功能实现：

通过修改DOM元素实现自定义指令，不需要返回值。

在这里插入图片描述

问：big函数何时会被调用？

答：1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。

需求2

获取焦点失败，怎么回事？？

执行顺序有问题。

Vue读到红色框位置时，进行的是元素与指令绑定，此时（绑定时）是在内存中进行的绑定关系，元素尚未出现在页面中，所以在没有出现在页面时候就调用获取焦点的操作是不奏效的。

所以进入页面时的输入框是没有焦点的，而再次点击时（指令所在模板重新解析时）文本框就获取到了焦点。因为再次点击的时候，文本框已经出现在页面了，此时获取焦点的操作是奏效的。

也就是说，药效获取焦点的功能奏效，输入文本框需要先出现在页面上，只在内存中可不行。Vue显示模板是分很多步的，分清时间很重要。

理解好指令函数调用的两个时机（绑定时、指令所在模板重新解析），对上述原因就会清晰明了。

在这里插入图片描述

需求二功能实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        需求1：定义一个v-big指令，和v-text功能相似，但会把绑定的数值放大10倍。
        需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
     -->
    <div id="root">
        <h2>当前的n值是 <span v-text="n"></span> </h2>
        <!-- <h2>方法10倍的n值是 <span v-big-number="n"></span> </h2> -->
        <h2>方法10倍的n值是 <span v-big="n"></span> </h2>
        <button @click="n++">点我n+1</button>
        <hr/>
        <input type="text" v-fbind:value="n">

    </div>
</body>
<script>
    Vue.config.productionTip = false
    // 定义全局指令（书写形式与过滤器相同）【对象写法】
    // Vue.directive('fbind',{
    //             bind(element,binding){
    //                 element.value = binding.value
    //             },
    //             inserted(element,binding){
    //                 element.focus()
    //             },
    //             update(element,binding){
    //                 element.value = binding.value
    //                 element.focus()
    //             },
    //         },)

    // 定义全局指令 【函数写法】
    Vue.directive('big',function(element,binding){
        element.innerText = binding.value * 10
        console.log(this) // 注意:此处this是windows
    })

    new Vue({
        el:"#root",
        data:{
            n:1,
        },
        //局部指令
        directives:{
            // big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
            // "big-number"(element,binding){
            //     //console.log(a instanceof HTMLElement)
            //     // console.log(element,binding.value)
            //     element.innerText = binding.value * 10
            // },
            big(element,binding){
                //console.log(a instanceof HTMLElement)
                // console.log(element,binding.value)
                element.innerText = binding.value * 10
                console.log(this) // 注意:此处this是windows
            },
            fbind:{
                //指令与元素成功绑定时（一上来）
                bind(element,binding){
                    // 样式 value 绑定事件
                    element.value = binding.value
                },
                //指令所在元素被插入页面时
                inserted(element,binding){
                    // 获取焦点 拿到父元素 等功能使用
                    element.focus()
                },
                //指令所在的模板被重新解析时
                update(element,binding){
                    element.value = binding.value
                    element.focus()
                },
            },
        },
    })
    /**
     * 指令写法：
     * 使用小写单词用-做分割，避免使用驼峰命名
     * 方法名（多个小写单词带有-）在定义时候，应写成原始形式(可适当简化)
     * 
     * 指令相关函数的this是windows
    */
</script>
</html>

总结：

定义语法：
1. 局部指令：
  1. new Vue(directives:{指令名：配置对象}) 或 new Vue({directives:{指令名：回调函数}})
2. 全局指令：
  1. Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
配置对象中常用的3个回调：
1. bind:指令与元素成功绑定时调用
2. inserted:指令所在元素被插入页面时调用
3. update:指令所在模板结构被重新解析时调用
备注：
1. 指令定义时不加v-,但使用时要加v-
  tive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
配置对象中常用的3个回调：
1. bind:指令与元素成功绑定时调用
2. inserted:指令所在元素被插入页面时调用
3. update:指令所在模板结构被重新解析时调用
备注：
1. 指令定义时不加v-,但使用时要加v-
2. 指令名如果时多个单词，要使用kebab-case（user-name）命名方式，不要使用camelCase（userName）命名

人工智能有点

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue自定义指令

定义语法局部指令{指令名配置对象})或newVue({directives{指令名回调函数}})全局指令Vue.directive(指令名,配置对象)或Vue.directive(指令名,回调函数)配置对象中常用的3个回调bind指令与元素成功绑定时调用inserted指令所在元素被插入页面时调用update指令所在模板结构被重新解析时调用备注指令定义时不加v-,但使用时要加v-httpshttpshttpshttps。...
复制链接

扫一扫