vue模板语法（一）-优快云博客

文章介绍了Vue.js中的模板语法，特别是双大括号表达式的使用，包括数据绑定、原始HTML处理和JavaScript表达式的支持。通过示例代码展示了如何在HTML中插入和更新数据，以及如何利用v-bind和v-on指令进行更复杂的操作。此外，还提到了v-html指令用于渲染原始HTML内容和v-bind在处理布尔特性的不同之处。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模板语法（一）

实验介绍
双大括号表达式
插值

实验介绍

相信模板语法大家多少都有所接触，例如百度模板引擎、ejs 等等。同样 Vue.js 也使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析，通俗的讲 Vue 模板语法就是在使用 Vue.js 开发时，你可以写在 HTML 元素上的操作语法，让你开发更高效，例如：绑定样式，循环出元素列表等。

知识点

双大括号表达式
插值
v-bind 指令
v-on 指令
指令缩写

双大括号表达式

在前端的发展历程中，为了提高开发效率，诞生了很多模板引擎，方便渲染元素或者绑定数据，很多引擎模板都采用 {{双大括号表达式}} 的语法进行插值。同样 Vue.js 也借鉴了 Angular.js 的双花括号的方式，进行向页面输出数据和调用对象方法。让我们感受一下双大括号表达式，在环境中新建一个.html 后缀文件，引入 Vue.js，输入以下代码，运行（open with Preview 或 Mini Browser）。

使用以下命令获取 vue.js 文件。

wget https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue</title>
    <!--引入 vue.js-->
    <script src="vue.min.js"></script>
  </head>
  <body>
    <!-- 数据双向绑定 -->
    <div id="app">
      <input type="text" v-model="msg" />
      <p>{{msg}}</p>
    </div>
    <script>
      var app = new Vue({
        el: "#app", // el: 挂载点

        data: {
          // data:数据选项

          msg: "hello",
        },
      });
    </script>
  </body>
</html>

双大括号中的 {{msg}}，绑定至底层 Vue 实例的数据，在浏览器中就被渲染成实例 data 选项中 msg 的值。

运行结果：
在这里插入图片描述

插值

上面初步了解了双大括号语法，接下来我们学习一下更多的插值方式。

文本

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

<div id="app">msg：{{msg}}</div>

双大括号中的值将会被替代为对应 data 对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

但是通过使用 v-once 指令你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但是你需要注意一下，该元素节点下面其他数据的绑定，数据改变，内容也不会更新，所以，注意代码块的划分。

<p v-once>msg：{{msg}}</p>

原始 HTML

上面的双大括号表达式会将数据解释为普通文本，即使你的数据为 HTML 元素，也不会渲染成对应的标签元素，只能渲染成普通文本，而非 HTML 代码，例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue</title>
    <!--引入 vue.js-->
    <script src="vue.min.js"></script>
  </head>
  <body>
    <!-- 数据绑定 -->
    <div id="app">
      <p>{{msg}}</p>
    </div>
    <script>
      var app = new Vue({
        el: "#app", // el: 挂载点
        data: {
          // data: 数据选项
          msg: "<h1>hello syl</h1>",
        },
      });
    </script>
  </body>
</html>

运行结果：
在这里插入图片描述
上面明明我们写的是 HTML 标签，为什么没渲染出来，那就是因为双大括号表达式会将数据解释为普通文本。有的同学会问，有的需求就是要把标签渲染出来，那么我们就需要认识另外一个指令 v-html，使用它我们就能将它正确渲染。

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue</title>
    <!--引入 vue.js-->
    <script src="vue.min.js"></script>
  </head>
  <body>
    <!-- v-html 渲染 html 元素-->
    <div id="app" v-html="msg"></div>
    <script>
      var app = new Vue({
        el: "#app", // el: 挂载点
        data: {
          // data: 数据选项
          msg: "<h1>hello syl</h1>",
        },
      });
    </script>
  </body>
</html>

运行结果：
在这里插入图片描述

特性

双大括号语法不能作用在 HTML 特性（标签属性）上，需要对标签属性操作，应该使用 v-bind 指令：

<div v-bind:class="syl-vue-course"></div>

HTML 标签属性为布尔特性时，它们的存在表示为 true，v-bind 工作起来略有不同，在这个例子中：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue</title>
    <!--引入 vue.js-->
    <script src="vue.min.js"></script>
  </head>
  <body>
    <!-- 布尔特性绑定-->
    <div id="app">
      <input type="checkbox" v-bind:checked="isChecked" />
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          isChecked: false, // isChecked 是否选中 boolean
        },
      });
    </script>
  </body>
</html>

运行结果：
在这里插入图片描述
注意：如果 isChecked 的值是 null、undefined 或 false，则 checked 特性甚至不会被包含在渲染出来的元素中，我们将 data 中的 isChecked 值改为 null。

var app = new Vue({ el:'#app', data:{ isChecked:null // isChecked是否选中 } })

JavaScript表达式

上面，我们只进行了绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持，感受强大的模板语法力量吧！
我们看看下面这个例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue</title>
    <!--引入 vue.js-->
    <script src="vue.min.js"></script>
  </head>
  <body>
    <!-- javascript 表达式-->
    <div id="app">
      <!-- 运算符 -->
      <p>num + 24 = {{num + 24}}</p>
      <!-- 三元表达式 -->
      <p>Are you ok? {{ok ? 'I am ok !':'no'}}</p>
      <!-- 对象方法直接调用 -->
      <p>名字倒过来写：{{name.split('').reverse().join('')}}</p>
      <!-- 属性值运算操作 -->
      <p v-bind:class="'col'+colNum">syl</p>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          num: 20,
          ok: true,
          name: "实验楼",
          colNum: "12",
        },
      });
    </script>
  </body>
</html>