Vue中如何自定义函数指令

Vue中如何自定义函数指令:有两种方式,局部注册和全局注册

一. 局部注册:

 new Vue({
    el: '#root',
    data: {
      n: 1
    },

    // 局部的指令
    // 自定义指令
    // 注意:指令里面的 this 都是 window
    directives: {
      //注意定义的是 big,使用的是 v-big
      // big函数何时会被调用: 1 指令与元素成功绑定时(一上来) 
      //                    2 指令所在的模版被重新解析的时候(意思是:该模版上面任何的元素发生变化,都要重新调用v-big指令)
      // 有两个参数,element 是v-big指令所在的真实DOM元素,binding 是element和n绑定的所有全部信息
      'big-number'(element, binding) {
        element.innerText = binding.value * 10;
        // console.log(element,binding)
      },

      //  所以其实指令语法的功能:就是操作 DOM元素的标签属性,标签体内容,绑定事件等

      fbind: {
        // 当指令与元素成功绑定时调用
        bind(element, binding) {
          element.value = binding.value;
        },
        //指令所在元素时被插入页面时调用
        inserted(element, binding) {
          element.focus();
        },
        //指令所在的模版被重新解析时被调用
        update(element, binding) {
          element.value = binding.value;
        }
      }

    }
  })

二. 全局注册:

  // 全局的指令式命令
  Vue.directive('fbind2', {
    // 当指令与元素成功绑定时调用
    bind(element, binding) {
      element.value = binding.value;
    },
    //指令所在元素时被插入页面时调用
    inserted(element, binding) {
      element.focus();
    },
    //指令所在的模版被重新解析时被调用
    update(element, binding) {
      element.value = binding.value;
    }
  })

三. 注意点:很重要
Vue中如何自定义函数指令_第1张图片

四. 下面是具体的实例,根据需求自定义一个函数指令:

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>
<body>

<div id="root">
  <h2>当前的值是:<span v-text="n">span>h2>
  <h2>放大10倍后的n值是:<span v-big-number="n">span>h2>
  <button @click="n++">n++button>

  <hr>
  <input type="text" v-fbind:value="n">

div>

<script src="./vue.js">script>
<script>

  // 全局的指令式命令
  Vue.directive('fbind2', {
    // 当指令与元素成功绑定时调用
    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
    },

    // 局部的指令
    // 自定义指令
    // 注意:指令里面的 this 都是 window
    directives: {
      //注意定义的是 big,使用的是 v-big
      // big函数何时会被调用: 1 指令与元素成功绑定时(一上来)
      //                    2 指令所在的模版被重新解析的时候(意思是:该模版上面任何的元素发生变化,都要重新调用v-big指令)
      // 有两个参数,element 是v-big指令所在的真实DOM元素,binding 是element和n绑定的所有全部信息
      'big-number'(element, binding) {
        element.innerText = binding.value * 10;
        // console.log(element,binding)
      },

      //  所以其实指令语法的功能:就是操作 DOM元素的标签属性,标签体内容,绑定事件等


      fbind: {
        // 当指令与元素成功绑定时调用
        bind(element, binding) {
          element.value = binding.value;
        },
        //指令所在元素时被插入页面时调用
        inserted(element, binding) {
          element.focus();
        },
        //指令所在的模版被重新解析时被调用
        update(element, binding) {
          element.value = binding.value;
        }
      }

    }
  })

script>
body>
html>

五. 若还有不清楚的,可以查看官网对应说明,链接如下:

此处点击跳转到Vue官网有关自定义指令的描述

你可能感兴趣的:(Vue,vue.js,javascript)