Vue 模板语法

简介

Vue 使用一种基于 HTML 的模板语法，它可以被看作是 HTML 语法的一种扩展。

在模板中可以使用类似 HTML 的结构，包括节点声明、属性设置和事件注册等。Vue 会将这个模板编译成高度优化的 JavaScript 代码，以便在浏览器中快速渲染和交互。

这样开发者就可以使用熟悉的 HTML 语法来编写构建动态的、响应式的用户界面。

模板语法类似于 HTML 语法，所以学习成本不高，并且 vue 使用底层机制将状态变更用最少的 DOM 操作，可以优化性能。

模板语法中使用双大括号 {{ }} 的形式，被称为插值表达式，是Vue中用于将数据动态地渲染到模板中的一种方式。

文本插值

文本插值主要用于在模板中显示变量的值，即双大括号内可以是最简单的变量名，或者根据表达式计算的结果。

使用示例和页面效果如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
      // 导入 Vue 中的 createApp和ref
      const { createApp, ref } = Vue;
      const zoo = ref("成都大熊猫繁育研究基地");
      const huaEge = ref(3);
      const huaBro = ref("和叶");

      window.onload = function () {
        createApp({
          setup() {
            return {
              zoo,
              huaEge,
              huaBro
            };
          },
        }).mount("#app");
      };
    </script>
  </head>
  <body>
    <div id="app">
      <!-- 添加元素，通过Vue展示数据 -->
      <div id="app">
        <p>花花出生在：{{zoo}}</p>
        <p>花花今年：{{huaEge}} 岁了</p>
        <p>花花的弟弟叫：{{huaBro}}</p>
      </div>
    </div>
  </body>
</html>

JavaScript 表达式

Vue 的数据绑定也支持完整的 JavaScript 表达式，这些表达式都会被作为 JavaScript 代码，将会在当前实例的作用域被解析执行。

JS 表达式可以被使用在文本插值中，即上述的双大括号。

使用示例及效果如下所示：

<!-- vue-02.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>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
      // 导入 Vue 中的 createApp 和 ref
      const { createApp,ref } = Vue;
      const number=ref(0)
      const ok=ref(true)

      window.onload = function () {
        createApp({
          setup() {
            return {
              number: 0,
              ok: true,
            };
          },
        }).mount('#app')
      };
    </script>
  </head>
  <body>
    <div id="app">
      <!-- 文本插值 -->
      <div>{{ number + 1 }}</div>
      <!-- 三元表达式 -->
      <div>{{ ok ? 'YES' : 'NO' }}</div>
    </div>
  </body>
</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>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
      // 导入 Vue 中的 createApp
      const { createApp,ref } = Vue;
      const msg=ref("hello world")

      window.onload = function () {
        createApp({
          setup() {
            // 自定义无参函数
           const myFunction=()=>{
              return('早上好')
           }
          //  自定义有参函数
           const myFunctionWithArg=(hour)=>{
            if (hour < 12) {
                return "Good morning!";
              } else if (hour < 18) {
                return "Good afternoon!";
              } else {
                return "Good evening!";
              }
           }
           return{
            myFunction,
            myFunctionWithArg
           }

          },
        }).mount('#app')
      };
    </script>
  </head>
  <body>
    <div id="app">
      <!-- 双大括号可以函数调用，函数的renturn 结果会解析在双括号中 -->
      <p>调用无参函数：{{myFunction()}}</p>
      <!-- 调用内置函数 -->
      <p>调用内置函数</p>
      <p>{{Math.floor(Math.random() * 10)}}</p>
      <p>{{ msg.split('').reverse().join('') }}</p>
      <!-- 调用有参函数 并传入参数-->
      <p>调用有参函数：{{myFunctionWithArg(9)}}</p>
    </div>
  </body>
</html>

代码实现了对 myFunction() 无参函数和 myFunctionWithArg 有参函数的定义。

为了检验双大括号调用函数的效果，在页面中使用 <p> 标签来展示函数的调用结果。

除了自定义的两种函数，还可调用 JS 的内置函数，如示例中 Math 对象和反转字符串的示例。

注意：调用无参函数时需要加上()，否则会调用失败

实现效果如下所示，页面成功展示出了三种函数调用的内容，证明调用成功：

Vue 指令

指令是 Vue 提供的一种特殊的特性，可以在 DOM 元素上添加一些特定的行为或者响应数据的变化。

指令的写法通常以 v- 开头，后边跟着指令的名称，如本节介绍的 v-html 和 v-text 以及之后介绍的 v-bind，v-on 等，指令会在渲染的时候对 DOM 元素进行特殊的处理。

v-html 和 v-text 的用法

v-html 和 v-text 是 Vue 提供的两个指令，它们用于处理模板中的文本内容。

v-html 指令用于将一个字符串作为 HTML 解析并渲染到指定的元素中，动态地包含将包含 HTML 标记的字符串插入到模板中。
v-text 指令用于将一个字符串作为纯文本插入到指定的元素中，会自动将内容进行 HTML 转义。

以下是 v-html 和 v-text 的使用示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
      // 导入 Vue 中的 createApp
      const { createApp, ref } = Vue;

      window.onload = function () {
        createApp({
          setup() {
            const mesA = ref("<h1>{{}}渲染</h1>");
            const mesB = ref("<h2>v-text渲染</h2>");
            const mesC = ref("<h3>v-html渲染</h3>");
            return {
              mesA,
              mesB,
              mesC,
            };
          },
        }).mount("#app");
      };
    </script>
  </head>
  <body>
    <div id="app">
      <!-- 使用插值表达式显示内容 -->
      <div>这是插值表达式的内容：{{mesA}}</div>
      <!-- 使用 v-text 渲染 -->
      <div v-text="mesB">v-text 渲染</div>
      <!-- 使用 v-html 渲染 -->
      <div v-html="mesC">v-html 渲染</div>
    </div>
  </body>
</html>

代码中一共展示了三段使用不同方式渲染的 <div> 标签，从中可以看出只有v-html 会渲染出 html 代码的效果。

此外 v-html 和 v-text 在渲染时会清空标签本身的内容，而插值表达式即{{}}会在原本标签的基础上添加。

页面效果如下所示：

总结

本节介绍了 Vue 模板语法的基础用法，其中包含文本插值、JavaScript 表达式、函数调用以及 v-html 和 v-text 的基本用法，掌握本节内容即可实现简单的页面渲染。