天天看点

Vue指令的详细介绍

今天给朋友们介绍Vue指令的用处:

  1. v-bind     - -     可简写为 : 动态绑定属性值的时候使用
  2. v-on     - -     可简写为 @ 添加事件监听的时候使用
  3. v-model     - -     与数据实时关联,一般用于input,textarea
  4. v-text     - -     设置文本内容
  5. v-html     - -     设置html文本
  6. v-pre     - -     保留格式
  7. v-clock     - -     一般与[v-cloak] { display: none }一起用,在数据未渲染时隐藏数据
  8. v-if     - -     用作判断元素是否显示
  9. v-else     - -     与v-if配对使用(与JS当中的if else 一样)
  10. v-else-if     - -     同上
  11. v-for     - -     循环遍历某数组,数组多长就遍历多少次添加多少次的DOM
  12. v-show     - -     用作显示隐藏元素
  13. v-slot     - -     插槽
  14. v-once     - -     只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

​v-if与v-show都是用作于显示隐藏元素,那么它们有什么区别呢?​

  • v-if是创建和移除DOM
  • v-show是修改DOM的display的属性值
  • v-if一般用作于少次数的显示隐藏DOM,因为它的切换开销比较大。
  • v-show一般用作于频繁的显示隐藏DOM,但是初始化的时候不建议使用,因为它的初始化开销比较大。

​小总结:​

只初始化一次的时候用v-if