插值与指令
在模板中使用 Mustache 插值和核心指令
插值与指令 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 1 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 3 节课。
模板语法概览
Vue 模板是经过特殊语法增强的有效 HTML：
- 使用Mustache 插值输出文本
- 使用指令（以 v- 开头的属性）实现行为
Vue 会将这些内容编译成高效的渲染函数。
Mustache 插值
双花括号，也就是 Mustache 语法，用于输出文本。
其中的内容是 JavaScript 表达式，而不只是变量名。
<span>Hello, {{ userName }}</span>
<span>{{ price * quantity }}</span>
<span>{{ isActive ? "On" : "Off" }}</span>使用 v-bind 绑定属性
Mustache 语法不能在 HTML 属性中使用。请使用 v-bind 将数据绑定到属性。
<a v-bind:href="profileUrl">Profile</a>
<img v-bind:src="imagePath" v-bind:alt="caption" />
<button v-bind:disabled="isLoading">Submit</button>v-bind 简写
v-bind 使用非常频繁，因此有一种简写形式：只写一个冒号。
<!-- Full syntax -->
<a v-bind:href="url">Link</a>
<!-- Shorthand -->
<a :href="url">Link</a>使用 v-on 处理事件
v-on 指令会监听 DOM 事件并运行处理程序。
<button v-on:click="handleClick">Click me</button>
<input v-on:input="onType" />
<form v-on:submit="onSubmit">...</form>v-on 简写
v-on 也有一种简写形式：@ 符号。
<!-- Full syntax -->
<button v-on:click="save">Save</button>
<!-- Shorthand -->
<button @click="save">Save</button>内联处理程序与方法处理程序
事件处理程序可以是内联表达式，也可以是方法名称。
<!-- Inline expression -->
<button @click="count++">Add</button>
<!-- Method handler -->
<button @click="increment">Add</button>
<!-- Inline with the event object -->
<button @click="log($event)">Log</button>v-text
v-text 指令会设置元素的文本内容。它等同于 Mustache 语法。
<!-- These two are equivalent -->
<span v-text="message"></span>
<span>{{ message }}</span>v-html
v-html 指令会将字符串渲染为真正的 HTML，而不是经过转义的文本。
<div v-html="rawHtml"></div>
<!-- If rawHtml = "<b>Bold</b>",
it renders actual bold text -->v-html 与 XSS 注意事项
警告：对不受信任的内容使用 v-html 很危险。
- 它可能注入恶意脚本（XSS 攻击）
- 只应对您完全信任的内容使用它
- 绝不要直接渲染用户提交的 HTML
对于普通文本，请始终优先使用 Mustache 插值，因为它会转义 HTML。
指令参数
某些指令会在冒号后接受一个参数，用于指定属性或事件。
<!-- argument is the attribute name -->
<a :href="url">Link</a>
<!-- argument is the event name -->
<button @click="run">Run</button>
<!-- dynamic argument -->
<a :[attrName]="value">Dynamic</a>快速检查
测试您对插值和指令的理解。
回顾：插值和指令
您学会了 Vue 模板的基础知识：
- {{ }} Mustache 语法会输出文本表达式
- v-bind（简写为 :) 绑定属性
- v-on（简写为 @）处理事件
- v-text 设置文本内容
- v-html 渲染原始 HTML（存在 XSS 风险，请谨慎使用）
接下来：条件渲染和循环。
常见问题解答
「插值与指令」课时是免费的吗？
是的 — 「插值与指令」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。
「插值与指令」这节课中我会学到什么？
在模板中使用 Mustache 插值和核心指令 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 3 节。
「插值与指令」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 插值与指令
- 条件渲染与循环
- 属性与 Class 绑定