指令系统.

指令系统

（1）v-bind 指令

标签属性绑定指令（用来绑定标签的属性值）

为什么要绑定？

动态控制属性值

简写：

<div v-bind:class="yourclass"></div>
<div :class="yourclass"></div>  //这种情况用的最多

v-bind 指令，可以直接绑定一个对象，此时，这个对象的属性就会成为标签的属性，值就是属性值。

（2）v-on 指令

事件绑定指令

1>绑定事件
语法：v-on:事件=“函数”
-事件，不要带on onclick -> click
-简写：@事件 = “函数”(最常用的写法)

2>定义事件
在vue的对象参数中，使用《methods》属性完成！

methods:{
			change(){
							console.log('hello')
			},
			move:function(){
							console.log('move')
			},
			over(){
							console.log('over')
			}
	}

3>在函数中，可以使用this代表当前的vue实例！

4>传参

<button @click = "change(change('hahaha')">按钮</button>

-dataset（他是标签对象的属性）
可以通过事件对象获取标签对象，然后获取dataset
5>事件对象

	-第一种获取方式
	<button @click = "change1">按钮1</button>
	接受：
	change1(e){
						//e就是事件对象
		}
		
	-第二种形式
	<button @click="change1('a',$event)">按钮1</button>
			接受：
			change1(e){
				// e就是事件对象
			}		

6>多事件处理程序（用的比较少）
可以同时给某个标签的某个事件绑定多个函数

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

记住：多事件处理程序的函数小括号不能丢
7>时间修饰符
在事件相关逻辑时，有些情况可能经常会发生，比如冒泡，比如默认行等等，vue团队考虑到这些情况，直接将一些情况做了封装，让我们可以非常方便的解决这些问题。

-系统行为事件修饰符
|.stop| 阻止冒泡 |
|-.-|–|
| prevent | 阻止默认行为 |

.capture	添加事件监听器时使用事件捕获模式
.self	规定只有事件发生在自身时出发函数
.once	一次性事件
–	–

-按键修饰符（专门针对键盘事件）

• enter
• .tab
• .delete（捕获“删除”和“退格”）
• .esc
• .space
• .up
• .down
• .left
• .right
  -系统按钮，只有按下相应按键时，才能触发对应的事件
• .ctrl
• .alt
• .shift
• .meta
  -鼠标事件修饰符
• .left
• .right
• .middle

（3）v-if 根据条件决定是否显示dom结构

1>v-if 的值如果时ture，则显示dom结构，如果是false，则不显示dom结构
2>v-if 可以跟表示式

<div class="box" v-if="show > 10"></div>

3>v-else / v-else-if 都是配合v-if 指令使用
-v-else 他就是v-if的else 条件，并且 v-if 和 v-else 他们两个修饰的dom结构，必须紧紧挨在一起
-v-else-if

4>v-show 根据条件决定是否显示dom结构
v-show 与 v-if 到底有什么区别？
v-show 是通过display属性控制元素是否可视；而v-if是此dom结构是否存在来控制是否显示；
v-if有更高的切换开销，而v-show 有更高的初始渲染开销哦啊，所以，对于频繁切换的效果，推荐使用v-show；而很少切换的效果，推荐使用v-if。

（5）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-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>

总结

以上就是今天要讲的内容