指令

• v-once:只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

• v-html：更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。

  • 不能用于输入框，容易遭受XSS攻击

• v-show：根据表达式之真假值，切换元素的 display CSS 属性。

• v-if / v-else / v-else-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

  • v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

• v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

• v-for：基于源数据多次渲染元素或模板块。（一个数值为一组元素）

• v-on（缩写：@）：绑定事件监听

• v-bind：

  • Class 与 Style 绑定
    • <div v-bind:class="{ active: isActive }"></div>根据isActive是否为true，判断渲染active类
    • <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>,数据在data里面。
  • 组件 - Props：传给子组件

• v-model：在表单控件或者组件上创建双向绑定。

• v-cloak：隐藏页面，直至编译完毕[以免加载数据时闪屏]

  •   [v-cloak] {
          display: none;
      }