教女朋友学习 vue中的指令及其自定义指令

写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的

这博客是对自己学习的一点点总结及记录,如果您对 Java算法 感兴趣,可以关注我的动态,我们一起学习。

用知识改变命运,让我们的家人过上更好的生活

在这里插入图片描述

一、vue中内置的指令

v-text 指令用于将数据填充到标签中,作用和插值表达式类似,但是不会出现闪动问题。

v-html 指令用于将HTML片段填充到标签中,可能有安全问题。

v-pre 指令用于显示原始信息。

v-once 指令是只渲染一次,后面元素中的数据再更新变化,都不会重新渲染。

v-for 指令用于遍历,把一个数组对应为一组元素。

v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。指令简写为 @

v-bind 指令用于属性绑定,把数据绑定在HTML元素的属性上,指令简写为 : 要绑定的属性。

v-model 指令可以实现表单元素和 Model 中数据的双向数据绑定。

v-if & v-else-if & v-else 指令用于条件渲染。

v-if & v-show 指令用于隐藏和显示元素

v-if 的特点:每次都会重新删除或创建元素

v-show 的特点: 每次不会重新进行DOM的删除和创建操作,只是切换了元素的 display:none 样式

注意

① 如果元素涉及到频繁的切换,最好不要使用 v-if 指令, 应该选择使用 v-show 指令;

② 如果元素可能一直不会被显示出来被用户看到,则选择使用 v-if 指令

二、vue中自定义指令

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

1. 自定义全局指令

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局自定义指令</title>
    <script src="js/vue.js"></script>
</head>

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

</html>

只要打开这个页面后还没点击过任何内容,这个输入框就应当还是处于聚焦状态。

效果演示

在这里插入图片描述

2. 自定义局部指令

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>局部自定义指令</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" placeholder="我是局部自定义指令" v-color="color">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                color: 'red'
            },
            // 注册一个局部自定义指令 `v-color`
            directives: {
                color: {
                    // binding 为自定义的函数形参,通过自定义属性传递过来的值,存到 binding.value 里面
                    bind: function (el, binding) {
                        // 根据指令的参数进行设置背景色
                        el.style.backgroundColor = binding.value
                    }
                }
            }
        })
    </script>
</body>

</html>

只要通过指令绑定给了元素,不管元素有没有被插入到页面中去,这个元素肯定会有一个内联样式.

效果演示
在这里插入图片描述

注意

  • 和JS行为有关的操作,一般在 inserted 中去执行;
  • 和样式有关的操作,一般在 bind 执行

3. 钩子函数

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

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

② 指令钩子函数会被传入以下参数:

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

③ 绑定对象属性说明:

属性说明示例
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 }。

由于水平有限,博客中难免会有一些错误,有纰漏之处恳请各位大佬不吝赐教!

相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页