美文网首页
vue directives指令总结

vue directives指令总结

作者: 泽赫 | 来源:发表于2019-03-28 10:12 被阅读0次

Vue指令和Vue组件之间的关系

很多时候,对于初学者来说,看完指令的使用会发现组件的使用和指令的自定义有几分相似之处。其实,并非如此,组件和指令完全不是一个层级上的概念。打个比方:组件是一个房子,它可以嵌套使用,房子里边又有窗户,门,桌子,床,柜子等这些子组件。而指令是附着在组件上的某种行为或者功能,门和窗户可以打开关闭,桌子可以折叠,柜子可以打开关上等等。以下是对于组件和指令的定义,希望能够让大家更清晰的理解:
组件:一般是指一个独立实体,组件之间的关系通常都是树状。
Vue指令:用以改写某个组件的默认行为,或者增强使其获得额外功能,一般来说可以在同一个组件上叠加若干个指令,使其获得多种功能。比如 v-if,它可以安装或者卸载组件。

Vue 指令生命周期

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

生命周期函数中的参数

el: 指令所绑定的元素,可以用来直接操作 DOM,就是放置指令的那个元素。
binding: 一个对象,里面包含了几个属性,这里不多展开说明,官方文档上都有很详细的描述。
vnode:Vue 编译生成的虚拟节点。
oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用

实例

1.用来操作DOM

Vue.directive('img',{
    //DOM
    inserted:function(el,binding){
        var color =Math.floor(Math.random()*1000000);
        el.style.backgroundColor = '#' + color;
        var img = new Image();
        img.src = binding.value;
        img.onload = function(){
            el.style.backgroundImage = 'url(' + binding.value + ')';
        }
    }
})
<div v-img="val.url" v-for="val in list"></div>
//此处图片路径为示意结果,为了能够更好的看出本段测试代码的效果,建议大家选择网上比较高清的图片
list:[
    {url:'1.jpg'},
    {url:'1.jpg'},
    {url:'1.jpg'}
]

2.用于集成第三方插件

var hljs = require('highlight.js');
Vue.directive('highlight',function(el){
    hljs.hightlightBlock(el);
})
<pre>
    <code v-hightlight>&lt;alert-menu
        :menudata="menu"
        :e="eventObj"
        ref="menu"
        v-on:menuEvent="handle"&gt;
        &lt;/alert-menu&gt;
    </code>
</pre>

3.扩展第三方组件指令 比如<mt-input></mt-input> 等,此时用局部指令表述

directives: {
    'mtfocus' (el, binding, vnode) {
      let mtinput = el.querySelector('input')
      mtinput.onfocus = function () {
       ...//如果要对节点的数据进行更改,且更改要映射到页面上,则更改可在vnode.context上进行,这样,改完之后,改变就会映射到页面
      }
      mtinput.onblur = function () {
        ...//同上理
      }
    }
  }

相关文章

  • vue directives指令总结

    Vue指令和Vue组件之间的关系 很多时候,对于初学者来说,看完指令的使用会发现组件的使用和指令的自定义有几分相似...

  • vue学习(25)自定义指令

    知识点 1:局部指令new Vue({directives:{指令名,配置对象}})new Vue({direct...

  • 2021-01-26

    vue中自定义拖拽指令 指令(局部指令) directives:{ drag(el,bindings){ el.o...

  • vue2中的directives

    directives: 用于自定义vue指令 注册全局自定义指令:调directive(id, fun) 注册局部...

  • vue-选项 / 资源

    directives 类型:Object 详细: 包含 Vue 实例可用指令的哈希表。 参考:自定义指令 filt...

  • 02、vue常用指令

    vue官网 在vue中,指令 (Directives) 是带有 v- 前缀的特殊属性,指令属性的值预期是单个 Ja...

  • Vue中基本指令用法

    指令在Vue中是个很重要的功能,在Vue项目中是必不可少的。根据官网的介绍,指令 (Directives) 是带有...

  • 3.vue模板语法

    vue模板语法 指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaSc...

  • vue3.2 setup 之局部自定义指令

    在vue3.x中,注册局部自定义的指令是在setup方法外面,directives下面便可自定义指令,那在vue3...

  • Vue.js 指令与事件

    指令(Directives)是 Vue.js 模板中最常用的一项功能,它带有前缀v-,在前文我们已经使用过不少指令...

网友评论

      本文标题:vue directives指令总结

      本文链接:https://www.haomeiwen.com/subject/cdufbqtx.html