vue模板语法核心是插值表达式、属性绑定和事件处理：{{ }}渲染文本，:xxx绑定属性，@xxx响应事件，配合修饰符与v-html（慎用）实现动态页面。
Vue 模板语法的核心就三块：文本怎么显示、属性怎么动态设、事件怎么响应。掌握好这三点，大部分页面逻辑都能稳稳落地。
插值表达式：数据直接上页面
用 {{ }} 把变量或简单表达式塞进标签内容里，比如 {{ msg }}、{{ count + 1 }}、{{ isActive ? '开' : '关' }}。它只支持表达式，不能写 if 或 for 这类语句；HTML 标签也不会被解析，会原样转义输出——想渲染富文本得换别的方法。
常见写法：
- 显示字符串、数字、布尔值：
{{ title }}、{{ price.toFixed(2) }} - 拼接与运算：
{{ firstName + ' ' + lastName }}、{{ items.length > 0 }} - 调用方法（注意别放复杂逻辑）：
{{ formatDate(date) }}
属性绑定：让 HTML 属性“活”起来
属性不能用 {{ }}，必须用 v-bind 或它的简写 :。比如 :id="dynamicId"、:src="imgUrl"、:disabled="isPending"。这是 Vue 区分“内容”和“属性”的关键规则。
实用技巧：
- 批量绑定对象：
v-bind="obj"，obj 里有id、class、style等，都会自动映射为对应属性 - 动态 class：
:class="{ active: isActive, 'error': hasError }"，按条件开关样式类 - 动态 style：
:style="{ color: textColor, fontSize: size + 'px' }"，适合少量内联样式控制
事件修饰符：点一下，干干净净
给事件加个点后缀，就能省掉手动调 event.preventDefault() 或 event.stopPropagation()。比如 @click.prevent 阻止默认行为，@submit.stop.prevent 同时阻止冒泡和提交刷新。
常用修饰符：
-
.stop：阻止事件冒泡 -
.prevent：阻止默认行为（如表单提交跳转） -
.once：事件只触发一次 -
.capture：使用捕获模式监听 -
.self：只在事件目标是元素自身时触发
可以链式组合，顺序不影响效果，例如 @click.stop.prevent。
v-html：谨慎使用的“破例”方式
当后端返回的是带标签的 HTML 字符串（比如文章正文），又确实需要原样渲染，才用 v-html。它绕过了转义，直接插入 DOM，所以必须确保内容可信，否则有 XSS 风险。
替代思路：
- 优先用纯文本 + CSS 控制样式
- 富文本场景考虑专用组件（如
vue-markdown）或白名单过滤后再用v-html - 绝对不要把用户输入、URL 参数、未校验 API 返回值直接传给
v-html
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
