vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue自定义指令

Vue自定义指令详细

作者:wzp123321

这篇文章主要介绍了Vue自定义指令,文章从背景开始详细介绍Vue自定义指令的详细内容,随着Vue自定义指令的相关资料展开具体内容,需要的朋友可以参考一下

1、背景

最近在面试找工作,然后面试官就问了有关自定义指令的问题,然后由于平时自定义指令用的不多,只是看过官方文档大概知道需要用到Vue.directive来自定义指令;面试结束之后,立刻就去网上找有关自定义指令的资料,发现自定义指令还是有很多学问的,于是就想写个博客记录下也是鞭策自己,要多尝试,多学习!!!

这是官方文档有关自定义指令的模块;自定义指令包括全局自定义指令以及局部自定义指令

2、局部自定义指令

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

@Component({
  name: "CustomDirectives",
  components: {},
  directives: {
    //   局部自定义指令
    custom1: {
      inserted(el) {
        console.log("el", el);
        el.style.position = "absolute";
        el.style.top = " 50%";
        el.style.left = "50%";
        el.style.transform = "translate(-50%,-50%)";
        el.innerText = "加载中...";
        el.style.padding = "10px";
        el.style.color = "#333";
      },
    },
  },
})

3、全局自定义指令

Vue.directive("custom2", {
  inserted(el, binding) {
    console.log("binding", binding);
    if (binding && binding.value) {
      el.innerText = "测试全局自定义指令";
      console.log("el", el);
      el.style.position = "absolute";
      el.style.top = " 50%";
      el.style.left = "50%";
      el.style.transform = "translate(-50%,-50%)";
      el.style.padding = "10px";
      el.style.color = "#333";
    }
  },
});

4.1 自定义指令钩子函数

4.2 钩子函数参数

包含以下 property:

4.3 动态指令传参

Vue.directive("custom2", {
  inserted(el, binding) {
    console.log("binding", binding);
    if (binding && binding.value) {
      el.innerText = "测试全局自定义指令";
      console.log("el", el);
      el.style.position = "absolute";
      el.style.top = " 50%";
      const arg = (binding as any).arg;
      el.style[arg] = "50%";
      el.style.transform = "translate(-50%,-50%)";
      el.style.padding = "10px";
      el.style.color = "#333";
    }
  },
});


 <div v-custom2:[direction]="true"></div>
 
  private direction= 'left';

5、拓展

问完自定义指令之后,面试官又问了你平时都用到哪些默认的指令?
我回答:v-for v-if v-show v-model等等
然后问题就来了---v-for和v-if能同时使用吗
我答:不能,同时使用会有性能问题。
问:为什么会有性能问题?
我答:如果每一次都需要遍历整个数组,将会影响速度,尤其是当之需要渲染很小一部分的时候。
问:那如何避免v-for和v-if一起使用呢?
我:??? 工作中这种情况遇到的不多,一般都是把v-if放到遍历的循环里面,(其实还是有性能问题)
面试结束之后,去查了下资料,网上说v-forv-if不应该一起使用,必要情况下应该替换成computed属性。

到此这篇关于Vue自定义指令详细的文章就介绍到这了,更多相关Vue自定义指令内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文