vue学习--模板语法(二、指令&数据绑定)

合集 - Vue学习(5)

1.vue学习--模板语法(一、概述&基本使用)2022-09-15

2.vue学习--模板语法(二、指令&数据绑定)2022-09-15

3.vue学习--模板语法(三、事件绑定)2022-09-154.vue学习--模板语法(四、属性样式绑定&流程语句)2024-05-095.vue学习--模板语法(五、选项卡案例)2024-05-09

收起

指令

1.什么是指令？

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

2.v-cloak指令用法

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

1.提供样式
2.在插值表达式所在标签中添加v-cloak指令

[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ message }}
</div>

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

3.数据绑定指令

• v-text 填充纯文本

  ① 相比插值表达式更加简洁

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

• v-html 填充HTML片段

  ① 存在安全问题

  ② 本网站内部数据可用，来自第三方数据不可用

<div v-html="html"></div>

• v-pre 填充原始信息

  ① 显示原始信息，跳过编译过程（分析编译过程）

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

4.数据响应式

• 如何理解

  ① html5中的响应式（屏幕尺寸的变化导致样式的变化）

  ② 数据响应式（数据的变化导致页面内容的变化）

• 什么是数据绑定

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

• v-once 只编译一次

  ① 显示内容之后不再具有响应式功能

  如果显示的信息后续不需要在修改，可以使用，提高性能。

双向数据绑定

1.什么是双向数据绑定？

2.双向数据绑定分析

• v-model指令用法

<input type = 'text' v-model = 'uname' />

3.MVVM设计思想

①M（model）

②V（view）

③VM（view-model）