Vue中有很多的指令，且形式都是：v-???? 我在这里总结了12个常见指令，顺序如下：v-on、v-bind、v-model、v-for、v-show、v-if、v-else/v-else-if、v-text、 v-html、v-cloak、v-once、v-pre
1. v-on
用于绑定事件，用法如下：
(1) 先来看看有哪些事件：
绑定键盘事件：
<input type="text" placeholder="请输入" v-on:keyup="ShowInfo" />
绑定鼠标单击事件：
<a href="#" v-on:click="ShowInfo">鼠标单击事件</a>
绑定鼠标覆盖事件：
<a href="#" v-on:mouseover="ShowInfo">鼠标覆盖事件</a>
绑定鼠标双击事件：
<a href="#" v-on:dblclick="ShowInfo">鼠标双击事件</a>
总之就是替换掉v-on:后边的事件即可，下面总结一下可能会用到的事件：
鼠标事件
在这里再总结一下input框的几个事件：
input事件：适用于实时查询，每输入一个字符都会出发这个事件
<input type="text" v-on:input="ShowInfo" />
blur事件：失去焦点时触发的事件
<input type="text" v-on:blur="ShowInfo" />
(2) v-on的简写形式：
v-on：可以简写成@，即上边所有的v-on:事件名都可以简写成@事件名，比如@click，@keyup，@input……
(3) 传参（以click事件为例）：
不传参:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<a href="#" v-on:click="ShowInfo">{{msg}}</a>
</div>
<script>
Vue.config.productionTip = false; //阻止Vue在启动时生成生产提示
const vm = new Vue({
el: '#root',
data: {
msg: '点我提示信息',
},
methods: {
ShowInfo(event) {
console.log(event); //event是这个事件对象，这里会有一个默认的参数
},
},
});
</script>
</body>
</html>
v-on: 可以简写为 @ : @click="ShowInfo"
传参:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<a href="#" @click="ShowInfo(1)">{{msg}}</a>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
msg: '点我提示信息',
},
methods: {
ShowInfo(num) {
console.log(num); //打印结果为1
},
},
});
</script>
</body>
</html>
这样传参会导致丢失event，那么怎么给event占位呢？看下面：
总结：
事件的基本使用：
1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；
(4) v-on绑定多个事件：
语法：v-on="{事件名：方法名，事件名：方法名,……}"，v-on里面是一个对象，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- v-on绑定多个事件： -->
<button v-on="{click:single,dblclick:double}">单击n+1,双击m-1</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
n: 1,
m: 2,
},
methods: {
single() {
console.log('我被单击了');
},
double() {
console.log('我被双击了');
},
},
});
</script>
</body>
</html>
2. v-bind
单向数据绑定，它是为标签里的某个属性绑定值用的 下次课在复习！
