vue基本指令

好 👍 我给你总结一下 Vue 的基本指令 和 使用方法（这里以 Vue2 为例，Vue3 也大体相同）：

🔹 1. v-bind —— 属性绑定

把数据绑定到标签属性上。

<div id="app">
  <a v-bind:href="url">点击跳转</a>
  <!-- 简写形式 -->
  <a :href="url">简写绑定</a>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    url: 'https://vuejs.org'
  }
})
</script>

🔹 2. v-model —— 双向绑定

常用于表单输入。

<div id="app">
  <input v-model="message" placeholder="输入点什么">
  <p>你输入的内容：{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: ''
  }
})
</script>

🔹 3. v-if / v-else-if / v-else —— 条件渲染

根据条件显示或隐藏元素。

<div id="app">
  <p v-if="score >= 90">优秀</p>
  <p v-else-if="score >= 60">及格</p>
  <p v-else>不及格</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    score: 75
  }
})
</script>

🔹 4. v-show —— 显隐（通过 display: none 控制）

<div id="app">
  <p v-show="isShow">这是一段文字</p>
  <button @click="isShow = !isShow">切换显示</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isShow: true
  }
})
</script>

🔹 5. v-for —— 循环渲染

<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ index + 1 }}. {{ item }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    items: ['苹果', '香蕉', '橙子']
  }
})
</script>

🔹 6. v-on —— 事件绑定

<div id="app">
  <button v-on:click="sayHello">点我</button>
  <!-- 简写 -->
  <button @click="sayHello">点我</button>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    sayHello () {
      alert('Hello Vue!')
    }
  }
})
</script>

🔹 7. v-text / v-html

• v-text：设置文本内容（类似 {{ }}）
• v-html：渲染 HTML（注意可能有 XSS 风险）

<div id="app">
  <p v-text="msg"></p>
  <p v-html="htmlMsg"></p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    msg: '你好，Vue',
    htmlMsg: '<strong style="color:red;">加粗红色文字</strong>'
  }
})
</script>

🔹 8. v-cloak —— 防止闪烁

在 Vue 没加载完时防止模板 {{ }} 闪烁。

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

<div id="app" v-cloak>
  {{ message }}
</div>

👉 总结：
常用的指令有：

• 数据绑定：v-bind、v-model
• 条件/循环：v-if、v-else、v-show、v-for
• 事件：v-on（@）
• 文本/HTML：v-text、v-html
• 辅助：v-cloak