_洋
_洋

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的使用仅限输入组件