网站数据库一般多大服务型网站建设

前一篇我们学习了组件化开发。本篇将介绍 指令与过滤器，这是 Vue 模板语法的重要扩展，让页面渲染更加灵活。

---

目录

1. 常见内置指令
2. 自定义指令
3. 过滤器
4. 小结

---

常见内置指令

Vue 提供了丰富的内置指令，常见的有：

<div id="app"><p v-text="msg"></p><p v-html="htmlContent"></p><p v-show="isVisible">这是一段文字</p>
</div><script>
new Vue({el: '#app',data: {msg: 'Hello Vue!',htmlContent: '<strong>加粗的文字</strong>',isVisible: true}
})
</script>

• v-text：设置元素的文本内容
• v-html：渲染 HTML（⚠️注意防止 XSS 攻击）
• v-show：通过 display 控制显示/隐藏
• v-if / v-else / v-else-if：条件渲染
• v-for：列表渲染
• v-on：事件绑定
• v-bind：属性绑定

---

自定义指令

除了内置指令，还可以自定义指令，用于 DOM 操作。

全局自定义指令

<div id="app"><input v-focus>
</div><script>
Vue.directive('focus', {inserted: function (el) {el.focus()}
})new Vue({el: '#app'
})
</script>

这里定义了一个 v-focus 指令，让输入框自动获取焦点。

Vue.directive() 用于注册全局自定义指令
第一个参数 ‘focus’ 是指令名称； 第二个参数是一个配置对象，包含指令的钩子函数。

inserted 钩子函数
当指令绑定的元素被插入到 DOM 中时触发（此时元素已存在于页面中），参数 el 是指令所绑定的 DOM 元素

---

局部自定义指令

<div id="app"><p v-color="'red'">这是一段红色文字</p>
</div><script>
new Vue({el: '#app',directives: {color: function (el, binding) {el.style.color = binding.value}}
})
</script>

这里的 v-color="'red'" 会让文字变成红色。

---

过滤器

过滤器可以对文本进行格式化处理，常见场景是日期、货币格式化。

全局过滤器

<div id="app"><p>{{ price | currency }}</p>
</div><script>
Vue.filter('currency', function (value) {return '¥' + value.toFixed(2)
})new Vue({el: '#app',data: {price: 88.5}
})
</script>

输出：

¥88.50

---

局部过滤器

<div id="app"><p>{{ message | upper }}</p>
</div><script>
new Vue({el: '#app',data: {message: 'hello vue'},filters: {upper: function (value) {return value.toUpperCase()}}
})
</script>

输出：

HELLO VUE

---

小结

1. Vue 内置指令丰富，如 v-text、v-html、v-show 等。
2. 可以通过 自定义指令 来封装 DOM 操作。
3. 过滤器适合做文本格式化，支持全局和局部定义。

---

📚下一篇文章，我们将学习 事件处理，掌握 v-on、事件修饰符和键盘事件。