一、概述

Vue 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

template

一个字符串模板,用作 component 实例的标记。模板将会 替换 所挂载元素的 innerHTML。挂载元素的任何现有标记都将被忽略,除非模板中存在通过插槽分发的内容。

提示:template 并不会渲染到 DOM 上。

二、插值

数据绑定最常见的形式就是使用 “Mustache” (双大括号) 语法的文本插值:

  1. <span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应组件实例中 msg property 的值。无论何时,绑定的组件实例上 msg property 发生了改变,插值处的内容都会更新。

接下来我们看一组示例:

  1. <script setup lang="ts">
  2. const msg = 'Hello, vue3.x!';
  3. const htmlStr = '<div>Name: Li-HONGYAO</div>'
  4. const isLogin = false;
  5. const letetrs = "ABCDE";
  6. const className = "wrap";
  7. </script>
  8. <template>
  9. <!-- Mustache -->
  10. <div>{{ msg }}</div>
  11. <!-- v-text:指令 -->
  12. <div v-text="msg"></div>
  13. <!-- v-html:指令(可以识别HTML标签) -->
  14. <div v-html="htmlStr"></div>
  15. <!-- 表达式 -->
  16. <div>LoginStatus:{{ isLogin ? '已登录' : '未登录'}}</div>
  17. <div>{{letetrs.split("").reverse().join("")}}</div>
  18. <!-- 属性绑定 -->
  19. <div :class="className"></div>
  20. </template>

提示:如果你希望绑定响应式数据,则需要使用 refreactive 包裹。

三、指令、参数、修饰符

这里主要介绍三者的概念,具体指令及参数和修饰符,会在后续的示例中提现:

1)指令:带有 v- 前缀的特殊属性。

2)参数:在指令后以冒号指明。

3)修饰符:是以. 指明的特殊后缀,用于指出特殊何种方式绑定

  1. <div v-bind:class="className"></div>
  2. <input type="text" v-model.number="num">
  3. <button type="button" v-on:click="login">登录</button>

上述示例中:

  • 指令:v-bind(动态绑定属性) / v-model(数据双向绑定) / v-on(绑定事件)
  • 参数::class(表示绑定 class 属性) / :click(表示绑定 click 事件)
  • 修饰符.number(表示将输入框的值转换成 number 类型)

四、用户输入

input 输入框中我们可以使用 v-model 指令来实现双向数据绑定:

  1. <script setup lang="ts">
  2. import { ref } from 'vue';
  3. // state
  4. const inputValue = ref('');
  5. // events
  6. const onButtonTap = () => {
  7. inputValue.value = "I'm studing!";
  8. };
  9. </script>
  10. <template>
  11. <div style="margin: 10px 0;">Enter Content:{{ inputValue }}</div>
  12. <!-- 通过 v-model 指令实现双向绑定 -->
  13. <!-- 1)更新inputValue 的值刷新视图 -->
  14. <!-- 2)在输入框输入内容,更新 inputValue -->
  15. <button type="button" @click="onButtonTap" style="margin-right: 10px;">手动修改 inputValue</button>
  16. <input type="text" v-model="inputValue" placeholder="请输入文本" />
  17. </template>

示例如下:

v-model.gif

五、绑定事件

v-on 指令可以绑定事件监听器:

  1. <script setup lang="ts">
  2. // 事件处理函数
  3. const onButtonTap = () => {
  4. console.log('The button tag is clicked!');
  5. };
  6. </script>
  7. <template>
  8. <button type="button" @click="onButtonTap">Tap Me.</button>
  9. </template>

提示:事件处理的更多知识点请查看 《事件处理器章节》

六、缩写

Vue 为两个最为常用的指令提供了特别的缩写:

1、v-bind

v-bind 指令允许使用 : 替代,后面跟具体绑定的属性名,如下所示:

  1. <!-- 完整语法 -->
  2. <a v-bind:href="url"></a>
  3. <!-- 缩写 -->
  4. <a :href="url"></a>

2、v-on

v-on 指令允许使用 @ 替代,后面跟具体的事件名,如下所示:

  1. <!-- 完整语法 -->
  2. <a v-on:click="doSomething"></a>
  3. <!-- 缩写 -->
  4. <a @click="doSomething"></a>

七、模板编译原理

  • 第一步:将 模板字符串 转换成 element ASTs(解析器)
  • 第二步:对 AST 进行静态节点标记,主要用来做虚拟DOM的渲染优化(优化器)
  • 第三步:使用 element ASTs 生成 render 函数代码字符串(代码生成器)