OneYoung

Appearance

:innerHtml 会覆盖 v-html

4-1.v-text ​

类似于 DOM 中的 innerText。

:innerText.prop 比 v-text 的权重低。

4-2.v-html ​

类似于 DOM 中的 innerHTML。

:innerHTML.prop 比 v-html 的权重低。

4-3.v-show ​

js
var show = {
  bind: function bind (el, ref, vnode) {
    var value = ref.value;
    vnode = locateNode(vnode);
    var transition$$1 = vnode.data && vnode.data.transition;
    // __vOriginalDisplay保留了一份原始的display值
    var originalDisplay = el.__vOriginalDisplay =
      el.style.display === 'none' ? '' : el.style.display;
    if (value && transition$$1) {
      vnode.data.show = true;
      enter(vnode, function () {
        el.style.display = originalDisplay;
      });
    } else {
      el.style.display = value ? originalDisplay : 'none';
    }
  }
}

true 本身的 display 值，即 __vOriginalDisplay

false display: none;

4-4.v-if ​

v-if

v-else

v-else-if

v-if 与 v-else 的代码块之间会复用。如果不想要复用，给元素添加 key 属性。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

4-5.v-for ​

v-for in

v-for of

可以用以遍历值、数组、对象。

当处于同一节点时，v-for 的优先级比 v-if 更高。

Vue 不推荐在同一节点上同时使用 v-for 与 v-if。

4-6.v-bind ​

别名可使用 :

  1. 当在一个自定义组件上使用 class 或 style 时，这些 class 、 style 将被添加到该组件的根元素上面。这个元素上已经存在的 class 、style 不会被覆盖。
  2. 利用 v-bind 绑定的 attribute 权重要比 HTML 本身的 attribute 高。前者覆盖后者。

4-7.v-on ​

别名可使用 @

  1. 原生 DOM 事件。在 DOM 元素上直接利用 v-on 绑定事件名。
  2. 自定义组件。利用 $emit 触发事件。

4-8.v-model ​

v-model 其实是一种语法糖。

html
<input type="text" v-model="message">

等于

html
<input type="text" :value="message" @input="message = $event.target.value">

4-9.v-slot ​

插槽

4-10.v-pre ​

跳过这个元素和它的子元素的编译过程。

可以用来显示原始 Mustache 标签。

跳过大量没有指令的节点会加快编译。

html
<span v-pre>{{ 'this will not be compiled' }}</span>

4-11.v-cloak ​

这个指令保持在元素上直到关联实例结束编译。

和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

4-12.v-once ​

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

即渲染完成后，后续该 DOM 的响应式更新并不会触发。

自定义指令 ​

定义一个全局指令 v-focus：

js
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

或者定义一个局部指令：

js
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

1.钩子函数 ​

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

  • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

  • inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

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

  • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

  • unbind：只调用一次，指令与元素解绑时调用。

2.钩子函数参数 ​

  • el：指令所绑定的元素，可以用来直接操作 DOM。
  • binding：一个对象，包含以下 property：
    • name：指令名，不包括 v- 前缀。
    • 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 }。
  • vnode：Vue 编译生成的虚拟节点。
  • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

3.函数简写 ​

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

js
Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

因为在 Vue 内部源码是这样作处理的：

js
function normalizeDirectives(options: Record<string, any>) {
  const dirs = options.directives
  if (dirs) {
    for (const key in dirs) {
      const def = dirs[key]
      if (isFunction(def)) {
        dirs[key] = { bind: def, update: def }
      }
    }
  }
}