二、vue自定义指令

最新推荐文章于 2024-07-03 12:06:55 发布

光明小学王小雨

最新推荐文章于 2024-07-03 12:06:55 发布

阅读量297

点赞数

分类专栏： vue 前端

本文链接：https://blog.csdn.net/qq_41475058/article/details/109388414

版权

vue 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

前端

20 篇文章 1 订阅

订阅专栏

参考教女朋友学习 vue中的指令及其自定义指令
在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，开发人员仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

示例一、

注册一个 v-focus 指令，实现了在页面加载完成之后自动让输入框获取到焦点的小功能。

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src={% static "vue.js" %}></script>

</head>
{% verbatim %}
<body>

     <div id="app">
        <p>页面载入时，input 元素自动获取焦点：</p>
        <input type="text" placeholder="我是全局自定义指令" v-focus>
    </div>
    <script>
        // 注册一个全局自定义指令 `v-focus`
        Vue.directive('focus', {
            // 当被绑定的元素插入到 dom 中时…… ，其中参数 el 为dom元素
            // 这里使用inserted这个钩子函数
            inserted: function (el) {
                // 聚焦元素
                el.focus()
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {}
        })
    </script>


</body>

{% endverbatim %}


</html>

访问页面，可以看到页面加载完成之后输入框获取到焦点
在这里插入图片描述

钩子函数

1、指令定义对象可以提供如下几个钩子函数 (均为可选)：

钩子函数	使用
bind	只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted	被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update	所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated	指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind	只调用一次，指令与元素解绑时调用。

2、指令钩子函数会被传入以下参数

参数	说明
el	指令所绑定的元素，可以用来直接操作 DOM。
binding	绑定一个对象。
vnode	Vue 编译生成的虚拟节点。
oldVnode	上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

3、binding绑定对象属性说明：

属性	说明	示例
name	指令名，不包含前缀 v-。	v-focus 中的 focus。
value	指令的绑定的值（计算后）。	v-my-directive=“1 + 1” 中，绑定值为 2。
oldValue	指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。	——
expression	字符串形式的指令表达式（不计算）。	v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg	传给指令的参数，可选。	v-my-directive:foo 中，参数为 “foo”。
modifiers	一个包含修饰符的对象。	v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

示例二、获取绑定元素、binding参数对象，以及设置的参数对象的值

为自定义指令设置值v-focus="focusvalue，获取绑定元素、binding参数对象，以及设置的参数对象的值

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src={% static "vue.js" %}></script>

</head>
{% verbatim %}
<body>

     <div id="app">
        <p>页面载入时，input 元素自动获取焦点：</p>
        <input type="text" placeholder="我是全局自定义指令" v-focus="focusvalue">
    </div>
    <script>
        // 注册一个全局自定义指令 `v-focus`
        Vue.directive('focus', {
            // 当被绑定的元素插入到 dom 中时…… ，其中参数 el 为dom元素
            inserted: function (el,bindding) {
                // 聚焦元素
                el.focus()
                console.log("el: ", el);
                console.log("bindding: ", bindding);
                console.log("bindding.value: ", bindding.value);
            }
        })
        var vm = new Vue({
            el: '#app',
            data: { focusvalue:"value123" }
        })
    </script>


</body>

{% endverbatim %}

</html>

查看输出
console.log("el: ", el)打印绑定的元素，这里绑定了一个input标签
console.log("bindding: ", bindding);打印绑定的自定义指令对象，这里是自定义的v-focus这个对象，字典里有该对象的一下属性
console.log("bindding.value: ", bindding.value) 打印对象的value值，这个值是在input标签中v-focus="focusvalue"自己定义的变量focusvalue，然后在定义vue对象时在data中再设值。

在这里插入图片描述

注册局部指令

我们也可以在实例使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用：

<div id="app">
  <p>页面载入时，input 元素自动获取焦点：</p>
  <input v-focus>
</div>
 
<script>
// 创建根实例
new Vue({
  el: '#app',
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    }
  }
})
</script>