模板语法与指令详解
🎯 引言
学会本文内容后，你将能够熟练运用模板语法构建动态页面，实现数据与视图的高效绑定。掌握常用指令、自定义指令、过滤器以及动态绑定样式，让你的前端代码更加简洁、灵活和可维护，能胜任绝大多数前端项目开发场景。
📝 模板语法基础
模板语法是前端框架中连接视图和数据的桥梁。它通过特殊的语法标记，使得 HTML 能够响应数据变化，动态渲染页面内容。掌握模板语法，是了解前端框架工作原理的关键。
举个简单例子，设想你有一个变量 name，如果直接写在 HTML 中，它不会随数据变化而改变。但如果用模板语法绑定，就能做到页面上的名字和数据同步更新。
<template>
<div>你好，{{ name }}！</div>
</template>
<script>
export default {
data() {
return {
name: 'xiaoming',
};
},
};
</script>
这里的 {{ name }} 就是模板语法，它会把变量的值渲染到页面上。
{{}} 用来绑定文本，方便快速展示变量内容。🔧 常用指令详解
指令是模板语法的核心组成部分，它们为我们提供了操作 DOM 的强大功能。以下介绍几个常用且基础的指令。
v-bind：属性绑定
v-bind 用来动态绑定元素的属性，比如 class、id、src 等。它可以简化属性绑定的写法。
<template>
<div>
<img v-bind:src="imageUrl" alt="动态图片" />
<!-- 简写形式 -->
<img :src="imageUrl" alt="动态图片" />
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: 'xiaoming.png',
};
},
};
</script>
这里 imageUrl 是绑定的变量，图片路径会根据它的值变化。
v-bind 可以让元素属性随数据动态变化，避免手动操作 DOM，提升开发效率。v-model：双向绑定表单元素
v-model 让表单元素与数据实现双向绑定，使用户输入实时同步到数据中，数据变化也同步更新视图。
<template>
<div>
<p>你输入的用户名是：{{ username }}</p>
<input type="text" v-model="username" placeholder="请输入用户名" />
</div>
</template>
<script>
export default {
data() {
return {
username: '',
};
},
};
</script>
这里，输入框的内容和变量 username 绑定，输入时变量变化，变量变化时输入框也更新。
v-model 常用在表单元素，如 input、textarea、select，简化用户交互处理。v-if：条件渲染
根据条件控制元素是否渲染，v-if 会根据表达式真假决定该元素是否存在 DOM。
<template>
<div>
<p v-if="isLoggedIn">欢迎回来！</p>
<p v-else>请先登录</p>
</div>
</template>
<script>
export default {
data() {
return {
isLoggedIn: false,
};
},
};
</script>
isLoggedIn 为真时显示欢迎语，否则显示登录提示。
v-if 会真正销毁或创建元素，频繁切换可能影响性能。针对简单显示隐藏，建议用 v-show。v-for：列表渲染
用来遍历数组或对象生成多个元素。
<template>
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: ['苹果', '香蕉', '橙子'],
};
},
};
</script>
这段代码会动态生成一个水果列表。
:key 可以提高渲染性能，避免渲染出错，推荐总是加上。🛠 自定义指令
除了框架内置的指令，我们还能定义自己的指令，实现特定的 DOM 操作逻辑。自定义指令适合封装一些常用的行为，如自动聚焦、拖拽等。
const app = Vue.createApp({});
app.directive('focus', {
mounted(el) {
el.focus();
},
});
模板中使用：
<template>
<input v-focus placeholder="页面加载时自动聚焦" />
</template>
这个指令让输入框在页面加载时自动获得焦点。
mounted、updated，它们分别表示指令绑定到元素和元素更新时触发。🔄 过滤器
过滤器用来格式化输出内容，比如日期格式化、数字格式化等。过滤器写起来简单直观。
app.config.globalProperties.$filters = {
capitalize(value) {
if (!value) return '';
return value.charAt(0).toUpperCase() + value.slice(1);
},
};
模板中使用：
<template>
<p>{{ message | capitalize }}</p>
</template>
<script>
export default {
data() {
return {
message: 'helloworld',
};
},
};
</script>
这样可以把 message 的首字母变成大写。
🎨 动态 Class 与 Style 绑定
样式绑定是前端页面交互的重要组成部分，动态绑定让页面样式响应数据变化，提升体验。
动态绑定 Class
Class 可以绑定字符串、对象或数组，实现多样化样式控制。
<template>
<div :class="{ active: isActive, 'text-danger': hasError }">动态 Class</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
hasError: true,
};
},
};
</script>
当 isActive 为真，元素会添加 active 类；若 hasError 为真，添加 text-danger 类。
动态绑定 Style
v-bind:style 支持绑定对象或数组，动态设置内联样式。
<template>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">动态样式</div>
</template>
<script>
export default {
data() {
return {
activeColor: 'red',
fontSize: 14,
};
},
};
</script>
变量 activeColor 和 fontSize 改变，元素样式同步更新。
🧾 小节总结
- 模板语法让数据与视图高效绑定，常用指令简化逻辑控制。
- 自定义指令扩展功能，过滤器用于格式化输出。
- 动态绑定 Class 与 Style 实现页面样式的动态响应。
❓ 知识问答（Q&A）
Q：v-bind 和 v-model 有什么区别？
A：v-bind 用于绑定元素属性，单向绑定数据到视图；v-model 是表单元素的双向绑定，用户输入能更新数据，数据变动也影响视图。
Q：为什么建议 v-for 使用 key？
A：key 帮助框架追踪每个节点，提高渲染效率，避免渲染错误。
Q：自定义指令常用钩子有哪些？
A：主要是 mounted 和 updated，分别在指令绑定和更新时触发。
🧪 小练习
练习 1：自动聚焦输入框
创建一个自定义指令 v-focus，当元素挂载时自动聚焦输入框。
<template>
<div>
<input v-model="name" v-focus placeholder="页面加载时自动聚焦" />
</div>
</template>
<script>
export default {
data() {
return {
name: '',
};
},
};
</script>
app.directive('focus', {
// 实现指令逻辑
});
练习 2：点击变色
创建一个自定义指令 v-color-toggle，点击元素时在红色和蓝色之间切换字体颜色。
<template>
<div>
<p v-color-toggle style="cursor: pointer">点击我切换颜色</p>
</div>
</template>
app.directive('color-toggle', {
// 实现指令逻辑
});
🎉 恭喜你已经掌握 模板语法、常用指令、自定义指令、过滤器 和 动态样式绑定 技能啦！这些技能将大大提升你写前端代码的效率和质量。记得多练习，灵活运用哦！