Vue指令系统

---

一、v-bind

标签属性绑定指令，用来动态控制属性值
v-bind指令可以为某个属性绑定上一个动态值，
也可以直接绑定一个对象，这个对象的属性会成为标签的属性，值就是属性值。

<div id="app">
    <div v-bind:class="pro"></div>
    <div v-bind="{'class':'box'}"></div>
    <div v-bind="obj"></div>
</div>

v-bind还可以简写，一般都是采用这种写法（把v-bind去掉，直接写个冒号就行了）

<div id="app">
    <div :class="pro"></div>
</div>

二、v-on

事件绑定指令
语法格式： v-on：事件 = ’ 函数 ’
简写： @事件 = ’ 函数 ’ （最常用的写法）

<div id="app">
    <div @click="dian"></div>
</div>

然后在Vue对象中，使用methods属性来定义函数

<script>   
    let app = Vue.createApp({
        methods:{
            dian(){
                console.log('这是一个点击事件');
            }
        }
    }).mount('#app')
</script>

在自定义事件时，它跟原生js并无太大区别，同样可以传参，以及获取当前事件对象

<button @click="change('hello')">按钮</button>
let app = Vue.createApp({
    methods:{
        change(one){
            console.log(one);
        }
    }
}).mount('#app')

一些简单的逻辑（就一行逻辑），可以直接写在标签上

<button @click="num++">按钮</button>

在Vue函数中，this指向的是当前Vue实例对象，这点要特别注意

事件对象

事件对象的获取，这里有两种方式：
第一种，没有传递任何参数，小括号可以省略不写（第一个参数默认就是事件对象）

<button @click="change">按钮</button>
let app = Vue.createApp({
    methods:{
        change(e){
            console.log(e);
        }
    }
}).mount('#app')

第二种，传递参数时，$event就是事件对象，把它传递给函数就可以了

<button @click="change('第一个参数',$event)">按钮</button>
let app = Vue.createApp({
    methods:{
        change(a,e){
            console.log(a,e);
        }
    }
}).mount('#app')

在绑定事件时，也可以同时给某个标签绑定多个函数（多事件处理程序的函数小括号不能丢）

<button @click="change(),change1(),change1()">按钮</button>

事件修饰符

在事件相关逻辑时，有些情况可能经常会发生，比如冒泡,比如默认行等等，vue团队考虑到这些情况，直接给咱们将一些情况做了封装，让咱们可以非常方便的解决这些问题
使用方法:（如下）

<button @click="change.stop.tab">按钮</button>

系统行为事件修饰符

				.stop	 	阻止冒泡
				.prevent 	阻止默认行为
				.capture 	添加事件监听器时使用事件捕获模式
				.self		规定只有事件发生在自身时触发函数
				.once		一次性事件
			- 按键修饰符（专门针对键盘事件）
				.enter
				.tab
				.delete (捕获“删除”和“退格”键)
				.esc
				.space
				.up
				.down
				.left
				.right
			- 系统按钮，只有按下相应按键时，才能触发对应的事件
				.ctrl
				.alt
				.shift
				.meta	
			- 鼠标事件修饰符
				.left
				.right
				.middle

三、v-if

根据条件来决定是否显示dom结构
v-if 的值如果是true，则显示dom结构， 如果是false，则不显示dom结构

<button @click="num++">按钮</button>{{num}}

<div class="box1" v-if="num>1 && num<3"></div>
<div class="box2" v-else-if="num>3"></div>
<div class="box3" v-else></div>

v-else 和 v-else-if 都是配合–if 指令使用的
它们跟js中的 if 和 else 的逻辑基本一样，v-else就是v-if 的else条件，它们修饰的dom结构，必须紧紧挨在一起！
也就是说，中间不能有别的结构

四、v-show

根据条件来决定是否显示dom结构
v-show 和 v-if 的逻辑一模一样，这里不多赘述，同样是通过 值为 true/false 来决定dom是否显示。

<div class="box1" v-show="true"></div>

这里聊一下，v-show 与 v-if 的区别：
v-show 是通过display属性控制元素是否可视；而v-if是此dom结构是否存在来控制是否显示；
v-if 有更高的切换开销，而v-show有更高的初始渲染开销，所以，对于频繁切换的效果，推荐使用v-show;而很少切换的效果，推荐使用v-if。

五、v-for

循环遍历一个数组，v-for 修饰的dom结构，会被循环渲染指定的次数（通常是被遍历数组的长度）

<ul class="ul">
    <li v-for="item in newList" :key="item.id">{{item.title}}</li>
</ul>

逻辑类似原生js的for…in…循环，这里item表示数组中的每个元素， newList表示被渲染的数组，这里通过 {{}}插值的方式，把数组每个元素中的title给展示了出去。

:key 是v-bind的简写，上文有提到，这里是给每个dom结构添加一个唯一的值（记一下，很有用的）

v-for 还接收第二个参数，表示索引位置（记得加小括号）

<ul class="ul">
    <li v-for="(item,index) in newList" :key="item.id">{{item.title}}</li>
</ul>

v-for 支持遍历对象

<ul class="ul">
    <li v-for="(item,key) in Obj" :key="item.id">{{item.title}}</li>
</ul>

此时 item 表示对象的 键名， key表示 键值。

v-for 和 v-if 的注意事项

同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。当它们同时存在于一个节点上时，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>

如果要同时使用，可以在外层套一个template标签，此标签不会渲染到页面，但却可以被循环，里面的子标签就可以使用循环的index值，来做v-if 的条件判断逻辑了