Vue是一个轻量级、灵活且易学易用的前端框架，它通过提供简洁的API和强大的功能，帮助开发者构建交互性高、性能优秀的现代化Web应用程序。它拥有庞大的社区和活跃的开发者群体，提供了大量的插件、工具和扩展库，使得开发人员能够更方便地构建复杂的Web应用。作为一名合格的前端工程师，Vue框架是我们必不可少的工具，我们必须要做到熟练的掌握Vue的使用方法。
这篇文章我会为大家介绍几个最常见的基本Vue指令。
Vue的使用
Vue的使用有两种方法。第一种是通过脚手架创建一个Vue应用，第二种则是在原生js上借助script标签直接通过 CDN来使用Vue。
xml
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>在这里我使用的是第二种方法。
v---if
v-if用于根据条件对DOM元素进行条件渲染。
xml
<body>
<div id="app"></div>
<template id="my-app">
<!-- <h2 v-if="status===1">{{time}}</h2>
<h2 v-if="status===2">{{time2}}</h2>
<h2 v-if="status===3">{{time3}}</h2>
<button @click="change">切换</button> -->
<h2 @click="hide" v-if="show">{{time}}</h2>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
<script>
const app =Vue.createApp({
template:'#my-app',
data(){
return {
time:'2023-12-08',
time2:'2023年12月08日',
time3:'2023/12/08',
status:1,
show:true
}
},
methods:{
change(){
if(this.status===3){
this.status=0
}
this.status++
},
hide(){
this.show =false
}
}
})
app.mount('#app')
</script>
</body>在模板 my-app 中，我们使用了 v-if 指令来根据不同的条件进行元素的显示和隐藏。根据 status 的值不同，我们可以选择性地显示不同的日期格式。
通过 @click 事件监听器，我们可以在点击元素时执行 hide 方法，将 show 的值设置为 false，从而隐藏日期。
在 data 中定义了 time、time2、time3、status 和 show 变量。初始状态下，show 的值为 true，因此日期会显示出来。通过点击元素，我们可以触发 hide 方法将 show 的值设置为 false，从而隐藏日期。
通过 change 方法，我们可以切换 status 的值，从而在不同的条件下显示不同的日期格式。
v---text
v-if用于根据条件对DOM元素进行条件渲染。
xml
<body>
<div id="app"></div>
<template id="my-app">
<h2>{{msg}}</h2>
<h2 v-text="msg"></h2>
<h1 v-html="article"></h1>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
<script>
const app =Vue.createApp({
template:'#my-app',
data(){
return {
msg:'指令的使用',
article:'<p>这是第一个段落</p><p>这是第二个段落</p>',
}
},
method(){
}
})
app.mount('#app')
</script>
</body>在模板my-app中，我们使用了三个指令来处理文本和 HTML 内容的显示：
{{msg}}使用双括号插值语法，将msg变量的值直接显示在<h2>标签中。v-text="msg"使用v-text指令，将msg变量的值作为文本内容显示在<h2>标签中。v-html="article"使用v-html指令，将article变量的值作为 HTML 内容显示在<h1>标签中。
在 data 中定义了 msg 和 article 变量，分别存储了文本内容和 HTML 内容。
v---bind
1. v-bind动态绑定属性到DOM元素上。
xml
<body>
<div id="app"></div>
<template id="my-app">
<img width="200" v-bind:src="imgUrl" alt="">
<a :href="link">跳转</a>
<!-- v-bind 用来动态绑定属性，在这里将字符串变为变量 :为v-bind的缩写-->
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
<script>
Vue.createApp({
template:'#my-app',
data(){//数据源
return {
imgUrl:'https://p.qqan.com/up/2020-7/2020070908330789546.jpg',
link:'http://www.baidu.com/'
}
},
}).mount('#app')
</script>
</body>在上面的代码中，v-bind指令可以简写为冒号":"，它绑定了一个属性或表达式到相应的HTML元素上。例如，v-bind:src将绑定一个数据属性"imageUrl"到元素的src属性上，v-bind:href将绑定一个数据属性"linkUrl"到a标签的href属性上。
除了属性绑定外，v-bind还可以用于绑定JavaScript表达式、计算属性和对象的属性。
2.v-bind动态绑定表达式到DOM元素上。
例如：通过v-bind动态绑定类名
xml
<style>
.active{
color: green;
}
</style>
<body>
<div id="app"></div>
<template id="my-app">
1. <!-- <h2 :class="className">v-band绑定类名</h2>
2. <h2 :class="{'active':isActive}">v-band绑定类名</h2>
<button @click="toggle">切换</button> -->
3. <!-- <h2 :class="{'active':isActive,'title':ture}">动态绑定多个类名</h2> -->
4. <!-- <h2 :class="classobj">通过对象绑定多个类名</h2>
5. <h2 :class="getClass">通过函数的返回值来绑定多个类名</h2> -->
6. <h2 :class="[isActive ? 'active':'name']">三元运算符</h2>
7. <div :abc="isActive">hello world</div>
<!-- 添加了属性abc值为false -->
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
<script>
Vue.createApp({
template:'#my-app',
data(){//数据源
return {
className:'active',
isActive:false,
classobj:{
active:true,
title:true
}
}
},
methods:{
getClass(){
return{
active:true,
title:true
}
},
toggle(){
this.isActive = !this.isActive;
}
}
}).mount('#app')
</script>
</body>上述代码描述了7种使用v-bind来绑定类名的方法。
第一种
ruby
<h2 :class="className">v-band绑定类名</h2>在上面的代码中，我们使用了v-bind指令将一个数据属性"className"动态地绑定到h2标签的class属性上。这样可以根据"className"的值来动态地修改元素的类名，实现样式的动态切换。
第二种
ruby
<h2 :class="{'active':isActive}">v-band绑定类名</h2>这里使用了对象语法来动态绑定类名。当isActive为true时，类名"active"会被添加到h2的元素上，从而触发对应的CSS样式。
第三种
php
<h2 :class="{'active':isActive,'title':true}">动态绑定多个类名</h2>这个示例展示了如何同时动态绑定多个类名。当isActive为true时，类名"active"会被添加；无论如何，类名"title"都会被添加。
第四种
ini
<h2 :class="classobj">通过对象绑定多个类名</h2>这个示例展示了如何通过对象来动态绑定多个类名。在data中定义了一个classobj对象，它包含了两个属性：active和title。当属性值为true时，对应的类名会被添加到元素上。
第五种
ini
<h2 :class="getClass">通过函数的返回值来绑定多个类名</h2>这个示例展示了如何通过方法的返回值来动态绑定多个类名。在methods中定义了一个getClass方法，它返回一个对象，对象的属性值为true时，对应的类名会被添加到元素上。
第六种
ini
<h2 :class="[isActive ? 'active' : 'name']">三元运算符</h2>这个示例展示了如何使用三元运算符来动态绑定类名。当isActive为true时，类名"active"会被添加；否则，类名"name"会被添加
第七种
ruby
<div :abc="isActive">hello world</div>这个示例不是用来动态绑定类名的，而是演示了如何使用v-bind指令来动态绑定元素的属性。在这里，属性名是"abc"，属性值为isActive的值（布尔型）。
这些都是动态绑定类名的方法，这些方法可以根据数据的变化来动态切换样式，让你的页面更加灵活和交互性。
v---on
v-on是 Vue.js 中用来绑定事件监听器的指令。
xml
<body>
<div id="app"></div>
<template id="my-app">
<h2>{{count}}</h2>
<button v-on:click="handleAdd($event,10)">add</button>
<!-- v-on 用来绑定事件 v-on可以简化为click -->
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
<script>
Vue.createApp({
template:'#my-app',
data(){//数据源
return {
count:1
}
},
methods:{
handleAdd(e,n){
console.log(e);
this.count+=n
}
}
}).mount('#app')
</script>
</body>在这个示例中，Vue 实例被创建并挂载到 app 元素上。模板 my-app 中包含了一个标题 <h2> 和一个按钮 <button>。按钮绑定了 v-on:click 指令，表示监听点击事件并执行对应的方法。
当按钮被点击时，会触发 handleAdd 方法，并将点击事件对象 $event 作为参数传入。该方法会将传入的数字 10 加到 count 属性上，并更新视图。
最终会实现通过点击add按钮来将初始值1每次增加10。
v---for
v-for用于循环渲染数组或对象的数据到DOM中。
xml
<body>
<div id="app"></div>
<template id="my-app">
<ul>
<li v-for="(item,index) in lists" :key="index">
<!-- key为for循环里的唯一标记 -->
<h2>{{item.author}}</h2>
<ul>
<li v-for="song in item.songs" :key="song.id">{{song.name}}</li>
</ul>
</li>
</ul>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
<script>
Vue.createApp({
template:'#my-app',
data(){//数据源
return {
lists: [
{
author: '周杰伦',
songs: [
{id: 1, name: '听妈妈的话'},
{id: 2, name: '夜曲'},
{id: 3, name: '半岛铁盒'},
{id: 4, name: '说好不哭'},
]
},
{
author: '许嵩',
songs: [
{id: 1, name: '千百度'},
{id: 2, name: '全球变冷'},
{id: 3, name: '拆东墙'},
{id: 4, name: '雅俗共赏'},
]
}
]
}
},
}).mount('#app')
</script>
</body>在模板 my-app 中，我们使用了两个嵌套的 v-for 指令来循环渲染列表。外层的 v-for 循环遍历 lists 数组，内层的 v-for 循环遍历每个 item 对象中的 songs 数组。
通过 v-for="(item, index) in lists"，我们可以获得每个 item 对象和对应的索引 index。在外层循环中，我们将 item.author 渲染为 <h2> 标题，并在内层循环中将 song.name 渲染为列表项。
为了提高渲染效率和性能，需要给循环的每个项添加 :key 绑定一个唯一的标识符，这里使用了 index 和 song.id 作为 :key 的值。
在 data 中定义了 songs 和 lists 数组，分别包含了歌曲名称和作者的相关数据。