Vue自定义指令

最新推荐文章于 2023-03-24 17:29:49 发布

搬运Gong

最新推荐文章于 2023-03-24 17:29:49 发布

阅读量134

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_20315217/article/details/116005181

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

常用内置指令

v:text -> 更新元素的 textContent
v-html -> 更新元素的 innerHTML
v-if -> 如果为true, 当前标签才会输出到页面
v-else -> 如果为false, 当前标签才会输出到页面
v-show -> 通过控制display样式来控制显示/隐藏
v-for -> 遍历数组/对象
v-on -> 绑定事件监听, 一般简写为@
v-bind -> 强制绑定解析表达式, 可以省略v-bind 使用 : 进行绑定
v-model -> 双向数据绑定
ref -> 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
v-cloak -> 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }

自定义指令

vue 提供了很多内置的指令，也提供了自定义指定的方式，用来处理特殊场景，下面来看一下如何自定义自己的指令。

自定义全局指令

注册全局指令，如下：

Vue.directive(’指令名称‘, function(el, binding) {
    // 指令具体的操作
})

写个 demo 演示，具体指令需要做的事情为将内容全部转换为大写：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自定义指令</title>
</head>
<body>
<div id="test">
  <!-- 使用自定义的指令，需要在指令的名字前面加上 v-，如下面的样子 -->
  <p v-upper-text="msg"></p>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
  // 注册一个全局指令
  // el: 指令所在的标签对象
  // binding: 包含指令相关数据的容器对象
  Vue.directive('upper-text', function (el, binding) {
    console.log(el, binding)
    el.textContent = binding.value.toUpperCase()
  })
  new Vue({
    el: '#test',
    data: {
      msg: "I Like You"
    }
  })
</script>
</body>
</html>

注意在使用自定义指令的时候，需要在自定义指令名字的前面加 v-（v-自定义指令的名字）。

自定义局部指令

自定义局部指令，即在 vm 对象内生效，其余地方不生效。写在 new Vue中：

directives : {
  'my-directive' : {
      bind (el, binding) {
        el.innerHTML = binding.value.toupperCase()
      }
  }
}

写个 demo 来与全局自定义指令对比一下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自定义指令</title>
</head>
<body>
<div id="test">
  <p v-upper-text="msg"></p>
  <p v-lower-text="msg"></p>
</div>

<div id="test2">
  <p v-upper-text="msg"></p>
  <p v-lower-text="msg"></p>
</div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
  // 注册一个全局指令
  // el: 指令所在的标签对象
  // binding: 包含指令相关数据的容器对象
  Vue.directive('upper-text', function (el, binding) {
    console.log(el, binding)
    el.textContent = binding.value.toUpperCase()
  })
  new Vue({
    el: '#test',
    data: {
      msg: "I Like You"
    },
    // 注册局部指令
    directives: {
      'lower-text'(el, binding) {
        console.log(el, binding)
        el.textContent = binding.value.toLowerCase()
      }
    }

  })

  new Vue({
    el: '#test2',
    data: {
      msg: "I Like You Too"
    }
  })
</script>
</body>
</html>

效果图：
在这里插入图片描述第二个 vm 中并没有定义局部指令，所以页面报错了！！

自定义指令中的钩子函数

官网中用到的写法：

注册全局自定义指令：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

这里用到的 inserted 即为钩子函数。

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。

具体详细内容参考官方文档：https://cn.vuejs.org/v2/guide/custom-directive.html

搬运Gong

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Vue自定义指令

常用内置指令v:text -> 更新元素的 textContentv-html -> 更新元素的 innerHTMLv-if -> 如果为true, 当前标签才会输出到页面v-else -> 如果为false, 当前标签才会输出到页面v-show -> 通过控制display样式来控制显示/隐藏v-for -> 遍历数组/对象v-on -> 绑定事件监听, 一般简写为@v-bind -> 强制绑定解析表达式,
复制链接

扫一扫