（13）Vue.js 自定义指令

泽哥ins

已于 2022-02-03 23:24:53 修改

阅读量192

点赞数

分类专栏： Vue 文章标签： Vue.js 自定义指令全局指令局部指令插入操作

于 2022-02-01 22:46:31 首次发布

本文链接：https://blog.csdn.net/qq_36213140/article/details/122766849

版权

Vue 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

一、Vue.js之定义指令介绍

前面我们学习了一些Vue.js给我们提供的指令，那么我们知道指令就是帮助我们去简化DOM操作的，相当于对基础 DOM操作的一种封装。那么我们仅仅使用这些Vue.js提供给我们的指令还是不够的，当我们希望使用一些内置指令不具备的 DOM 功能时，可以进行自定义指令设置。

自定义指令分为：自定义全局指令和自定义局部指令。

二、自定义全局指令

• 指的是可以被任意 Vue 实例或组件使用的指令。

<body>
  <div id="app">
    <input type="text" v-focus.a.b="100 + 1">
  </div>
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    Vue.directive('focus',{
      inserted(el,binding) {
        console.log(binding);
        el.focus();
      }
    })
    new Vue({
      el: '#app',
      data: {

      }
    })
  </script>
</body>

三、自定义局部指令

• 指的是可以在当前 Vue 实例或组件内使用的指令。

<body>
  <div id="app">
    <input type="text" v-focus>
  </div>
  <div id="app2">
    <input type="text" v-focus>
  </div>
  <script src="../01.vue.js入门/js/vue-2.6.14.js"></script>
  <script>
    new Vue({
      el: '#app',
      data:{},
      directives: {
        focus: {
          inserted(el) {
            el.focus();
          }
        }
      }
    })
    new Vue({
      el: '#app2'
    })
  </script>
</body>

泽哥ins

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
（13）Vue.js 自定义指令

一、Vue.js之定义指令介绍前面我们学习了一些Vue.js给我们提供的指令，那么我们知道指令就是帮助我们去简化DOM操作的，相当于对基础 DOM操作的一种封装。那么我们仅仅使用这些Vue.js提供给我们的指令还是不够的，当我们希望使用一些内置指令不具备的 DOM 功能时，可以进行自定义指令设置。自定义指令分为：自定义全局指令和自定义局部指令。
复制链接

扫一扫