前言
提示：以下是本篇文章正文内容，下面案例可供参考
一、v-bind 指令
v-bind 指令是 标签上的所有属性都可以通过v-bind进行绑定，绑定的属性与data属性进行关联，以实现动态控制属性值的目的
<p v-bind:title="title">hello world</p>
let app = Vue.createApp({
data(){
return{
title:'你好 世界'
}
}
}).mount('#app')
:title ='title’第二个title为data中的属性，可以是动态的发生改变
v-bind有简写模式：
<p :title="title">hello world</p>
v-bind指令 可以直接绑定一个对象，这个对象的属性就会成为标签的属性，值就是属性值
二、v-on 指令
1、绑定事件
语法：v-on:事件 = ‘函数’
- 事件，不要带on 例：onclick >click
- 简写：@事件 = ‘函数’
2、定义事件
在vue的对象参数中，使用 methods 属性完成
例：
<!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>
.box{
width: 100px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div id="app">
<div class="box" @click="move"></div>
</div>
</body>
<script src="../vue/vue.js/vue.global.js"></script>
<script >
let app = Vue.createApp({
data(){
return{
}
},
methods:{
move(){
console.log('hello');
}
}
}).mount('#app')
</script>
</html>
在函数中，可以使用this代表当前的vue实例
3、传参
> <button @click="change('hahaha')">按钮</button>
> let app = Vue.createApp({
data(){
return{
}
},
methods:{
change(e){
console.log(e);
}
}
}).mount('#app')
dataset（是标签对象的属性）
可以通过事件对象获取标签对象，然后获取dataset
4、事件对象
第一种获取方式
<button @click="change1">按钮1</button>
接受：
change1(e){
// e就是事件对象
}
第二种形式：
<button @click="change1('a',$event)">按钮1</button>
接受：
change1(e){
// e就是事件对象
}
5、多事件处理程序
可以同时给某个标签的某个事件绑定多个函数
<button @click="change(),change1()">按钮2</button>
注意：多事件处理程序的函数小括号不能丢
6、事件修饰符
在事件相关逻辑时，有些情况可能经常会发生，比如冒泡、默认行为等等，vue团队考虑到这些情况，直接将一些情况做了封装，可以非常方便的解决这些问题。
- 系统行为事件修饰符
.stop 阻止冒泡
.prevent 阻止默认行为
.capture 添加事件监听器时使用事件捕获模式
.self 规定只有事件发生在自身时触发函数
.once 一次性事件 - 按键修饰符（专门针对键盘事件）
.enter
.tab
.delete（捕获“删除”和“退格”键）
.esc
.space
.up
.down
.left
.right - 系统按钮，只有按下相应按键时，才能触发对应的时间事件
.ctrl
.alt
.shift
.meta - 鼠标事件修饰符
.left
.right
.middle
三、v-if 指令
v-if根据条件决定是否显示dom结构
- 对于复杂结构，可以通过一个不可见元素
<temolate>进行包裹，并且不会被渲染到页面，然后控制其显示与否 - v-if 的值如果是true，则显示dom结构，如果是false，则不显示dom结构
- v-if 可以跟表达式：
<div class="box" v-if="show > 10"></div>
- v-else v-else-if 都是配合v-if指令使用
v-else 就是v-if的else条件，并且v-if和v-else两个修饰的dom结构，必须紧紧挨在一起
v-else-if 充当v-if的“else-if”，可以连续使用
四、v-show 指令
v-show与v-if的区别：
- v-show是通过display属性控制元素是否可视；而v-if是此dom结构是否存在来控制是否显示
- v-if有更高的切换开销，而v-show有更高的初始渲染开销，所以，对于频繁切换的效果，推荐使用v-show；而很少切换的效果，推荐使用v-if
五、v-for 指令
v-for 循环
遍历一个数组，v-for所在的dom结构会被循环指定的次数
<li v-for="item in newsList" :key="item">
{{item}}
</li>
- 一定要给v-for所在标签绑定一个唯一的 key属性
- v-for接受第二个参数，表示索引位置
<li v-for="(item,index) in newsList" :key="item.id">
{{index}}--{{item.news_title}}
</li>
- v-for还支持遍历对象
<ul class="list">
<li v-for="(item,key) in info" :key="item">{{key}} -- {{item}}</li>
</ul>
- v-for还支持遍历数字
<ul class="list">
<li v-for="item in 10" :key="item">{{item}}</li>
</ul>
- v-for 的更新检测
当通过一些方法操作数组时，应该记得，操作的其实就是原数组，这些方法对于数组的操作，可以直接反馈到dom中
push()、pop()、shift()、unshift()、splice()、sort()、reverse()
这几个方法操作数组的时候，操作结果会直接反馈到dom中。而使用其他数组方法操作数组时，要做一个重新赋值 - v-for和v-if不要在一个标签上同时使用
同时使用v-for和v-if是不推荐的，因为这样二者的优先级不明显。当它们同时存在于一个节点上时，v-if比v-for的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名
template v-for="(item,index) in tabs" :key="item.title">
<li v-if="index === currentIndex">{{item.content}}</li>
</template>