初学vue-09

最新推荐文章于 2026-01-02 20:59:19 发布

原创最新推荐文章于 2026-01-02 20:59:19 发布 · 96 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #vue #前端

前端同时被 3 个专栏收录

21 篇文章

订阅专栏

HTML

16 篇文章

订阅专栏

vue

9 篇文章

订阅专栏

本文介绍了如何在Vue.js中创建自定义指令，包括使用函数和对象的方式。通过示例展示了如何定义`v-bigger`指令来放大文本以及`v-fbind`指令用于双向数据绑定，并在输入元素中应用。这两个自定义指令分别在元素的插入、更新等生命周期钩子中实现了特定功能。

1.自定义指令-函数

上一节所学的指令都是vue已经写好的指令，我们是可以直接使用，但想要定义自己想要的指令，要怎么办呢？

v-???后面的问号是自定义的名字，在定义完名字后，开始在vue中新的配置项directives中添加名为你自定义的名字的函数，这个属性和方法和类似，然后将你想要实现的功能写在属性中

具体的实现如下：

body：

<div id="laa" >
<h2><span v-text="num"></span></h2>

<h2><span v-bigger="num"></span></h2>
</div>

js：

 Vue.config.productionTip=false
    new Vue({
        el:"#laa",
        data:{
            num:17
        },
        directives:{
            bigger(element,binding){
                console.log('bigger')
                element.innerText=binding.value*10

            }
        }

    })

1.自定义指令-对象

原理差不多，这个对象也在directives中，以下用一个input展示

body：

<h2>num的值</h2><input  type="text" v-fbind:value="num">

js：

Vue.config.productionTip=false
    new Vue({
        el:"#laa",
        data:{
            num:17
        },
        directives:{
            bigger(element,binding){
                console.log('bigger')
                element.innerText=binding.value*10

            },
            fbind:{
                bind(element,binding){
                    element.value=binding.value
                },
                insert(element,binding){
                    element.focus()
                    binding.focus()
                },
                update(element,binding){
                    element.value=binding.value
                }
            }

        }

    })