vue-自定义指令

最新推荐文章于 2024-11-06 11:13:52 发布

weixiwo

最新推荐文章于 2024-11-06 11:13:52 发布

阅读量363

点赞数

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

本文链接：https://blog.csdn.net/weixiwo/article/details/130170233

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章讲述了如何在Vue中创建两个自定义指令v-big和v-fbind。v-big指令用于将绑定的数值放大10倍显示，而v-fbind指令确保所绑定的input元素获取焦点。对于v-fbind，文章指出了直接在指令定义中设置焦点可能无效的问题，并提供了两种解决方案，包括函数式和对象式，利用Vue的生命周期钩子来确保在元素插入DOM后正确设置焦点。

摘要由CSDN通过智能技术生成

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

语法：

局部使用：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

全局使用：

<script>
    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
            // 聚焦元素
            el.focus()
        }
    })
</script>

配置对象时常用的三个回调：

bind:指令与元素成功绑定调用

inserted:指令所在元素被插入页面时调用

update:指令所在模板结构被重新解析时使用

需求1：

  <!-- 准备好一个容器-->
    <div id="root">
      <h2>当前值 <span v-text='n'></span></h2>
      <h2>放大值 <span v-big='n'></span></h2>
      <button @click="n++">计算</button>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;
      new Vue({
    el: '#root',
    data: {
        name:'尚硅谷',
        n:1
    },
    directives: {
        // big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
        big (element,binding){
            console.log('big',this) //注意此处的this是window
            console.log(element,binding)
            element.innerText = binding.value * 10
        },
    }
})
    </script>

并且用于指令中需要操作dom,所以其中的this是window，可以拿到元素操作

配置big指令传入参数：（element,binding）

-element:第一个参数会拿到真实dom,可以操作真实dom

-binding:第二个参数是binding是一个对象。name是指定的名称;expression是指定表达式，由于此时是绑定的指令n;value是指定的绑定值

需求二：

(1)函数式：（存在问题）

  <body>
    <!-- 准备好一个容器-->
    <div id="root">
      <h2>焦点 <input v-fbind='n'></span></h2>
      <button @click="n++">计算</button>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;
      new Vue({
    el: '#root',
    data: {
        name:'尚硅谷',
        n:1
    },
    directives: {
       fbind(element,binding){
        element.value = binding.value;
        element.focus()
       }
    }
})
    </script>

出现问题：一开始并不能获取焦点

这种由于页面一开始解析模板，并且由于指令与数据绑定时由于element还未拿到，所以执行element.focus时，并不能生效。但是由于操作n,使数据发生改变，再次执行fbind，此时能拿到element元素

（2）对象式：（使用提供的钩子函数）

 <div id="root">
      <h2>焦点 <input v-fbind='n'></span></h2>
      <button @click="n++">计算</button>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;
      new Vue({
    el: '#root',
    data: {
        name:'尚硅谷',
        n:1
    },
    directives: {
      fbind: {
            //指令与元素成功绑定时（一上来）
            bind (element,binding){
                element.value = binding.value
            },
            //指令所在元素被插入页面时
            inserted (element,binding){
                element.focus()
            },
            //指令所在的模板被重新解析时
            update (element,binding){
                element.value = binding.value
            }
        }
    }
})
    </script>