Vue自定义指令

最新推荐文章于 2024-09-24 10:01:00 发布

Ejing6747

最新推荐文章于 2024-09-24 10:01:00 发布

阅读量202

点赞数

分类专栏： VUE基础文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/LIUYJ520/article/details/126769836

版权

VUE基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue.js中定义和使用自定义指令，包括局部指令和全局指令的定义方式，以及bind、inserted和update三个回调函数的应用。示例中展示了如何创建`v-big`指令来放大数值显示，以及`v-fbind`指令使输入框获取焦点。通过这两个自定义指令，加深了对Vue.js指令系统理解。

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    
  <!-- 需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
   需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。-->
    <div id="root">
      <!------------------v-big:放大倍数--------------------------------->
      <h2>当前n的值是: <span v-text="n"></span></h2>
      <h2>放大10倍后的n值是: <span v-big="n"></span></h2>
      <h2>放大20倍后的n值是: <span v-big-number="n"></span></h2>
      <button @click="n++">点我n+1</button>
      <!--------------------v-fbind:获取对话框焦点----------------------------------->
      <br />
      <!-- <input type="text" v-fbind:value="n" autofocus/> -->
      <br />
      <input type="text" v-fbind:value="n" />
    </div>
  </body>

  <script text="text/javascript">
    //定义全局自定义指令
    // Vue.directive("fbind", {
    //   bind(element, binding) {
    //     element.value = binding.value;
    //   },
    //   //指令所在元素插入页面时调用
    //   inserted(element, binding) {
    //     element.focus();
    //   },
    //   //指令所在模板被重新解析时
    //   update(element, binding) {
    //     element.value = binding.value;
    //   },
    // });

    new Vue({
      el: "#root",
      data: {
        n: 1,
      },
      //directive:自定义指令(this=window),两个参数，第一个是真实的标签，第二个是收到的值
      directives: {
        //big函数（函数形式是bind和update的合体）何时会被调用：
        //1.指令与元素成功绑定的时候
        //2.指令所在的模板被重新执行时
        big(element, binding) {
          element.innerText = binding.value * 10;
        },
        // 完整写法 ，如果自定义绑定的名字是一个组合单词，用-链接，并引起来
        "big-number": function (element, binding) {
          element.innerText = binding.value * 20;
        },
        //失败的fbind绑定-----------------------------------------------------
        // fbind(element, binding) {
        //   element.value = binding.value;
        //  //最开始是Vue解析模版，然后呈现母版，在解析时，fbind与input进行绑定
        //  //但是绑定时input还并没有呈现，所以不能获取到焦点
        // element.focus()//最开始不能获取到焦点，需要呈现后才能
        // },
        //成功的fbind绑定-------------------------------------------------------
        fbind: {
          //成功绑定的时候调用
          bind(element, binding) {
            element.value = binding.value;
          },
          //指令所在元素插入页面时调用
          inserted(element, binding) {
            element.focus();
          },
          //指令所在模板被重新解析时
          update(element, binding) {
            element.value = binding.value;
          },
        },
      },
    });
  </script>
</html>