Vue3——模板语法（文本插值、vue内置指令）
文章目录
- 文本插值{{}}
- 受限的全局访问
- 指令Directives
-
- 指令的参数
- 指令的修饰符
- vue3的内置指令
-
- 渲染文本内容（v-text）
- 渲染html （v-html）
- 单项绑定（v-bind）
-
- 单项绑定的使用
- 单项绑定v-bind的简写
- 同名简写
- 动态绑定多个值
- 修饰符
- 双向绑定（v-modal）
-
- 简写
- 响应式
- 修饰符
- 适用范围限制
- 控制元素可见性（ v-show ）
- 条件渲染（v-if）
- v-else
- v-else-if
- 循环渲染（v-for）
- 事件绑定（ v-on）
-
- 简写
- 修饰符
- 动态事件
- 插件绑定（v-slot）
-
- 标签限制
- 原样渲染（ v-pre）
- 单次渲染（v-once）
- 缓存更新（v-memo）
-
- 使用
- 与 v-for 一起使用
- v-cloak
Vue 使用一种基于
HTML 的模板语法，使我们能够 声明式地将其组件实例的数据绑定到呈现的 DOM 上。
文本插值{{}}
最基本的数据绑定形式是文本插值{{}}，即双大括号，双大括号里面的值是js表达式，常见的有：变量、三元表达式等。
<span>Message: {{ msg }}</span>
双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。
受限的全局访问
模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。
沙盒化：
将运行的模板隔离在特定的环境中，避免应用的其他模板对改模板造成影响。
全局对象列表中会暴露常用的内置全局对象，比如 Math 和 Date。没有显式包含在列表中的全局对象将不能在模板内表达式中访问，例如用户附加在 window 上的属性。然而，你也可以自行在 app.config.globalProperties 上显式地添加它们，供所有的 Vue 表达式使用。
指令Directives
指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令。
- 一个指令的任务是在其
表达式的值变化时响应式地更新 DOM
指令的参数
- 某些指令会需要一个
参数，在指令名后通过一个冒号隔开做标识。
<a v-bind:href="url"> ... </a>
<a v-on:click="doSomething"> ... </a>
- 指令的参数也可以是动态的，使用中括号
[]包裹就可以了。
<a v-bind:[attributeName]="url"> ... </a>
<!-- 简写 -->
<a :[attributeName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>
<!-- 简写 -->
<a @[eventName]="doSomething"> ... </a>
- 动态参数的限制条件：
- 动态参数中表达式的返回值应该是一个字符串，或者是 null
- 动态参数的表达式中不应该出现空格和引号，如果必须用，建议使用计算属性来代替
<!-- 这会触发一个编译器警告 -->
<a :['foo' + bar]="value"> ... </a>
如果是直接编写在html中的模板，我们需要避免在名称中使用大写字母，因为浏览器会强制将其转换为小写：
...
面的例子将会在 DOM 内嵌模板中被转换为 :[someattr]。
如果变量的取值是“someAttr”是，将会在 DOM 内嵌模板中被转换为 :someattr。
且你的组件拥有 “someAttr” 属性而非 “someattr”，这段代码将不会工作。
单位文件组件没有此限制
指令的修饰符
指令也可以添加修饰符，修饰符是是以.开头的特殊后缀:
<form @submit.prevent="onSubmit">...</form>
.prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()：
vue3的内置指令
渲染文本内容（v-text）
用于渲染元素的文本内容。
原理：v-text 通过设置元素的 textContent 属性来工作，因此它将覆盖元素中所有现有的内容。
<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>
渲染html （v-html）
如果有一个变量存储一段html的字符串，可以被渲染成对应的节点，直接使用文本插值或v-text的方法是没有办法将该变量渲染成html片段的。
这是因为，双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令：
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
在单文件组件，scoped 样式将不会作用于 v-html 里的内容，
因为 HTML 内容不会被 Vue 的模板编译器解析。
可是使用全局的css样式来为v-html中的内容添加样式
单项绑定（v-bind）
动态的绑定一个或多个 attribute，也可以是组件的 prop。
当用于组件 props 绑定时，所绑定的 props 必须在子组件中已被正确声明。
单项绑定的使用
使用
在属性名之前使用 v-bind:指令，使用该指令表示该属性的属性值是一个js表达式 ，js表达式会通过vue实例获取值然后再赋值给该属性:
<div v-bind:id="dynamicId"></div>
单项绑定v-bind:的作用就是将变量赋值给标签的属性，同时标签的属性值会随着变量的变化而变化。
响应式
如果通过v-bind绑定的变量是响应式的，那么，当变量修改时就会触发v-bind重新获取最新的值，将最新的值赋值给属性。从而达到变量值一修改对应的属性值就修改的效果。这种效果正是我们想要的。
单项绑定v-bind的简写
因为 v-bind 非常常用，我们提供了特定的简写语法:， 即v-bind：属性可以直接简写成:属性
上述案例简写为
<div :id="dynamicId"></div>
同名简写
如果 attribute 的名称与绑定的 JavaScript 值的名称相同，那么可以进一步简化语法，省略 attribute 值：
<!-- 与 :id="id" 相同 -->
<div :id></div>
<!-- 这也同样有效，不简写v-bind，之简写名称 -->
<div v-bind:id></div>
动态绑定多个值
如果一个标签含有多个单项绑定的属性值，可以使用v-bind的对象模式进行绑定。
eg：
const objectOfAttrs = {
id: 'container',
class: 'wrapper'
}
通过不带参数的v-bind可以将他们绑定到单个元素上
<div v-bind="objectOfAttrs"></div>
此时div就被绑定了名为id和class的了两个属性值
修饰符
-
.camel- 将短横线命名的 attribute 转变为驼峰式命名。 -
.
prop- 强制绑定为 DOM property。 -
.attr- 强制绑定为 DOM attribute。 -
作为prop使用的时候可以简写成
.
<div :someProperty.prop="someObject">div>
<div .someProperty="someObject">div>
双向绑定（v-modal）
在表单输入元素或组件上创建双向绑定。也需要指定属性值，一般属性值就是value，绑定格式是v-model:value="绑定的值"
<input v-model:value="model" />
简写
因为绑定的属性值一般都是value，所以value可以简写
<input v-model="model" />
响应式
双向绑定带来的效果是：当表单元素绑定的值修改，页面上表单的输入值也会修改（v-bind也能实现）；而且当页面表单的输入只修改后，表单元素绑定的值也会修改（v-bind无法实现）。
修饰符
.lazy- 监听 change 事件而不是 input.number- 将输入的合法字符串转为数字.trim- 移除输入内容两端空格
适用范围限制
v-model的使用仅限输入组件