Vue内置指令与自定义指令大全

<!-- 绑定 class -->
<div v-bind:class="{ active: isActive }"></div>
<!-- 缩写 -->
<img :src="imageURL" :alt="title">
<!-- 绑定对象 -->
<a v-bind="{ href, target, rel }">链接</a>

<input v-model="message" placeholder="双向绑定">
<p>输入内容：{{ message }}</p>
<!-- 修饰符 -->
<input v-model.trim="username" />
<input v-model.number="age" />
<input v-model.lazy="search" />

<button v-on:click="handleClick">点击</button>
<!-- 缩写 -->
<button @click="save">保存</button>
<!-- 修饰符 -->
<form @submit.prevent="onSubmit">
<input @keyup.enter="search" />
<button @click.once="doOnce">只触发一次</button>

<div v-if="type === 'A'">类型 A</div>
<div v-else-if="type === 'B'">类型 B</div>
<div v-else>其他</div>

<div v-show="isVisible">我被 v-show 控制</div>

<li v-for="(item, index) in items" :key="item.id">
  {{ index }} - {{ item.name }}
</li>
<!-- 遍历对象 -->
<li v-for="(value, key) in user" :key="key">
  {{ key }}: {{ value }}
</li>

<style>
  [v-cloak] { display: none; }
</style>
<div v-cloak>{{ message }}</div>

<span v-pre>{{ this will not be compiled }}</span>
<span v-once>{{ msg }}</span> <!-- msg 变化也不会更新 -->

// main.js
import { createApp } from 'vue'
const app = createApp({})
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

<script>
export default {
  directives: {
    focus: {
      mounted(el) {
        el.focus()
      }
    }
  }
}
</script>

app.directive('demo', {
  mounted(el, binding, vnode, prevVnode) {
    // el: 指令绑定的元素
    // binding: 指令信息对象
    //   binding.value: 传入的值
    //   binding.arg: 参数，如 v-demo:arg
    //   binding.modifiers: 修饰符，如 v-demo.foo.bar
    // vnode: 虚拟节点
    // prevVnode: 上一个虚拟节点（更新时）
  }
})

app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

<input v-focus placeholder="页面加载后自动聚焦">

// 假设用户权限存储在全局 store 或 config 中
const userPermissions = ['create', 'edit']
app.directive('permission', {
  mounted(el, binding) {
    const requiredPerm = binding.value
    if (!userPermissions.includes(requiredPerm)) {
      el.parentNode.removeChild(el) // 移除无权限的按钮
      // 或 el.style.display = 'none'
    }
  }
})

<button v-permission="'create'">新建用户</button>
<button v-permission="'delete'">删除用户</button> <!-- 会被移除 -->

let timer = null
app.directive('debounce', {
  mounted(el, binding) {
    const delay = binding.value || 1000
    el.addEventListener('click', () => {
      if (timer) return
      binding.instance[binding.arg] && binding.instance[binding.arg]()
      timer = setTimeout(() => {
        timer = null
      }, delay)
    })
  }
})

<template>
  <button v-debounce:submit="1000">提交</button>
</template>
<script>
export default {
  methods: {
    submit() {
      console.log('表单提交')
      // 发送请求
    }
  }
}
</script>

const imgObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target
      img.src = img.dataset.src
      imgObserver.unobserve(img)
    }
  })
})
app.directive('lazy', {
  mounted(el, binding) {
    el.dataset.src = binding.value
    el.src = 'placeholder.jpg' // 占位图
    imgObserver.observe(el)
  },
  unmounted(el) {
    imgObserver.unobserve(el)
  }
})

<img v-lazy="imageUrl" alt="懒加载图片">

<script>
import { ref } from 'vue'
export default {
  setup() {
    const vFocus = {
      mounted: (el) => el.focus()
    }
    const count = ref(0)
    return {
      vFocus,
      count
    }
  }
}
</script>
<template>
  <input v-focus>
</template>