跟我一起学Vue3——模板语法

Shang
133 阅读3分钟

前言

⭐️ 本专栏主要内容为「 Vue3官方文档 」的学习过程 ✍🏼

⭐️ 本专栏适合人群：Vue小白、学完一遍Vue的掘友 👨🏼‍💻

⭐️ 本专栏的阅读顺序和官方文档顺序相同 📖

⭐️ 英雄不问出处，这个专栏一定让你收获满满 🥳！

⭐️ 静心，思考，实操，坚持，巩固，满载而归 🥰！

⭐️ 欢迎各位掘友在评论区交流 🤡

本节内容

  • v-html

  • v-bind

  • 指令

  • 缩写

第四章 模板语法

第一节 插值

插值：插文本值、插原始HTML、插Atrribute

文本

Mustache（双大括号）语法的文本插值

<span>我是 {{ name }}</span>

这个name是双向绑定的

我想让这个name在数据变化时，name不更新，可以使用v-once指令，一次性地插值

<span v-once>不改变 {{ name }}</span>

示例：Github

<div class="inter">
  <span>我是 {{ name }}</span>
  <br>
  <span v-once>我是 {{ name }}</span>
  <br>
  <button @click="changeName">改变</button>
</div>

<script>
  const inter = {
		data() {
			return {
				name: 'shang'
			}
		},
		methods: {
			changeName() {
				this.name = 'enbo'
			}
		}
	}
	Vue.createApp(inter).mount('.inter')
</script>

改变前：

image-20220408154418812.png

改变后：

image-20220408154435262.png

HTML

双大括号会将数据解释为普通文本，而不是HTML代码，如果想输出真正的HTML，可以使用v-html指令

<p>Mustache {{ rawHTML }}</p>
<p>
  v-html directive <span v-html="rawHTML"></span>
</p>

示例：Github

<div class="html-inter">
  <p>Mustache: {{ rawHTML }}</p>
  <p>v-html directive: <span v-html="rawHTML"></span></p>
</div>

<script>
  const inter = {
    data() {
      return {
        rawHTML: `<span style="color:blue;">this is a html sentence</span>`,
      };
    }
  };
  Vue.createApp(inter).mount(".html-inter");
</script>

效果：

image-20220408155001317.png

Attribute 属性

双括号不能在HTML 标签的属性中使用，可以使用v-bind

<div v-bind:id="dynamicId"></div>

如果绑定值为null或undefiend，那么这个属性不会被包含在渲染的元素上

<button v-bind:disabled="isButtonDisabled">按钮</button>

对于布尔值的属性，如果isButtonDisabled值为falsy，这个属性会被省略

Truthy（真值）：除假值以外的值皆为真值

Falsy（假值）：false、0、-0、0n、""、''、``、null、undefined、NaN

示例代码：Github

示例1 null或undefiend:

<div class="attribute-inter">
  <div v-bind:id="dynamicId"></div>
  <div v-bind:id="dynamicId1"></div>
  <div v-bind:id="dynamicId2"></div>
  <button v-bind:disabled="isButtonDisabled1">按钮</button>
  <button v-bind:disabled="isButtonDisabled2">按钮</button>
</div>

<script>
  const inter = {
    data() {
      return {
        dynamicId: 'id',
        dynamicId1: null,
        dynamicId2: undefined,
      };
    }
  };
  Vue.createApp(inter).mount(".attribute-inter");
</script>

效果:

image-20220408160638031.png

示例2 布尔属性:

<div class="attribute-inter">
  <button v-bind:disabled="isButtonDisabled1">按钮</button>
  <button v-bind:disabled="isButtonDisabled2">按钮</button>
</div>

<script>
  const inter = {
    data() {
      return {
        isButtonDisabled1: true,
        isButtonDisabled2: false
      };
    }
  };
  Vue.createApp(inter).mount(".attribute-inter");
</script>

效果:

image-20220408160650351.png

JavaScript 表达式

我们可以在 双括号内 和 v-bind指令下 加入 js 表达式。

对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!--  这是语句，不是表达式：-->
{{ var a = 1 }}

<!-- 流程控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

第二节 指令

指令时带有 v- 前缀的特殊 atrribute。

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

这里主要说明动态参数和修饰符

动态参数

在指令参数中使用 JavaScript 变道时，方法是用 方括号 括起来

<a v-bind:[attributeName]="url"> ... </a>

<!-- 也可以使用动态参数为一个动态的事件名绑定处理函数 -->
<a v-on:[eventName]="doSomething"> ... </a>

这里 attributeName 会被作为一个JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。

对动态参数值约定

动态参数预期会求出一个字符串，null 例外。这个特殊的 null 值可以用于显式地移除绑定。任何其它非字符串类型的值都将会触发一个警告。

示例：Github

<div class="dynamicParam">
  <div v-bind:[name]="dynamicId"></div>
  <div v-bind:[name1]="dynamicId"></div>
  <div v-bind:[name2]="dynamicId"></div>
</div>

<script>
  const inter = {
    data() {
      return {
        dynamicId: 'name',
        name: 'class',
        name1: 'id',
        name2: null
      };
    }
  };
  Vue.createApp(inter).mount(".dynamicParam");
</script>

对动态参数表达式约定

动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。例如：Github

<div class="dynamicExpression">
	<a v-bind:['foo' + bar]="value"> ... </a>
</div>

// Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '+' is not a valid attribute name. 
// 在“Element”上执行“setAttribute”失败:“+”不是一个有效的属性名。

所以在这里使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式

还有一个约定就是，不要用大写字符来命名属性名，浏览器会把attribute名全部强制转为小写。

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

第三节 缩写

v-bind

<!-- 完整语法 -->
<a v-bind:href="url"> ... </a>

<!-- 缩写 -->
<a :href="url"> ... </a>

<!-- 动态参数的缩写 -->
<a :[key]="url"> ... </a>

v-on

<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>

<!-- 缩写 -->
<a @click="doSomething"> ... </a>

<!-- 动态参数的缩写 -->
<a @[event]="doSomething"> ... </a>

结语

专栏同步代码：Github ⎋

掘金社区：跟我一起学Vue3

作者简介：

一个满脑子奇怪知识的小商同学，在校ing，懂点设计，懂点排版，为成为一名优秀的前端工程师而努力。

avatar
文章
阅读
粉丝