美文网首页
自定义指令

自定义指令

作者: 冰点雨 | 来源:发表于2022-03-21 09:03 被阅读0次

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

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

定义指令总结：

  一、定义语法：
    （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命名

<body>
  <div id="root">
    <h2>当前的n值为：<span v-text="n"></span></h2>
    <h2>当前放大10倍后的n值为：<span v-big="n"></span></h2>
    <button @click="n++">点我n+1</button>
    <hr/>
    <input type="text" v-fbind:value="n">
  </div>

  <script type="text/javascript">
    Vue.config.productionTip = false
    //定义全局指令
/*     
    Vue.directive('fbind',{
      //指令与元素成功绑定时（一上来）
      bind(element, binding) {
        element.value = binding.value
      },
      //指令所在元素被插入页面时
      inserted(element, binding) {
        element.focus()
      },
      //指令所在的模板被重新解析时
      update(element, binding) {
        element.value = binding.value
        element.focus()
      },
    }) */

   /*  Vue.directive('big',function(element, binding){
      element.innerText = binding.value * 10
    }) */

    const vm = new Vue({
      el: "#root",
      data: {
        n: 1
      },
      directives:{
        //big何时会被调用？1.指令与元素成功绑定时（一上来）2.指令所在的模板被重新解析时
        // 'big-number'(element, binding) {
        big(element,binding){
          console.log('big',this)//注意：此处的this是window
          element.innerText = binding.value * 10
        },
        'fbind': {
        fbind:{
          //指令与元素成功绑定时（一上来）
          bind(element, binding){
            element.value = binding.value
          },
          //指令所在元素被插入页面时
          inserted(element, binding){
            element.focus()
          },
          //指令所在的模板被重新解析时
          update(element, binding) {
            element.value = binding.value
            element.focus()
          },
        }
      }
    })
  </script>
</body>

相关文章