Vue复习其三

　　v-for

　　　　1.展示列表数据；

　　　　2.语法：v-for = "(item, index) in ?? :key = "!!"

　　　　3.可遍历数组、对象、字符串、指定次数遍历

　　v-bind

　　　　单向绑定解析表达式，简写 :???

　　v-model

　　　　双向数据绑定

　　v-on

　　　　绑定事件监听，简写 @???

　　v-text

　　　　对其所在的节点中渲染文本内容

　　　　和插值语法有所区别，v-text会替换节点的所有内容，而{{??}}不会

　　v-html

　　　　向指定节点中渲染包含html结构的内容

　　　　v-html也会替换点节点中的所有内容

　　　　v-html可以识别html标签，但也正是因为如此，容易导致安全性问题，导致xss攻击。

　　　　对于用户提交的内容，永远不要使用这类指令标签

　　v-cloak

　　　　该指令没有值，本质是一个特殊属性，Vue实例创建完毕并接管容器后，会自动删除v-cloak属性

　　　　使用场景：v-cloak配合css可以解决在网速缓慢时页面出现未解析的{{??}} 情况

　　　　<style>

　　　　　　[v-cloak]{display : none;}

　　　　</style>

　　v-once

　　　　v-once所在节点在初次动态渲染后，便作为静态内容；

　　　　将来数据的改变不会使v-once所在节点更新，一般用于性能优化

　　v-pre

　　　　Vue会跳过v-pre其所在节点的编译过程

　　　　一般用在没有使用指令语法、插值语法的节点，跳过，加快编译

　　自定义指令

　　　　局部指令：

　　　　　　new Vue({ directves:{指令名称：配置对象}})

　　　　　　new Vue({ directves:{指令名称：回调函数}})　　

