【Vue2 ✨】 Vue2 入门之旅（六）：指令与过滤器

前一篇我们学习了组件化开发。本篇将介绍 指令与过滤器，这是 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、事件修饰符和键盘事件。