指令

什么是指令？

  • 什么是自定义属性
  • 指令的本质就是自定义属性
  • 指令的格式：以v-开始（比如：v-cloak）

v-cloak指令

  • 插值表达式存在的问题：“闪动”
  • 如何解决该问题：使用v-cloak指令
  • 解决该问题的原理：先隐藏，替换好值之后再显示最终的值

闪动问题：当网络出现延迟，会出现一些加载顺序延迟先加载html内容，若有插值表达式则会先显示{-{xxx}-},才会显示js的代码。

image-20200203195747163

image-20200203195830334

v-cloak指令的用法

  1. 提供样式

    1
    2
    3
    [v-cloak]{
              display: none;
            }

  2. 在插值表达式所在的标签中添加v-cloak指令

    image-20200203200715975

背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果

数据绑定

什么是数据绑定 ？

数据绑定：将数据填充到标签中

数据绑定指令

指令 作用 优劣
v-text 填充纯文本 相比插值表达式更加简洁,不存在闪动问题
v-html 填充HTML片段 存在安全问题。本网站内部数据可以使用，来自第三方的数据不使用
v-pre 填充原始信息 显示原始信息，跳过编译过程

image-20200203201701589

image-20200203201831661

数据响应式

如何理解响应式

  • html5中的响应式（屏幕尺寸的变化导致样式的变化）
  • 数据的响应式（数据的变化导致页面内容的变化

v-once指令

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

v-once 只编译一次 显示内容之后不再具有响应式功能

image-20200205161617663

image-20200205161855971