Vue基础教程（39）Vue.js语法之指令：别硬卷了！Vue.js指令才是你和框架谈恋爱的正确姿势：从入门到上头，附完整代码实战-优快云博客

嘿，哥们儿/姐们儿！是不是感觉学Vue.js的时候，满屏的v-xxx看得你眼花缭乱，感觉像在学一套神秘的摩斯密码？别慌，今天咱就坐下来，泡杯枸杞（或肥宅快乐水），用唠嗑的方式，把Vue指令这玩意儿给你掰开了、揉碎了，讲得明明白白。

想象一下，Vue实例是你（一个超级智慧的“大脑”），数据（data）是你的想法，而DOM（网页上的那些元素）就是你想要操控的“现实世界”。你怎么把你的想法传达给现实世界并让它动起来？靠吼吗？（document.getElementById...说的就是你！）太不优雅了！这时候，你就需要一位“翻译官”兼“传令兵”——这就是指令。

指令，说白了就是Vue给你贴在HTML标签上的“小纸条”，上面写着：“喂，这个元素，听我指挥！” 它让数据和DOM产生了“心电感应”。今天，咱就来盘一盘这些神通广大的“小纸条”。

一、初识指令：你的第一个“暗号” `v-text` 和 `v-html`

这俩是入门级指令，相当于接头暗号。

v-text：老实人，纯文本传输。
你让它传话“你好”，它绝不在话里加任何表情包。它会替换掉元素内部整个的textContent。

<div id="app">
  <p v-text="message"></p>
  <!-- 等价于 <p>{{ message }}</p> -->
</div>

<script>
const app = new Vue({
  el: '#app',
  data: {
    message: '<strong>你好，世界！</strong>'
  }
})
</script>

效果：页面上会原样显示字符串 <strong>你好，世界！</strong>，<strong>标签不会被解析成加粗。这哥们儿很耿直，说传文本就绝不动你的代码。

v-html：整活儿大师，解析HTML。
同样是传话“你好”，如果话里有HTML标签，它会真的把标签效果给你整出来。警告：这哥们儿能力大，责任也大，容易引发XSS攻击（比如别人输入恶意脚本它也会执行），所以除非你完全信任数据来源，否则慎用！

<div id="app">
  <p v-html="message"></p>
</div>

<script>
const app = new Vue({
  el: '#app',
  data: {
    message: '<strong>你好，世界！</strong>'
  }
})
</script>

效果：页面上会显示加粗的你好，世界！。看到了吧，它把<strong>标签给“变现”了。

小结： v-text是安全可靠的直男，v-html是功能强大但有点危险的潮男。日常显示普通文本，用{{ }}插值表达式（v-text的语法糖）更香。

二、条件渲染：影帝的诞生 `v-if` vs `v-show`

这俩都用于根据条件显示或隐藏元素，但原理截然不同，堪称Vue界的“薛定谔的猫”。

v-if：“真·装死”
它是“条件渲染”的灵魂。当条件为false时，它直接把这个元素从DOM树上连根拔起，物理删除。相当于演员今天没他的戏份，导演直接让他回家睡觉了，剧组盒饭都没他的份。

<div id="app">
  <p v-if="isVisible">看见我了吗？我可能随时会消失哦！</p>
  <button @click="isVisible = !isVisible">切换隐身术</button>
</div>

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

适用场景：条件很少改变，或者元素本身很重（包含很多子元素、图片等），用v-if可以减轻初始页面负载。它有配套的v-else-if和v-else，跟编程里的if-else语法一毛一样。

v-show：“假·装死”
它不管条件如何，元素始终在DOM树上躺着。它只是简单地切换CSS的display: none/block。相当于演员就躺在舞台旁边的道具箱里，导演说“藏起来！”，他就缩进箱子盖好盖子（display: none）；导演说“出来！”，他就爬出来表演（display: block）。

<div id="app">
  <p v-show="isVisible">我其实一直在DOM里躺平，只是用了CSS隐身术！</p>
  <button @click="isVisible = !isVisible">切换隐身术</button>
</div>

适用场景：需要非常频繁切换显示/隐藏的状态。因为操作CSS比操作DOM开销小得多，所以会更流畅。

灵魂拷问：咋选？记住口诀：频繁切换用show，不咋变动用if。

三、列表渲染：海王的鱼塘管理 `v-for`

当你有一个数组或对象，需要循环渲染出一堆相似的元素时，v-for就是你的“影分身之术”。它堪称Vue指令里的“劳模”。

<div id="app">
  <ul>
    <!-- item是数组每一项，index是索引 -->
    <li v-for="(item, index) in todoList" :key="item.id">
      {{ index + 1 }}. {{ item.text }}
    </li>
  </ul>
