vue高级知识点集合

1 . Class绑定在不同环境下的用法

class绑定分为两种， 一种是对象类型, 一种是数组类型。 如下情况：

// 对象类型
:class="{ active: isActive, 'text-danger': hasError }"

data: {
  isActive: true,
  hasError: false
}

// 数组类型
:class="[activeClass, errorClass]"

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

区别：

1. 对象类型用于已知class类名情况下使用，因为key是不会变的。value可以做运算符操作。
2. (重点) 数组类型用于不具名绑定类。通常用于处理props传参进来class类名，结合还需要绑定其本组件它类名情况， 如以下情况：取自element-ui中 el-popover源码部分。其中第一个参数：popperClass为 props传递进来的参数， 有传的话会绑定上去， 没传的话会自动忽略

:class="[popperClass, ifTrue && 'el-popover--plain','default']"

补充： ifTrue 的值为true的时候会取右边的值，ifTrue 相当于对象类型中的isActive，hasError。判断是true或者false即可。

总结 ： 当需要props传class进来的时候使用数组类型， 其余部分使用object类型

2. this.$el

当前组件下最外层原生dom
使用场景 ： 点击当前组件之外位置，隐藏该组件

this._close = (e)=>{
      if(this.$el.contains(e.target)) return
        this.$emit('hide')
    }
document.body.addEventListener('click', this._close)

3. $ref配合原生中classList使用

以下为element-ui操作dom的class部分

// 判断是否有class
export function hasClass(el, cls) {
  if (!el || !cls) return false;
  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
  if (el.classList) {
    return el.classList.contains(cls);
  } else {
    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
  }
};

// 添加class
export function addClass(el, cls) {
  if (!el) return;
  var curClass = el.className;
  var classes = (cls || '').split(' ');

  for (var i = 0, j = classes.length; i < j; i++) {
    var clsName = classes[i];
    if (!clsName) continue;

    if (el.classList) {
      el.classList.add(clsName);
    } else if (!hasClass(el, clsName)) {
      curClass += ' ' + clsName;
    }
  }
  if (!el.classList) {
    el.setAttribute('class', curClass);
  }
};

// 删除class
export function removeClass(el, cls) {
  if (!el || !cls) return;
  var classes = cls.split(' ');
  var curClass = ' ' + el.className + ' ';

  for (var i = 0, j = classes.length; i < j; i++) {
    var clsName = classes[i];
    if (!clsName) continue;

    if (el.classList) {
      el.classList.remove(clsName);
    } else if (hasClass(el, clsName)) {
      curClass = curClass.replace(' ' + clsName + ' ', ' ');
    }
  }
  if (!el.classList) {
    el.setAttribute('class', trim(curClass));
  }
}

持续更新~