【Vue】04 Vue技术——Vue 模板语法详解：插值与指令

文章目录

- [🎯 1.3 模板语法](#🎯 1.3 模板语法)
- - [✅ 1.3.1 效果展示](#✅ 1.3.1 效果展示)
  - [🔍 1.3.2 模板的理解](#🔍 1.3.2 模板的理解)
  - [📌 1.3.3 插值语法（Interpolation）](#📌 1.3.3 插值语法（Interpolation）)
  - [⚙️ 1.3.4 指令语法（Directives）](#⚙️ 1.3.4 指令语法（Directives）)
  - [🧠 小结：Vue 模板语法对比](#🧠 小结：Vue 模板语法对比)
  - [📚 总结](#📚 总结)
  - [💡 温馨提示](#💡 温馨提示)

在学习 Vue.js 的过程中，模板语法 是构建动态用户界面的核心基础。Vue 通过简洁而强大的模板语法，将 HTML 与 JavaScript 表达式无缝结合，实现数据的动态绑定和视图的自动更新。本文将围绕 Vue 的两大核心模板语法------插值语法 和 指令语法 进行深入解析，并结合实际示例帮助你快速掌握其用法。

🎯 1.3 模板语法

Vue 的模板语法允许我们在 HTML 中嵌入 JavaScript 表达式，从而实现数据驱动的视图渲染。整个模板系统分为两类基本语法：

插值语法（双大括号表达式）
指令语法（以 v- 开头）

下面我们将逐一讲解它们的功能、写法及应用场景。

完整代码：

css 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>模板语法</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

    <!-- Vue模板语法有2大类：
        1. 插值语法：
            功能：用于解析标签体内容。
            写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

        2. 指令语法：
            功能：用于解析标签（包括：标签属性、标签体内容、绑定事件......）。
            例如：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，
                    且可以直接读取到data中的所有属性。
            备注：Vue中有很的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子。
    -->


    <!-- 准备好一个容器-->
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}</h3>
        <hr/>
        <h1>指令语法</h1>
        <a v-bind:href="school.URL" v-bind:x="hello">点我去{{school.name}}学习1</a>
        <a :href="school.URL" :x="hello">点我去{{school.name}}学习2</a>
    </div>
    
    <script type="text/javascript">
        // 关闭生产环境提示
        Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示。
        new Vue({
            el:'#root',
            data:{
                name:'Jack',
                hello:'你好',
                school:{
                    URL:'http://www.atguigu.com',
                    name:'尚硅谷'
                }
                
            }
        })
    </script>
</body>
</html>

✅ 1.3.1 效果展示

先来看一个完整的示例运行效果：

这个页面展示了：

使用 {``{name}} 动态显示姓名；
使用 v-bind:href 绑定链接地址，实现动态跳转。

🔍 1.3.2 模板的理解

Vue 的模板本质是在 HTML 中"嵌入"了 JS 表达式。这些表达式可以被 Vue 引擎解析并绑定到组件的数据上，当数据变化时，视图也会自动更新。

💡 关键思想：数据驱动视图，而不是手动操作 DOM。

HTML 中包含 JS 代码的方式主要有两种：

类型	特征
插值语法	双大括号 {``{xxx}}
指令语法	以 `v-` 开头，如 `v-bind`

📌 1.3.3 插值语法（Interpolation）

功能

用于解析并显示标签体中的内容，即把数据插入到 HTML 文本中。

语法格式

html 复制代码

{{ xxx }}

其中 xxx 是一个合法的 JavaScript 表达式，可以直接访问 data 中的属性。

示例

html 复制代码

<h3>你好，{{ name }}</h3>

在 Vue 实例中定义了：

js 复制代码

data: {
    name: 'Jack'
}

最终渲染结果为：

html 复制代码

<h3>你好，Jack</h3>

✅ 支持复杂表达式，例如：{``{ firstName + ' ' + lastName }} 或 {``{ age > 18 ? '成人' : '未成年' }}

⚙️ 1.3.4 指令语法（Directives）

功能

用于解析标签的各种部分，包括：

标签属性（如 href, class, style）
标签体内容（类似插值，但更灵活）
绑定事件（如点击、输入等）

所有指令都以 v- 开头，常见的有：

v-bind
v-model
v-if
v-for
v-on

常见指令：`v-bind`

作用

动态绑定 HTML 属性。

语法

html 复制代码

v-bind:属性名 = "表达式"

或简写形式：

html 复制代码

:属性名 = "表达式"

示例

html 复制代码

<a v-bind:href="school.URL">点我去{{school.name}}学习1</a>
<a :href="school.URL" :x="hello">点我去{{school.name}}学习2</a>

在 data 中定义：

js 复制代码

school: {
    URL: 'http://www.atguigu.com',
    name: '尚硅谷'
},
hello: '你好'

渲染后变为：

html 复制代码

<a href="http://www.atguigu.com">点我去尚硅谷学习1</a>
<a href="http://www.atguigu.com" x="你好">点我去尚硅谷学习2</a>

🔁 注意：v-bind 会将表达式作为 JS 表达式进行求值，因此可以使用变量、方法调用甚至计算属性。

🧠 小结：Vue 模板语法对比

项目	插值语法	指令语法
格式	{``{ xxx }}	`v-bind:attr="xxx"` 或 `:attr="xxx"`
使用场景	显示文本内容	绑定属性、事件、条件渲染等
是否支持属性	❌ 不支持	✅ 支持
是否可响应	✅ 可响应数据变化	✅ 可响应数据变化

📚 总结

Vue 的模板语法设计简洁而强大，让开发者能够轻松地将数据与视图连接起来。掌握以下两点即可入门：

插值语法 {``{ }}：用于动态显示数据。
指令语法 v-bind:：用于动态绑定属性。

未来你会接触到更多指令，比如 v-model（双向绑定）、v-if（条件渲染）、v-for（列表渲染），但理解这两大基础语法是通往 Vue 高级特性的第一步。

💡 温馨提示

Vue 提供了许多内置指令，形式统一为 v-???，建议查阅官方文档了解完整列表。
在开发中尽量避免在模板中书写复杂的逻辑，应将业务逻辑移至方法或计算属性中。
使用 v-bind 时，记得它支持对象语法，例如：:style="{ color: textColor }"。

📌 参考代码片段（完整 HTML 页面）

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>模板语法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好，{{name}}</h3>
        <hr/>
        <h1>指令语法</h1>
        <a v-bind:href="school.URL" v-bind:x="hello">点我去{{school.name}}学习1</a>
        <a :href="school.URL" :x="hello">点我去{{school.name}}学习2</a>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;
        new Vue({
            el: '#root',
            data: {
                name: 'Jack',
                hello: '你好',
                school: {
                    URL: 'http://www.atguigu.com',
                    name: '尚硅谷'
                }
            }
        })
    </script>
</body>
</html>

🚀 掌握了这些基础知识，你已经迈出了学习 Vue 的坚实一步！接下来可以探索事件处理、表单绑定、组件化开发等内容，逐步构建出功能丰富的前端应用。

【Vue】04 Vue技术——Vue 模板语法详解：插值与指令

文章目录

🎯 1.3 模板语法

✅ 1.3.1 效果展示

🔍 1.3.2 模板的理解

📌 1.3.3 插值语法（Interpolation）

功能

语法格式

示例

⚙️ 1.3.4 指令语法（Directives）

功能

常见指令：v-bind

作用

语法

示例

🧠 小结：Vue 模板语法对比

📚 总结

💡 温馨提示

常见指令：`v-bind`