自定义指令函数式/对象式

最新推荐文章于 2025-11-29 18:27:30 发布

原创最新推荐文章于 2025-11-29 18:27:30 发布 · 53 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

本文介绍了如何在Vue中创建两个自定义指令：v-big用于将数值放大10倍显示，v-fbind用于让输入框默认获取焦点并自动放大输入值。作者详细展示了指令的定义、绑定时机以及其实现方法。

<template>
  <div class="hello">
    <!-- 需求1： -->
    <span v-text="n"></span><br>
    <span v-big="n"></span>
    <button @click="n++">点击之后n+1</button><br>

    <!-- 需求2 -->
    <input type="text" v-fbind:value="n">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return { n: 1 }
  },

  // 需求1：定义一个v-big指令，数值放大10倍
  // 函数式指令：
  directives: {
    // big函数何时被调用：1.指令与元素成功绑定时；2.指令所在的模板被重新解析时
    big(el, binding) {
      // el是一个真实的DOM,binding是绑定的值
      // console.log(el, bingding.value);
      el.innerText = binding.value * 10
    },

    // 需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让所绑定的input元素默认获取焦点
    // fbind(el, binding) {
    //   // vue把指令和元素绑定成功并vue把元素放入页面了，才能执行成功，所以不能用函数式指令，接下来用对象式指令编写
    //   el.value = binding.value
    //   el.focus()
    // }
    fbind: {
      // 指令与元素绑定成功时
      bind(el, binding) { el.value = binding.value * 20 },
      // 指令所在元素被插入页面时
      inserted(el) { el.focus() },
      // 模板重新解析时调用
      update(el, binding) { el.value = binding.value * 20 }
    }
  }



}
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

注意：命名自定义指令时不建议使用小驼峰命名，尽量使用分隔符命名，比如v-big-number==》自定义指令可写成‘big-number’，所有指令的this指向只指向window的

自定义指令 函数式/对象式

自定义指令函数式/对象式