Vue简单学习之自定义指令

自定义指令

Vue 使用 Vue.directive() 来定义全局的指令例如： v-focus
Vue.directive(“focus”, {}) 来定义focus 指令
参数1：指令的名称，注意，在定义的时候，指令的名称前面，不要加v-前缀，但是在时候的时候需要加上v- 前缀
参数2：是一个对象，这个对象身上，有一些指令相关的处理函数（钩子函数），这些函数可以在特定的阶段，执行相关的操作
钩子函数
- bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
- update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
实例：

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Page Title</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script src="https://unpkg.com/vue/dist/vue.js"></script>
  </head>
  <body>
      <div id="app">
          <input type="text" name="" id="" v-focus>
      </div>
  </body>
  <script>
      // 自定义指令 ：这里是v-focus
      Vue.directive('focus', { // 参数2 是一个对象，有一些相关的函数
          bind: function(el) { // 每当指令绑定在元素上的时候，会立即执行这个bind函数，且只执行一次
              // 注意： 每个函数中，第一个参数永远是el ，表示绑定了指令的那个元素，这个el 参数，是一个原生的Js 对象（DOM对象）
  
              // 这里无法获取焦点： 在元素中，刚绑定的指令的时候，还没有插入到Dom中，这个时候调用focus 是没有用的
              // el.focus()
          },
          inserted: function(el) { //inserted 表示元素插入到Dom的时候会执行这个函数，且执行一次
              el.focus()
          },
          updated: function(el) { //VNode 更新的时候，会执行updated ，会多次触发
  
          }
      })
      var vm = new Vue({
          el: "#app",
          data: {},
          filters: { // 定义私有的过滤器，这种过滤器是只属于本 Vue 实例的
              // 过滤器调用规则是就近原则，如果私有和全局过滤器名称相同，以私有为主。
  
          }
      })
  </script>
  </html>

私有自定义指令和指令传参

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" name="" id="" v-color="'blue'">
    </div>
</body>
<script>
    // 自定义指令 ：这里是v-color
    Vue.directive('color', { // 参数2 是一个对象，有一些相关的函数
        bind: function(el, binding) { // 每当指令绑定在元素上的时候，会立即执行这个bind函数，且只执行一次
            // 注意： 每个函数中，第一个参数永远是el ，表示绑定了指令的那个元素，这个el 参数，是一个原生的Js 对象（DOM对象）
            el.style.color = binding.value
        },
        inserted: function(el) {},
        updated: function(el) { //VNode 更新的时候，会执行updated ，会多次触发

        }
    })
    var vm = new Vue({
        el: "#app",
        data: {},
        filters: { // 定义私有的过滤器，这种过滤器是只属于本 Vue 实例的
            // 过滤器调用规则是就近原则，如果私有和全局过滤器名称相同，以私有为主。

        },
        directives: { //定义私有的 自定义指令
            bind: function() {

            },
            inserted: function() {

            },
            updated: function() {

            },
        }
    })
</script>

</html>

Vue简单学习之自定义指令

自定义指令

猜你喜欢