Vue3.x 全家桶 | 08 - Vue 的 Mustache 语法

一、Vue 的模板语法

前面通过七篇文章我们已经了解 Vue 中的基本语法以及核心的 Options API，在此基础上我们将会深入的了解 Vue 中的语法以及指令和其他的 API 的使用。

在 Vue 的开发中大多数情况下都是使用基于 HTML 的模板语法，在模板中允许开发者以声明式的方式将 DOM 和底层组件实例的数据绑定在一起，Vue 的底层会将模板编译成虚拟 DOM 渲染函数。

Vue 的模板语法包括了 Mustache 插值语法以及各种 v- 开头的指令：

文本插值： 使用双大括号 {{ }} 进行文本插值，将数据绑定到视图中。
指令（Directives）： 指令是带有 v- 前缀的特殊属性，用于在模板中添加一些特殊的行为。
- 条件渲染（v-if、v-else-if、v-else）：
- 列表渲染（v-for）：
- 事件绑定（v-on）：
- 双向绑定（v-model）：
- 属性绑定（v-bind）：
计算属性： 使用 computed 属性定义计算属性，可以在模板中使用。
事件处理： 在模板中可以直接调用定义在 methods 中的方法。
过滤器： 使用过滤器可以在插值中对数据进行处理。

通过这些语法，我们可以方便地处理数据绑定、条件渲染、列表渲染、事件处理等方面的逻辑。Vue 模板语法的设计目标是简单、直观，使得开发者能够更容易理解和维护视图代码。

二、Mustache 插值语法

如果我们希望把数据展示到模板 template 上，可以使用 Mustache 插值语法，也就是 {{}} 这种形式，插值语法中不仅可以展示变量也可以展示 JS 表达式。

渲染变量的值

创建 HTML 页面，使用 data 选项定义一个变量，并使用 {{}} 在模板中渲染变量的值：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>1.显示变量的值:</h2>
    <h3>{{message}}</h3>
  </div>

  <script src="../lib/vue.js"></script>
  <script>
    // 创建 app
    const app = Vue.createApp({
      data: function(){
        return {
          message: 'Hello Vue'
        }
      }
    })

    // 挂载 app
    app.mount('#app')
  </script>
</body>
</html>

使用 LiverServer 打开 HTML 页面：

渲染 JS 表达式的值

插值语法可以直接渲染变量的值，还可以渲染JS表达式的值：

html 复制代码

<h2>2.显示JS表达式的值:</h2>
<h3>{{message.split(" ")}}</h3>

刷新 HTML 页面：

渲染对象的属性值

在 data 选项中定义一个 Vehicle 对象：

js 复制代码

// 创建 app
const app = Vue.createApp({
  data: function(){
    return {
      message: 'Hello Vue',
      vehicle: {
        name: "Model 3",
        factory: "Shanghai Giga Factory",
        volume: 1800000
      }
    }
  }
})

// 挂载 app
app.mount('#app')

使用插值语法渲染对象的属性，使用打点 . 的方式：

html 复制代码

<h2>3.显示对象属性的值:</h2>
<h3>{{vehicle.name}}</h3>

刷新 HTML 页面：

渲染三元表达式的值

插值语法还支持显示三元表达式的值：

html 复制代码

<h2>4.显示JS三元表达的值:</h2>
<h3>{{vehicle.volume > 1800000 ? "Model 3 完成销量目标":"Model 3 没有完成销量目标"}}</h3>

刷新 HTML 页面：

调用 methods 选项中的函数

在 methods 选项中定义函数：

js 复制代码

// 创建 app
const app = Vue.createApp({
  data: function(){
    return {
      message: 'Hello Vue',
      vehicle: {
        name: "Model 3",
        factory: "Shanghai Giga Factory",
        volume: 2000000
      }
    }
  },
  methods: {
    getCurrentTime(){
      return "2023-12-22"
    }
  },
})

// 挂载 app
app.mount('#app')

插值表达式支持调用 methods 选项中定义的函数：

html 复制代码

<h2>6.调用 methods 中的函数:</h2>
<h3>{{ getCurrentTime() }}</h3>

刷新 HTML 页面：

并且可以使用 data 选项中返回的变量作为参数：

js 复制代码

methods: {
    getCurrentTime(message){
      return "2023-12-22" + message
    }
},

html 复制代码

<h2>6.调用 methods 中的函数:</h2>
<h3>{{ getCurrentTime(message) }}</h3>

刷新 HTML 页面：

调用 computed 计算属性的函数

插值中支持使用计算属性，计算属性 computed 也是 Options API 的一部分，在 methods 选项同级中增加一个 computed 计算属性：

js 复制代码

computed: {
    reversedMessage: function(){
      return this.message.split('').reverse().join('');
    }
}

在模板中使用计算属性：

html 复制代码

<h2>7.显示计算属性的值:</h2>
<h3>{{ reversedMessage }}</h3>

刷新 HTML 页面：

插值表达式中`不支持定义语句`

插值表达式中不支持定义语句：

html 复制代码

<h2>8.不能使用定义语句:</h2>
<h3>{{ const name = "X" }}</h3>

刷新 HTML 页面，报错如下：

插值表达式中`不支持逻辑控制语句`

插值表达式中不支持逻辑控制语句：

html 复制代码

<h2>9.不能使用逻辑控制语句:</h2>
<h3>{{ if(true) return 'X' }}</h3>

刷新 HTML 页面，报错如下：

Vue 中的插值表达式 {{ }} 是用于将数据绑定到模板中的一种简化语法，而不是用于执行 JavaScript 语句或控制结构的地方。这是因为 Vue 的设计目标之一是保持模板的简洁性和可读性，使得模板部分更加专注于数据的展示和渲染。