</div>

<script>
const app = new Vue({
  el: '#app',
  data: {
    todoList: [
      { id: 1, text: '学习Vue指令' },
      { id: 2, text: '写一个Demo' },
      { id: 3, text: '摸鱼半小时' }
    ]
  }
})
</script>

效果：

学习Vue指令
写一个Demo
摸鱼半小时

重点来了：:key是啥？
key是每条鱼的“身份证号”！ Vue通过它来跟踪每个节点的身份，从而高效地更新和复用元素。千万不能用index当key！比如你删除了第二条鱼，原来第三条鱼的index从2变成了1，它的“身份证”就变了，Vue就懵了，可能导致性能问题或渲染bug。所以，一定要用数据项中唯一且稳定的id。

四、事件处理：给元素装上“耳朵” `v-on`

你想让网页元素能响应用户操作（点击、鼠标移动、键盘输入等），就得给它装上“耳朵”，这个耳朵就是v-on，缩写是神奇的@。

<div id="app">
  <p>你点了按钮 {{ count }} 次</p>
  <!-- 完整语法 -->
  <button v-on:click="count++">点我+1</button>
  <!-- 缩写语法，更常用 -->
  <button @click="handleClick">点我（调用方法）</button>
  <!-- 传递参数 -->
  <button @click="sayHello('哥们儿')">打招呼</button>
</div>

<script>
const app = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    handleClick() {
      this.count++;
      alert(`被点了${this.count}下！`);
    },
    sayHello(name) {
      alert(`Hello, ${name}!`);
    }
  }
})
</script>

v-on让你的页面从静态PPT变成了可交互的App，是动态体验的基石。

五、双向绑定：月老的红线 `v-model`

这是Vue最魔法、最让人上头的指令！它主要用于 <input>, <select>, <textarea> 这些表单元素上，实现数据和视图的双向绑定。

数据变，视图自动变；视图变（用户输入），数据也自动变。就像月老在数据和表单之间牵了一根红线。

<div id="app">
  <input type="text" v-model="message" placeholder="说点啥...">
  <p>你刚才说的是：{{ message }}</p>

  <hr>
  <h4>单身狗选择器（单选）</h4>
  <input type="radio" id="dog" value="单身狗" v-model="picked">
  <label for="dog">单身狗</label>
  <input type="radio" id="cat" value="铲屎官" v-model="picked">
  <label for="cat">铲屎官</label>
  <p>你的身份是：{{ picked }}</p>

  <hr>
  <h4>吃货清单（多选）</h4>
  <input type="checkbox" id="burger" value="汉堡" v-model="foodList">
  <label for="burger">汉堡</label>
  <input type="checkbox" id="noodles" value="面条" v-model="foodList">
  <label for="noodles">面条</label>
  <p>你想吃：{{ foodList }}</p>
</div>

<script>
const app = new Vue({
  el: '#app',
  data: {
    message: '',
    picked: '',
    foodList: []
  }
})
</script>

玩转v-model，你就掌握了Vue处理用户输入的精髓，表单处理再也不头大。

六、其他实用指令：锦上添花

v-bind：动态绑定属性，缩写是:。比如想动态设置id、class、src等，就得用它。上面:key其实就是v-bind:key。

<img :src="imgUrl" :class="{ active: isActive }">

v-once：一次性渲染。元素和组件只渲染一次，随后数据再变，它也无动于衷。适合优化静态内容。

<p v-once>这个公司名永远不会变：{{ companyName }}</p>

v-cloak：解决页面闪动问题。在Vue实例编译完成前，隐藏未编译的Mustache标签（{{ }}）。需要配合CSS使用。

[v-cloak] { display: none; }

<div v-cloak>{{ message }}</div>

结语：指令，让Vue有了灵魂

好了，唠了这么多，咱们把Vue最核心的指令家族几乎都认识了一遍。从单向传话的v-text，到操控生死的v-if，再到管理列表的v-for，连接事件的v-on，以及终极魔法v-model。

它们就像是你作为“大脑”向“DOM世界”发出的一条条清晰指令，让你从繁琐的DOM操作中解放出来，只需要关心数据的变化。这就是Vue.js的响应式魅力所在。

Vue基础教程（39）Vue.js语法之指令：别硬卷了！Vue.js指令才是你和框架谈恋爱的正确姿势：从入门到上头，附完整代码实战

一、初识指令：你的第一个“暗号” v-text 和 v-html

二、条件渲染：影帝的诞生 v-if vs v-show

三、列表渲染：海王的鱼塘管理 v-for

四、事件处理：给元素装上“耳朵” v-on

五、双向绑定：月老的红线 v-model