（2）Vue事件绑定的使用
文章目录
第2章 Vue事件绑定的使用
2.1 Vue基本使用
Vue.js 是一个用于构建用户界面的渐进式JavaScript框架。它提供了一套声明式的渲染数据到DOM的系统（其底层依赖于Vue提供的VM组件），以及组件化的开发模式。Vue.js 通过指令来扩展HTML的功能，使得开发者能够以声明式的方式将DOM的绑定至底层Vue实例的数据上。
2.1.1 插值表达式
Vue.js 中的插值表达式是一种简洁的方式，用来在模板中显示数据模型的变化。最常用的插值表达式是双大括号 {{ }}，它可以插入数据模型中变量的值。
- 使用示例：
当在模板中使用双大括号 {{ }} 包裹一段表达式时，Vue 会计算这段表达式的值，并将其转换为字符串然后插入到 DOM 中。例如：
<span>{{ message }}</span>如果 Vue 实例的数据（data）中有 message 属性，那么该属性的值将被渲染到页面上。
插值表达式中可以包含任何有效的 JavaScript 表达式，包括变量引用、字符串连接、算术运算等。
例如：
<p>{{ firstName + ' ' + lastName }}</p><p>{{ 1 + 2 }}</p><p>{{ ok ? 'YES' : 'NO' }}</p>小练习：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script></head><body><!-- 准备一个容器 --><div id="box"><h3>number:{{number}}</h3><h3>message:{{message}}</h3><h3>flag:{{flag}}</h3><h3>car:{{car}}</h3><h3>season:{{season}}</h3></div></body><script type="text/javascript">// 是否开启devtools调试工具(开发版本默认为true,生产版本默认为false)Vue.config.devtools = true;new Vue({ // 创建一个Vue实例el: "#box", // 通过id选择器选择某个控件(代码Vue接管这片区域)data: { // Vue中存放数据的地方(Model)number: 100,message: "Hello Vue!",flag: true,car: {brand: "长安汽车",name: "长安CS95",price: 158000},season: ["Spring", "Summer", "Autumn", "Winter"]}})</script></html>2.1.2 注意事项
一个Vue只能绑定一个组件，即使选择器可以选择多个组件，那么也不会生效；
<body><div class="box">{{msg}}</div><div class="box">{{msg}}</div><script type="text/javascript">new Vue({el: ".box", // 通过class选择器选择组件data: {msg:"Hello Vue!"}})</script></body>
当然，我们也可以创建多个Vue实例来接管多个组件。
<body>
<div id="box1">{{msg}}
</div><div id="box2">{{msg}}
</div><script type="text/javascript">new Vue({el: "#box1", // 通过class选择器选择组件data: {msg:"Hello Vue!"}})new Vue({el: "#box2", // 通过class选择器选择组件data: {msg:"Hello Vue!"}})
</script></body>2.2 Vue事件绑定
在Vue中提供 v-on 命令用于监听 DOM 事件，并在事件触发时执行一些 JavaScript 代码。它可以在 Vue 模板中被用来响应用户操作，如点击按钮、输入文本等。可以直接在 HTML 元素上使用 v-on 指令来绑定一个事件监听器到这个元素上的某个事件上。最简单的形式是将一个方法名（字符串）作为表达式传入 v-on 指令。
- 示例代码：
<button v-on:click="doSomething">点击我</button>当用户点击按钮时，将会调用 Vue 实例中的 methods 属性里定义的 doSomething 方法。
- 简写方式：
为了简化书写，Vue 还提供了一个简短的语法来代替完整的 v-on 写法。只需要使用 @ 符号加上事件名即可。
<button @click="doSomething">点击我</button>vue提供的事件非常多，几乎支持所有的原生JS事件，采用v-on:的方式监听。常用的Vue事件如下。
| 事件类型 | 描述 |
|---|---|
| click | 当用户点击鼠标按钮时调用。 |
| dblclick | 当用户双击鼠标按钮时调用。 |
| mousedown | 当用户按下鼠标按钮时调用。 |
| mouseup | 当用户释放鼠标按钮时调用。 |
| mouseover | 当用户将鼠标指针移到元素上时调用。 |
| mouseout | 当用户将鼠标指针从元素或其子元素移开时调用。 |
| mouseenter | 当用户将鼠标指针移到元素上时调用（不包括子元素）。 |
| mouseleave | 当用户将鼠标指针从元素或其子元素移开时调用。 |
| contextmenu | 当用户右击（或执行类似操作）来打开上下文菜单时调用。 |
| keydown | 当用户按下键盘上的键时调用。 |
| keypress | 当用户按下一个或多个键并且产生字符值时调用。 |
| keyup | 当用户释放键盘上的键时调用。 |
| submit | 当表单提交时调用。 |
| focus | 当元素获得焦点时调用。 |
| blur | 当元素失去焦点时调用。 |
| change | 当域的内容被改变时调用。 |
| input | 每当输入字段发生变化时调用。 |
| reset | 当表单被重置时调用。 |
| select | 当用户选择一些文本或更改了对象的选择时调用。 |
| touchstart | 触摸开始时调用。 |
| touchmove | 触摸移动时调用。 |
| touchend | 触摸结束时调用。 |
| touchcancel | 触摸被中断时调用。 |
2.1.1 点击事件
点击事件分为单机事件与双击事件，在Vue中分别采用click和dbclick来监听。
- v-on:click：单机事件。
- v-dbclick：双击事件。
示例代码：
<body>
<div id="box"><h3>单击事件</h3><p><a href="http://www.baidu.com" v-on:click="fun1">我是按钮1</a></p><p><a href="http://www.baidu.com" v-on:click="fun2('hello')">我是按钮2</a></p><p><a href="http://www.baidu.com" v-on:click="fun3">我是按钮3</a></p><!-- v-on: 可以简写成@ --><!-- 如果event参数在后面,则必须显示的传递 --><p><a href="http://www.baidu.com" @click="fun4('hello',$event)">我是按钮4</a></p><h3>双击事件</h3><p><button v-on:dblclick="fun5">双击事件</button></p></div><script type="text/javascript">new Vue({el: "#box",data: {},methods:{fun1:function(){alert(1)},fun2:function(msg){alert(msg)},fun3:function(event){ // Vue中定义的方法默认会传递一个event事件alert(event)event.preventDefault(); // 阻止事件的默认行为(跳转页面)},fun4:function(msg,event){alert(msg);alert(event);},fun5:function(){alert("双击事件！")}}})
</script></body>2.2.2 键盘事件
v-on:keydown：鼠标按下事件v-on:keyup：鼠标抬起事件
示例代码：
<body><div id="box"><input type="text" v-on:keydown="down"><br> <!-- 键盘按下事件 --><input type="text" v-on:keyup="up"> <!-- 键盘抬起事件 --></div><script type="text/javascript">new Vue({el: "#box",data: {},methods: {down() { // 简写方式console.log("键盘按下了")},up(){console.log("键盘抬起了")}}})</script></body>2.2.3 移动事件
v-on:mouseover：鼠标移入事件v-on:mouseout：鼠标移出事件
示例代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="box" style="width: 300px;height: 200px;background-color: gray;" v-on:mousemove="inter" v-on:mouseout="outer"></div><script type="text/javascript">new Vue({el: "#box",data: {},methods: {inter(){console.log("鼠标移入了")},outer(){console.log("鼠标移出了")}}})</script></body></html>2.3 按键修饰符
2.3.1 默认的按键修饰符
当进行键盘事件的监听时，我们可以通过event事件中的keyCode或者key来判断按下的是哪一个键，从而进行针对性的处理；同时Vue也为一些常用的按键分配了按键修饰符（相当于别名），这样就可以更加方便的来监听指定的按键，Vue中常用的按键别名如下：
- 回车 => enter
- 删除 => delete（捕获“删除”和“退格”键）
- 退出 => esc
- 空格 => space
- 换行 => tab（没有keyup事件，只有keydown事件）
- 上 => up
- 下 => down
- 左 => left
- 右 => right
示例代码：
<body><div id="box"><p><input type="text" v-on:keyup="fun1"></p><p><input type="text" v-on:keyup.enter="fun2">enter</p><p><input type="text" v-on:keyup.delete="fun3">delete</p><p><input type="text" v-on:keyup.esc="fun4">esc</p><p><input type="text" v-on:keydown.tab="fun5">tab</p></div><script type="text/javascript">new Vue({el: "#box",data: {},methods: {fun1(event){console.log(event.keyCode,"---",event.key)},fun2(){console.log("您按下了回车！")},fun3(){console.log("您按下了delete！")},fun4(){console.log("您按下了esc！")},fun5(){console.log("您按下了tab！")}}})</script></body>2.3.2 自定义按键修饰符
针对于Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为短横线命名；
例如：CapsLock—>caps-lock
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body>
<div id="box"><p><input type="text" v-on:keyup="fun1"></p><p><input type="text" v-on:keyup.Control="fun2">ctrl</p><!-- 注意需要【短横线命名】--><p><input type="text" v-on:keyup.caps-lock="fun3">CapsLock</p><p><input type="text" v-on:keyup.delete="fun4">delete</p></div><script type="text/javascript">new Vue({el: "#box",data: {},methods: {fun1(event) {console.log(event.keyCode, "---", event.key)},fun2() {console.log("您按下了ctrl!")},fun3() {console.log("您按下了CapsLock!")},fun4() {console.log("您按下了delete或backspace键!")}}})
</script></body></html>2.3.3 自定义按键修饰符注意事项
Vue自定义的按键修饰符修饰系统修饰键（用法特殊）时：（ctrl、alt、shift、meta），其中ctrl键除外；
- 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
- 配合keydown使用：正常触发事件。
另外，例如某些键监听不了；因此我们一般都使用Vue自身提供的按键修饰符或者采用keyCode/key来判断用户按下的键；
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="box"><p><input type="text" v-on:keyup="fun1"></p><p><input type="text" v-on:keyup.Control="fun2">ctrl</p> <p><input type="text" v-on:keyup.Alt="fun3">alt</p> <!-- 监听keyup时需要按其他键才能触发事件 --><p><input type="text" v-on:keyup.Shift="fun4">shift</p> <!-- 监听keyup时需要按其他键才能触发事件 --><p><input type="text" v-on:keyup.Meta="fun5">meta</p> <!-- 监听keyup时需要按其他键才能触发事件 --><p><input type="text" v-on:keydown.0="fun6">0</p> <!-- 只能监听数字0 --></div><script type="text/javascript">new Vue({el: "#box",data: {},methods: {fun1(event){console.log(event.keyCode,"---",event.key)},fun2(){console.log("您按下了ctrl!")},fun3(){console.log("您按下了alt!")},fun4(){console.log("您按下了shift!")},fun5(){console.log("您按下了windows!")},fun6(){console.log("您按下了数字0!")}}})</script></body></html>2.3.4 自定义别名
Vue支持根据keyCode来扩展自定义的按键，扩展的自定义按键解决了系统按键需要搭配其他键才能触发的问题（也有部分按键可能会有问题）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="box"><p><input type="text" v-on:keyup="fun1"></p><p><input type="text" v-on:keyup.huiche="fun2">回车</p> <p><input type="text" v-on:keyup.kongge="fun3">空格</p> <p><input type="text" v-on:keyup.windows="fun4">windows</p> </div><script type="text/javascript">Vue.config.keyCodes.huiche = 13 Vue.config.keyCodes.kongge = 32 Vue.config.keyCodes.windows = 91 new Vue({el: "#box",data: {},methods: {fun1(event){console.log(event.keyCode,"---",event.key)},fun2(){console.log("您按下了回车")},fun3(){console.log("您按下了空格!")},fun4(){console.log("您按下了windows!")}}})</script></body></html>2.4 事件修饰符
Vue中提供了简化了很多JS中的事件修饰符，Vue中的事件修饰符如下：
| 事件 | 说明 |
|---|---|
| prevent | 阻止默认事件； |
| stop | 阻止事件冒泡； |
| capture | 使用事件的捕获模式； |
| once | 事件只触发一次； |
| self | 只有event.target是当前操作的元素时才触发事件； |
| passive | 事件的默认行为立即执行，无需等待事件回调执行完毕； |
| left (2.2.0) | 只当点击鼠标左键时触发。 |
| right(2.2.0) | 只当点击鼠标右键时触发。 |
| middle(2.2.0) | 只当点击鼠标中键时触发。 |
（1）阻止默认事件。
<body>
<div id="box"><!--a标签的默认事件被阻止了,所以不会进行链接跳转--><h3>阻止默认事件</h3><p><a href="http://www.baidu.com" v-on:click.prevent="fun1">百度一下</a></p></div><script type="text/javascript">new Vue({el: "#box",data: {},methods: {fun1() {alert("Hello Baidu")}}})
</script></body>（2）阻止冒泡事件。
<body>
<div id="box"><!-- 先点击到blue,然后向上传递给上层的空间(red)--><h3>未阻止冒泡事件</h3><div v-on:click="fun1" style="width: 150px;height: 150px;background-color: red;"><div v-on:click="fun2" style="width: 100px;height: 100px;background-color: blue;"></div></div><!--只有blue被触发时间了,不会向上传递事件,red不会触发点击事件--><h3>阻止冒泡事件</h3><div v-on:click="fun1" style="width: 150px;height: 150px;background-color: red;"><div v-on:click.stop="fun2" style="width: 100px;height: 100px;background-color: blue;"></div></div></div><script type="text/javascript">new Vue({el: "#box",data: {},methods: {fun1() {console.log("red")},fun2() {console.log("blue")}}})
</script></body>（3）事件捕捉。
<body>
<div id="box"><!--先blue(先捕捉到)，再red--><h3>未进行事件捕捉</h3><div v-on:click="fun1" style="width: 150px;height: 150px;background-color: red;"><div v-on:click="fun2" style="width: 100px;height: 100px;background-color: blue;"></div></div><!--先bred(先捕捉到)，再blue--><h3>进行了事件捕捉</h3><div v-on:click.capture="fun1" style="width: 150px;height: 150px;background-color: red;"><div v-on:click="fun2" style="width: 100px;height: 100px;background-color: blue;"></div></div></div><script type="text/javascript">new Vue({el: "#box",data: {},methods: {fun1() {console.log("red")},fun2() {console.log("blue")}}})
</script></body>（4）self修饰符。
<body>
<div id="box"><!-- 默认情况下,点击了blue事件会进行冒泡传递给red,但是用户并非实际点击red,而是冒泡传递过去的 --><h5>没有使用self修饰符</h5><div v-on:click="fun1" style="width: 150px;height: 150px;background-color: red;"><div v-on:click="fun2" style="width: 100px;height: 100px;background-color: blue;"></div></div><h5>使用了self修饰符</h5><!-- 只有真正的点击自己时才触发事件,不接收冒泡传递过来的事件 --><div v-on:click.self="fun1" style="width: 150px;height: 150px;background-color: red;"><div v-on:click="fun2" style="width: 100px;height: 100px;background-color: blue;"></div></div></div><script type="text/javascript">new Vue({el: "#box",data: {},methods: {fun1(event) {console.log(event.target)},fun2(event) {console.log(event.target)}}})
</script></body>（6）左、右、中键点击事件。
<body>
<div id="box"><h3>单击事件</h3><button v-on:click.left="fun1">单击左键</button><button v-on:click.right="fun2">单击右键</button><button v-on:click.middle="fun3">单击中键</button></div><script type="text/javascript">new Vue({el: "#box",data: {},methods: {fun1() {console.log("您点击了左键")},fun2(event) {console.log("您点击了右键")event.preventDefault() //阻止默认事件(浏览器右键菜单)},fun3() {console.log("您点击了中键")}}})
</script></body><!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script><style>li {height: 100px;}</style></head><body style="height: 1000px;">
<div id="box"><h3>阻止默认事件</h3><p><a href="http://www.baidu.com" v-on:click.prevent="fun1">百度一下</a></p><h3>阻止事件冒泡</h3><div v-on:click="fun2" style="width: 150px;height: 150px;background-color: red;"><div v-on:click.stop="fun3" style="width: 100px;height: 100px;background-color: blue;"></div></div><h3>只触发一次事件</h3><p><button v-on:click.once="fun4">我是按钮</button></p><h5>事件捕获</h5><!-- 默认情况下,先进行事件冒泡,再进行事件捕获capture: 先进行事件捕获,在进行事件冒泡--><div v-on:click.capture="fun5('red')" style="width: 150px;height: 150px;background-color: red;"><div v-on:click="fun6('blue')" style="width: 100px;height: 100px;background-color: blue;"></div></div><h5>self修饰符</h5><!-- 只有真正的点击自己时才触发事件(冒泡不能触发事件) --><div v-on:click.self="fun7" style="width: 150px;height: 150px;background-color: red;"><div v-on:click="fun8" style="width: 100px;height: 100px;background-color: blue;"></div></div><h5>passvie</h5><!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； --><ul v-on:wheel.passvie="fun9" style="width: 200px;height: 200px;background-color: red;overflow: scroll;"><li>1</li><li>2</li><li>3</li><li>4</li></ul><h5>.left</h5><button v-on:click.left="fun10">left</button></div><script type="text/javascript">new Vue({el: "#box",data: {},methods: {fun1() {alert("Hello Baidu")},fun2() {alert("点击了大的div")},fun3() {alert("点击了小的div")},fun4() {console.log("按钮点击了")},fun5(color) {console.log(color)},fun6(color) {console.log(color)},fun7(event) {console.log(event.target)},fun8(event) {console.log(event.target)},fun9() {for (let i = 0; i < 100000; i++) {console.log('aaa')}},fun10() {console.log("left")}}})
</script></body></html>