引言
在上一篇文章中，我们讲了一些简单的指令,Vue小白之旅-简单指令（一),本文将继续为大家讲解Vue的一些重要的指令和他们的使用方法。
一、bind&on
1.v-bind
动态的绑定一个或多个 attribute，也可以是组件的 prop
在处理绑定时，Vue 默认会利用
in操作符来检查该元素上是否定义了和绑定的 key 同名的 DOM property。如果存在同名的 property，则 Vue 会将它作为 DOM property 赋值，而不是作为 attribute 设置。这个行为在大多数情况都符合期望的绑定值类型，但是你也可以显式用.prop和.attr修饰符来强制绑定方式。有时这是必要的，特别是在和自定义元素打交道时。
光看文档有点难以理解，简单的说就是在Vue中处理绑定时，默认会检查元素上是否有与绑定的属性同名的DOM属性。如果存在同名属性，Vue会将其作为DOM属性赋值，而不是作为属性设置。我们用实例来为大家展示。
- v-bind 绑定class
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<!-- <div :class="className">盖亚</div> -->
<!-- isActive为true则添加类名 -->
<!-- <div :class="{'active':isActive}">波比大王</div>
<button @click="change">切换</button> -->
<div :class="{'active':isActive,'title':true}">赛博朋克</div>
<div class="lang" :class="className">鱼缸套装</div>
<div class="baobao" :class="classObj">旭旭宝宝</div>
<div class="baby" :class="getClass()">🐂( ఠൠఠ )</div>
<div :class="['yu','baby',className]">🐟🐟🐟</div>
<div :class="['long',isActive?'active':' ']">🐉🐉</div>
<div :class="['niaoniao',{'active':isActive}]">🐥</div>
</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
className:'username',
isActive:true,
classObj:{
active:true,
title:true
}
}
},
methods:{
change(){
this.isActive = !this.isActive
},
getClass(){
return 'niuniu'
}
}
}
Vue.createApp(App).mount('#app')
</script>
</body>
</html>我们在这里可以使用V-bind来绑定在数据源data中的属性，将效果添加到绑定的div中。v-bind可以省略为一个冒号:
例如：
html
<div class="lang" :class="className">鱼缸套装</div>在这段代码中，我们直接绑定了数据源中的className属性
html
<div :class="{'active':isActive,'title':true}">赛博朋克</div>在这段代码中，isActive为布尔值，如果true，则为div添加active
如果我们需要添加多个样式，可以使用数组的方式来实现这个效果
html
<div :class="['yu','baby',className]">🐟🐟🐟</div>- v-bind 绑定style
style的绑定规则和class一样 ，可以通过这些方式绑定
html
<div :style="{color: fontColor,fontSize:fontSize}">凡凡真帅</div>
<div :style="styleObj">易峰</div>
<div :style="[styleObj,styleObj2]">蔡徐坤</div>- v-on
v-on看似新鲜，其实我们早就只用过他，聪明的掘友们应该已经发现了...就是绑定点击事件时使用的@
html
<button v-on:click="handle">按钮</button>
<button v-on:click="add">{{count}}</button>二、条件渲染
1.v-if
假设有一个按钮，我点击他，任何页面上的内容或者数据随之改变，我们可以怎么做呢？在没有v-if以前，我们也许会声明一个函数，任何给按钮装上点击事件，设置默认值，如果改变，就在数据源中修改数据以达到想要的效果，那我们使用v-if也可以完成这样的操作，并且使得操作更加简单。
html
<h2 v-if="count===1">hello CXK</h2>
<h2 v-else-if="count===2">こんにちは,kk</h2>
<h2 v-else>你好，坤坤</h2>
<button @click="change">切换</button>和其他语言一样，我们这里如果要切换多个选项，可以使用v-else-if和v-else，我们绑定了change方法，我们来看看change()
js
change() {
this.count++
if(this.count === 3){
this.count = 0
}
}每点击一次，让count++，加到3置为0，如果满足v-if中的条件，则div显示，反之则不显示，于是我们就实现了切换效果。掘友们，是不是很方便迅捷。
2.v-show
v-show实现的效果和v-if差不多
html
<!-- show为css结构添加display:none，而if直接干掉 -->
<!-- 权限问题用if -->
<h2 v-show="isShow">hello CXK</h2>
<button @click="change">切换</button>当v-show后面的isShowfalse时不显示。
3.if和show的区别
既然if和show都可以让我们的内容展示或者消失，那他们之间到底有什么区别呢？
v-show让div消失的手段是让display为none，但if是直接将div干掉。
当涉及到权限操作的时候，我们要使用v-if，若使用v-show，则可以直接在浏览器上修改dispaly，将内容展示出来。
三、列表渲染
1.v-for
想必大家都写过将数据动态添加li再添加到ul中的例子
html
<ul id="myList"> </ul>
<button onclick="addItem()">添加</button>
<script> function addItem() {
var ul = document.getElementById("myList");
for (var i = 1; i <= 5; i++) {
var li = document.createElement("li");
li.innerText = "Item " + i; ul.appendChild(li);
}
}
</script>我们要先获取DoM结构，再遍历循环添加。v-for可以更快的实现这个效果。
html
<body>
<div id="app"></div>
<template id="my-app">
<h2>歌曲列表</h2>
<ul>
<li v-for="(item,index) in songs" :key="index">{{index+1}}--{{item}}
<a href="#" @click="del(index)">X</a></li>
</ul>
</template>
<script>
const App = {
template: '#my-app',
data(){
return {
songs:[
'夜曲',
'依然范小勤',
'等你下课',
'说好不哭'
]
}
},
methods:{
del(i){
console.log('删除',i);
this.songs.splice(i,1)
}
}
}
Vue.createApp(App).mount('#app')
</script>
</body>在下面这段代码中，v-for后面接(item,index) in songs，item代表遍历到的每一个元素，index代表他们的下标，有了下标以后我们可以更加方便的去进行更多的操作。：key是用来给每个列表项指定一个唯一的标识符。它的作用是为 Vue 提供一个依据，用于追踪和管理每个列表项的状态。通过设置 :key，Vue 可以根据这个值来高效地更新和重新排序列表项，而不需要重新渲染整个列表。
html
<li v-for="(item,index) in songs" :key="index">{{index+1}}--{{item}}同时在进行删除操作的时候，可以传入index的实参来实现删除操作。
结尾
在本文中，我们介绍了 Vue 中的简单指令，并学习了如何使用 v-bind、v-on 和 v-if 等指令来操作 DOM、响应事件和条件渲染。
Vue 的指令为我们提供了一种简洁而强大的方式来处理视图层的交互和渲染逻辑。通过灵活运用这些指令，我们可以轻松地实现各种复杂的功能，提升用户体验。
希望通过本文的介绍，你对 Vue 的指令有了初步的了解，并能够开始尝试在自己的项目中使用它们。如果你还有任何疑问或需要进一步了解，请查阅 Vue 官方文档，那里有更详细的指令说明和示例。
祝你在 Vue 的学习和开发过程中取得成功！