　　　　newVue({

　　　　　　el:"",

　　　　　　data{},

　　　　　　directives:{

　　　　　　　　funcname(element,binding){

　　　　　　　　　　element.innerText = binding.value * 10

　　　　　　}}}

　　　　全局指令:

　　　　　　Vue.directive(指令名称,配置对象)　　

　　　　　　Vue.directive(指令名称,回调函数)　　

　　　　　　指令定义时不加v-，使用时需要v-

　　　　　　指令名称是多个单词，需要使用kebab-case命名方式(加""，且中间用-连接，例如"cruely-boy")，不要用cameCase方式命名(小驼峰命名)

自定义指令的钩子函数

Vue 提供了自定义指令的5个钩子函数：

- bind：指令第一次绑定到元素时调用，只执行一次。在这里可以进行一次性的初始化设置。
- inserted：被绑定的元素，插入到父节点的 DOM 中时调用（仅保证父节点存在）。
- update：组件更新时调用。
- componentUpdated：组件与子组件更新时调用。
- unbind：指令与元素解绑时调用，只执行一次。

注意：

1. 除 update 与 componentUpdated 钩子函数之外，每个钩子函数都含有 el、binding、vnode 这三个参数
2. 在每个函数中，第一个参数永远是 el，表示被绑定了指令的那个 dom 元素，这个el 参数，是一个原生的 JS 对象，所以 Vue 自定义指令可以用来直接和 DOM 打交道
3. binding 是一个对象，它包含以下属性：name、value、oldValue、expression、arg、modifiers
4. oldVnode 只有在 update 与 componentUpdated 钩子中生效
5. 除了 el 之外，binding、vnode 属性都是只读的

钩子函数说白了也就是生命周期，即当一个指令绑定到一个元素上时，这个指令内部有5个生命周期事件函数。接下来创建一个案例来看看这几个钩子函数的触发情况：

<p v-test>这是一段文字</p>

export default {
    ... ...
    directives: {
        test: {
              bind () {
                console.log('bind')
              },
              inserted () {
                console.log('inserted')
              },
              update () {
                console.log('update')
              },
              componentUpdated () {
                console.log('componentUpdated')
              },
              unbind () {
                console.log('unbind')
              }
        }
    }
}

结果：

页面渲染时，触发了 bind 和inserted 函数。那么另外三个钩子函数什么时候会触发呢？

关于 update 的官方解释：

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

有点疑惑，‘ 所在组件的 VNode ’ 是指当前绑定了该指令的 dom 元素吗？如果是的话，是不是只要当前元素的状态发生了变化就会触发 update 呢？如下通过 v-show 来切换元素显示隐藏：

<p v-test v-show="show">这是另外一段文字</p>
<button @click="show = !show">toggle</button>

export default {
  data () {
    return {
      show: true
    }
  }
}

默认还是触发 bind 和inserted ，当点击按钮切换元素的 display 时，结果如下：

即：改变元素的样式的时候触发了 update 和componentUpdated 函数。如果使用 v-if 会触发哪个事件呢？

<p v-test v-if="show">这是另外一段文字</p>
<button @click="show = !show">toggle</button>

结果：

发现 unbind 被触发，因为 v-if 是删除或者重建 dom 元素，当指令绑定的元素被销毁时，会触发指令的 unbind 事件，新建显示仍是触发 bind 和inserted 。

总结：

- bind()：当指令绑定在 HTML 元素上时触发
- inserted()：当指令绑定的元素插入到父节点中的时候触发
- update()：当指令绑定的元素状态/样式、内容(这里指元素绑定的 vue 数据) 发生改变时触发
- componentUpdated()：当 update() 执行完毕之后触发
- unbind()：当指令绑定的元素从 dom 中删除时触发

举几个应用场景的栗子

（1、输入框自动获取焦点(官方示例)。

（2、点击下拉菜单以外的区域隐藏菜单。

（3、输入的邮箱、电话的校验。

上面这几个场合，在做项目的时候可以用其他方法代替，但是 vue 自定义指令能做到一处定义，全局调用，使得代码简洁高效，更便于维护。

指令的注册方式和「过滤器」「混入」「组件」注册的方式一样都分为两种：一是全局注册，二是局部注册。

三、全局指令

// 给元素添加随机背景
<div v-bgcolor></div>
   
Vue.directive('bgcolor', {
    bind: function(el, binding, vnode) {
        el.style.backgroundColor = "#" + Math.random().toString(16).slice(2,8);
    }
})

注意：在定义的时候，指令的名称前面不需要加 v- 前缀，在调用的时候，必须在指定的名称前加上 v-前缀来进行调用

四、局部指令

// 和data, methods同级
methods: {},
directives: {
    bgcolor: {
         bind: function(el, binding) {
            el.style.backgroundColor = "#" + Math.random().toString(16).slice(2,8);
        }
    }
}

我个人更倾向于使用全局注册的方式，因为既然已经使用了自定义指令，应该是通用的可复用的。所以提供整个项目使用的指令才更有价值，而不仅仅只限于某个组件内部。如果单一地方使用直接把功能搂出来就行了，何必费这力气。

五、带参数的自定义指令

<div v-bgcolor='{color: 'orange'}'></div>

Vue.directive('bgcolor', {
    bind: function(el, binding) {
        el.style.backgroundColor = binding.value.color;
    }
})

六、函数简写

如果想在 bind 和 update 时触发相同行为，而不关心其它的钩子，可以这样写:

// 全局
Vue.directive('bgcolor', function (el, binding) {
      el.style.backgroundColor = binding.value
})

// 局部
directives: {
    bgcolor: (el, binding) => {
        el.style.backgroundColor = binding.value  
    }
}

七、应用实例

熟悉指令的创建方式与参数之后，我们就用它来创建两个实际案例。

通过指令来实现点击空白处子菜单隐藏的功能，具体代码如下：

// clickOutside.js
export default {
    bind (el, binding) {
        const self = {} // 定义一个私有变量，方便在unbind中可以解除事件监听
        self.documentHandler = (e) => {
            if (el.contains(e.target)) { // 这里判断绑定的元素是否包含点击元素，如果包含则返回
                return false
            }
            if (binding.value) { // 判断指令中是否绑定了值
                binding.value(e) // 如果绑定了函数则调用那个函数，此处 binding.value就是handleClose方法
            }
            return true
        }
        document.addEventListener('click', self.documentHandler)
    },
    unbind (el) {
        // 解除事件监听
        document.removeEventListener('click', self.documentHandler)
        delete self.documentHandler
    }
}

在组件中使用：

<template>
    <div>
        <div v-show="isShow" v-clickoutside="handleClickOutside" @click="showOrHide">
            子菜单 ... 
        </div>
    </div>
</template>

<script>
    import clickoutside from './js/clickOutside'
    
    export default {
        ... ...
        directives: {
            clickoutside
        },
        data() {
            return {
                isShow: true,
            };
        },
        methods: {
            handleOutsideClick () {
                this.isShow = false
            }
        }
    }
</script>

自定义指令来优化图片的加载：图片在加载过程中，未加载完成时使用灰色背景占位，图片加载完后直接显示

<template>
    <div>
        <!-- 参数不可以直接填写url地址-->
        <img v-imgUrl='url' /> 
    </div>
</template>

<script>
    export default {
        data () {
            return {
                url: '../src/assets/logo.png'
            }
        }
    }
</script>

// 全局注册
Vue.directive('imgUrl', function (el, binding) {
    el.style.backgroundColor = '#FEFEFE' //设置背景颜色
    var img = new Image()
    img.src = binding.value // binding.value 指令后的参数
    img.onload = function () {
        el.style.backgroundColor = ''
        el.src = binding.value
    }
})

posted @ 2022-03-16 11:45 清水紅葉阅读(9) 评论(0) 编辑收藏举报

刷新页面返回顶部

清水紅葉

主方向前端，喜欢研究各种技术

Vue复习其三

自定义指令的钩子函数

三、全局指令

四、局部指令

五、带参数的自定义指令

六、函数简写

七、应用实例

公告

清水紅葉

主方向前端，喜欢研究各种技术

Vue复习 其三

自定义指令的钩子函数

三、全局指令

四、局部指令

五、带参数的自定义指令

六、函数简写

七、应用实例

公告

Vue复习其三