Vue.js 是一种流行的前端框架，它提供了一个灵活的模板语言来生成 HTML 页面。本文将深入介绍 Vue 模板的基础知识，包括指令、表达式、过滤器等。
模板语法
Vue 模板使用 Mustache 语法（双花括号）来绑定数据到视图中。例如：
<div>{{ message }}</div>在上面的例子中，我们通过 {{ message }} 绑定了一个数据属性 message 到这个 <div> 元素中，这意味着当 message 的值发生变化时，这个元素也会自动更新。
除了绑定数据属性之外，Vue 模板还支持以下几种特殊的语法：
指令
指令是以 v- 前缀命名的特殊属性，用于声明性地添加响应式行为到 DOM 元素上。例如：
<button v-on:click="doSomething">Click me</button>
在上面的例子中，我们使用 v-on 指令添加一个点击事件处理程序 doSomething 到这个按钮元素上。同样地，Vue 还支持多种其他的内置指令，例如 v-if 和 v-for。
表达式
表达式是可以在 Vue 模板中计算并输出结果的 JavaScript 代码。例如：
<div>{{ message.toUpperCase() }}</div>在上面的例子中，我们将 message 转换为大写字母并输出到这个 <div> 元素中。需要注意的是，由于安全限制，Vue 模板中不能使用包含以下内容的表达式：赋值、链式操作、位运算等。
过滤器
过滤器可以用来格式化数据，以便在模板中更好地显示。例如：
<div>{{ message | capitalize }}</div>在上面的例子中，我们使用 capitalize 过滤器将 message 的字符串首字母大写，并将结果输出到这个 <div> 元素中。
示例代码
下面是一个简单的 Vue 模板示例代码，其中包含了以上提到的三种特殊语法：
-- -------------------- ---- -------
---- ---------
--- ------------------- ----- - ---------- -------
----
--- ----------- -- --------- ---- -------
-----
------- ---------------------------------
------
--------
--- -----
--- -------
----- -
---------- -----
------ ------ -------
------ --------- --------- ---------
--
-------- -
-------- -------- -- -
------------------------
-
--
-------- -
----------- -------- ------- -
-- -------- ------ ---
----- - -----------------
------ ----------------------------- - ---------------
-
-
--
---------在上面的例子中，我们创建了一个 Vue 实例，并在模板中使用了 v-if、v-for 和 v-on:click 指令，以及 capitalize 过滤器。同时，我们还演示了如何通过 JavaScript 来绑定数据属性和方法。
总结
本文介绍了 Vue 模板的基础知识，包括指令、表达式、过滤器等。Vue 模板是一种非常灵活的工具，可以让开发者快速地生成动态的 HTML 页面。希望这篇文章能够帮助读者更好地理解和运用 Vue 模板。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/57747