<!-- 綁定 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>輸入內(nèi)容：{{ message }}</p>
<!-- 修飾符 -->
<input v-model.trim="username" />
<input v-model.number="age" />
<input v-model.lazy="search" />

<button v-on:click="handleClick">點(diǎn)擊</button>
<!-- 縮寫 -->
<button @click="save">保存</button>
<!-- 修飾符 -->
<form @submit.prevent="onSubmit">
<input @keyup.enter="search" />
<button @click.once="doOnce">只觸發(fā)一次</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 變化也不會(huì)更新 -->

// 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: 參數(shù)，如 v-demo:arg
    //   binding.modifiers: 修飾符，如 v-demo.foo.bar
    // vnode: 虛擬節(jié)點(diǎn)
    // prevVnode: 上一個(gè)虛擬節(jié)點(diǎn)（更新時(shí)）
  }
})

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

<input v-focus placeholder="頁面加載后自動(dòng)聚焦">

// 假設(shè)用戶權(quán)限存儲(chǔ)在全局 store 或 config 中
const userPermissions = ['create', 'edit']
app.directive('permission', {
  mounted(el, binding) {
    const requiredPerm = binding.value
    if (!userPermissions.includes(requiredPerm)) {
      el.parentNode.removeChild(el) // 移除無權(quán)限的按鈕
      // 或 el.style.display = 'none'
    }
  }
})

<button v-permission="'create'">新建用戶</button>
<button v-permission="'delete'">刪除用戶</button> <!-- 會(huì)被移除 -->

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('表單提交')
      // 發(fā)送請求
    }
  }
}
</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>