事件修饰符
使用v-on, 表示即将发生的事件, 例如点击事件click, 下面是一个例子:
<div id="app"> <h5 v-on:click="showInfo">点击我</h5> <a href="https://www.baidu.com" v-on:click="showInfo">点我</a> </div>
v-on 可以简写为: @
<div id="app"> <h5 @click="showInfo">点击我</h5> <a href="https://www.baidu.com" @click="showInfo">点我</a> </div>
阻止默认事件
点击a标签, 会执行click中的showInfo方法, 随后还会执行a中的默认跳转行为, 如果不想这类行为事件发生, 可以使用事件修饰符prevent来阻止进行:
<a href="https://www.baidu.com" @click.prevent="showInfo">点我</a>
当然可以在Vue实例中定义方法的时候, 传入event, 然后调用event的preventDefault方法:
new Vue({ el : '#app', data : { name : '王者荣耀' }, methods : { showInfo(e) { e.preventDefault() alert('你好') } } })
阻止冒泡
既然是点击, 那么如果一个区域里面存在两个点击事件. 例如:
<body> <div id="app"> <div @click="testDiv" id="out"> <a href="https://www.baidu.com" @click.prevent="showInfo">点我</a> </div> </div> <style> #out { width: 200px; height: 200px; border: solid blue 1px; } </style> </body> <script> new Vue({ el : '#app', data : { name : '王者荣耀' }, methods : { showInfo(e) { e.preventDefault() alert('你好') }, testDiv() { alert('这是最外层的div') } } }) </script>
点击a标签那么就会出现:
首先出现: 
然后出现: 
发现, 本来我的本意只想点击这个a标签, 但是因为层叠关系(冒泡), 就导致点击了a的同时, 也点击了div标签, 所以为了阻止这种情况, 使用event方法: event.stopPropagation() >>>
new Vue({ el : '#app', data : { name : '王者荣耀' }, methods : { showInfo(e) { e.preventDefault() e.stopPropagation(); alert('你好') }, testDiv(e) { alert('这是最外层的div') } } })
简写, 在事件后面添加事件修饰符stop, 例如:
<a href="https://www.baidu.com" @click.prevent.stop="showInfo">点我</a>
允许触发一次
使用修饰符once :
<a href="https://www.baidu.com" @click.once="showInfo">点我</a>
事件只触发一次
捕获模式
事件执行, 先开始捕获, 由外到内, 捕获完之后开始执行, 从内到外执行, 也就是冒泡, 现在更改为捕获状态就执行, 也就是添加.capture, 例如@click.capture = "xxx"
self
@click.self, 只有在event.target 是本身的时候, 才会触发点击事件
passive
事件立即执行, 无序等待前置条件: .passive
键盘事件
keyup & keydown
- @keyup
- @keydown
这里使用keyup作为案例:
<body> <div id="app"> <p>欢迎来到{{name}}</p> <input type="text" placeholder="按下回车提示输入" @keyup="showInfo"> </div> </body> <script> new Vue({ el :'#app', data : { name : 'world' }, methods : { showInfo(e) { console.log(e.target.value); } } }) </script>
按下a建., 输入一个a, 这个时候控制台还没有输入, 但是松开a键之后, 控制台输出:
再按下一个a, 松开之后, 控制台输出 两个a :
keydown的用法类似, 这里不一一列举
相同的keyup和keydown都有事件修饰符:
- enter, 键盘输入之后并不会触发事件, 只有在键入的值是enter(回车)的时候, 才会触发事件, 例如:
<div id="app"> <p>欢迎来到{{name}}</p> <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"> </div> new Vue({ el :'#app', data : { name : 'world' }, methods : { showInfo(e) { console.log(e.target.value); } } })
- 输入一个a并不会触发事件showInfo, 但是在输入a后,再按一个回车, 控制台就输出了一个a :
按键别名
- 相同的还有很多其他的键盘事件修饰符, 这些别的修饰符是我们vue中常用的按键的别名:
- 回车 : enter
- 删除 : delete
- 空格 : space
- 退出 : esc
- 换行 : tab
- 上 : up
- 下 : down
- 左 : left
- 右 : right
vue暂时没有提供别的按键别名, 可以使用按键原始的key进行绑定
系统按键修饰符:
- ctrl
- alt
- shift
- meta (win)
系统修饰键配合keyup使用, 按下修饰键的同时, 再按下其他键, 随后释放其他键, 事件才被触发 : 解释 >> 因为同时按下之后, keyup是属于松开才触发事件, 但是现在除了ctrl等键之外, 其他的一些按键同样被按下了, 那么他们之间就有一个释放的顺序, 所以现在只有其他键先释放, 这个keyup状态才结束, 事件执行
配合keydown使用, 直接按下之后就可以正常触发事件
注意tab
有下面的例子:
<body> <div id="app"> <p>欢迎来到{{name}}</p> <input type="text" placeholder="按下回车提示输入" @keyup.tab="showInfo"> </div> </body> <script> new Vue({ el :'#app', data : { name : 'world' }, methods : { showInfo(e) { console.log(e.target.value); } } }) </script>
这是一个使用键盘事件, 并且使用tab修饰这个键盘事件 :
我们输入aaa, 然后按下tab:
发现这个玩意没有输出到控制台:
多按几次就会发现, 他并不是没有作用, 反而像是被什么锁定了一样, 不能在input中输入, :
多按下几次就会发现, 他会在浏览器上切换焦点
这个焦点被切走了. 那为什么没有触发事件??
分析: 细心的你一定会发现, 这个tab是按下立即就生效的, 但是我们定义的键盘事件是keyup, 按下tab之后, 焦点立即调走, 还没来得及松开焦点就已经从输入框中切走, 那么vm也就无法捕捉到这个键入tab的行为, 更加捕获不到tab松开.
改进 : 所以这个时候, 我们就可以使用keydown事件
注意系统按键
同按键别名中的说明, 如果直接使用@keyup.ctrl .....
比如同时按下ctrl + y, 然后松开y之后, 触发事件
还有一个需要注意的是, 你可以指定松开哪一个键执行事件:
@keyup.ctrl.y, 这个时候, 只有同时按下ctrl + y, 然后松开y才有用, 按下ctrl + z或者是其他的除y之外的按键都是没有用的.
自定义按键
Vue.config.keyCodes.huiche = 13; <input type="text" placeholder="按下回车提示输入" @keyup.huihce="showInfo">
鼠标事件
简介
除了键盘事件, 那么肯定有鼠标事件的啦, 看看下面这几个鼠标事件的例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <div id="testDiv" @click="testClick" @dblclick="testDBClick" @mouseenter="testMouseEnter" @mouseleave="testMouseLeave" @mousedown="testMouseDown" @mouseup="testMouseUp" @mousemove="testMouseMove" > {{content}} </div> <br> <hr> </div> </body> <script> var vue = new Vue({ el : '#app', data : { content: '', value : null }, methods : { testClick() { // 单机 this.content = '鼠标单击'; }, testDBClick() { // 鼠标双击 this.content = '鼠标双击'; }, testMouseEnter() { // 鼠标进入事件 this.content = '鼠标进入'; }, testMouseLeave() { // 鼠标离开事件 this.content = '鼠标离开'; }, testMouseDown() { // 鼠标按下事件 this.content = '鼠标按下'; }, testMouseUp() { this.content = '鼠标弹起'; }, testMouseMove(event) { // 任何事件都可以添加事件event对象 this.content = event.offsetX + '---' + event.offsetY; // 只要是@的事件都可以使用event }, testFocus() { this.value ='获得焦点' } , testBlur() { this.value = '失去焦点' } } }); </script> <style> #testDiv { width: 150px; height: 150px; border: 2px solid green; text-align: center; line-height: 100%; } </style> </html>
单击
双击
离开div
这里不一一展示
总结鼠标点击事件 :
| 鼠标事件 | 所表示触发的前置条件 |
| @click | 鼠标单机触发 |
| @dblclick | 鼠标双击 |
| @mouseenter | 鼠标进入 |
| @mouseleave | 鼠标离开 |
| @mousedown | 鼠标按下 |
| @mouseup | 鼠标弹起 |
| @mousemove | 鼠标移动 |
鼠标焦点事件
- @focus : 鼠标聚焦目标以触发事件
- @blur : 鼠标聚焦跳出目标, 触发事件
案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> <input type="text" @focus="testFocus" @blur="testBlur" v-model="value"> </div> </body> <script> var vue = new Vue({ el : '#app', data : { content: '', value : null }, methods : { testFocus() { this.value ='获得焦点' } , testBlur() { this.value = '失去焦点' } } }); </script> </html>
首先不进行任何操作:
点击这个输入框, 触发聚焦事件 :
鼠标点击输入框之外的内容:
单词解释:
blur也就是鼠标模糊不清, 也就是失去焦点.
计算属性
差值语法实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> 姓 : <input type="text" v-model="firstName"><br> 名 : <input type="text" v-model="lastName"> <br> 姓名 : <span>{{firstName}}{{lastName}}</span> </div> </body> <script> new Vue({ el :'#root', data : { firstName : '张', lastName : '三' } }) </script> </html>
methods实现
{{}}的里面写的是差值表达式, 所以这里直接使用方法名 + ()的形式, 表示调用这个函数的返回值
<body> <div id="root"> 姓 : <input type="text" v-model="firstName"><br> 名 : <input type="text" v-model="lastName"> <br> 姓名 : <span>{{fullName()}}</span> </div> </body> <script> new Vue({ el: '#root', data: { firstName: '张', lastName: '三' },methods :{ fullName() { return '博子妹妹'; } } }) </script>
这里将'博子妹妹' 修改为 this.firstName + '-' + lastName的形式, 即可联动显示, 因为是双向绑定, 修改 姓 之后, 就会修改data中的值, 然后vm捕捉到这个修改, 然后用到这个name的地方就会更新 . 以后任何修改data的数据操作之后, vm都会重新解析一次.
computed实现
get()
不用方法, 也不使用插值语法来表示, 那么就使用vm实例中的computed字段来实现,
computed, 本就有计算的意思:
在computed的字段中定义fullName, 然后使用这个fullName去计算出 全名, 使用的时候, 可以像data中的数据那样去访问这个fullName, 例如: {{fullName}}, 访问这个fullName, vm会调用computed中的fullName的get()方法, 然后将其返回值最为fullName的值.
new Vue({ el: '#root', data: { firstName: '张', lastName: '三' }, computed : { fullName : { // 这个fullName依然在vm身上 // get() : 当有人读取fullName的时候, 就会调用get方法, 返回值就会被当做fullName的值 get() { return this.firstName + this.lastName; } } } })
但是这个get方法中不能直接 return firstName + lastName,因为他访问不到data中的数据,但是可以通过vm实例对象来访问.
<body> <div id="root"> 姓 : <input type="text" v-model="firstName"><br> 名 : <input type="text" v-model="lastName"> <br> 姓名 : <span>{{fullName}}</span> </div> </body> <script> new Vue({ el: '#root', data: { firstName: '张', lastName: '三' }, computed : { fullName : { // 这个fullName依然在vm身上 // get() : 当有人读取fullName的时候, 就会调用get方法, 返回值就会被当做fullName的值 get() { return this.firstName + this.lastName; } } } }) </script>
思考> computed中的属性的get 会被调用??
解释: 初次读取computed中的属性的时候,对应的get方法会被调用, 由于调用之后, 其返回值被缓存, 下次读取就不会调用get方法, 其次就是所依赖的数据被修改的时候, 就上面例子而言, 如果输入框中的姓被修改的时候, get方法就会被重新调用.
fullName虽然是个对象, 但是不能直接使用: {{fullName.get()}}.
set()
有get, 那么必然有set() :
computed : { fullName : { // 这个fullName依然在vm身上 // get() : 当有人读取fullName的时候, 就会调用get方法, 返回值就会被当做fullName的值 get() { return this.firstName + this.lastName; }, set (value) { const arr = value.split('-'); this.firstName = arr[0]; this.lastName = arr[1]; } } }
我们讲到, 如果调用了set方法, 那么就会修改firstName和lastName属性, 那么vm就会捕获到这个修改, 从而重新更新使用到这两个属性的地方, 同时set方法也捕获到了这个修改, 然后将引用这个fullName的地方进行更新:
总结
计算属性:
1.定义:要用的属性不存在，要通过已有属性计算得来。
如果计算属性中存在在vm外部定义的变量, 那么确实是可以像已有的属性那样显示出来, 但是vm无法捕捉到这个外部定义的变量的变化.
2.原理: 底层借助了objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行?
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势:与methods实现相比，内部有缓存机制 (复用) ，效率更高，调试方便。
5.备注:
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化
计算属性简写
计算属性中的每一个属性都是当做对象处理: 
对象中的每个方法使用逗号分割, 但是实际上这个set方法一般都用不到, 所以直接将这个fullName定义为一个方法 :
const vm = new Vue({ el: '#root', data: { firstName: '张', lastName: '三' }, computed : { fullName : function(){ // 这个fullName依然在vm身上 return this.firstName + this.lastName; } } })
更甚将其改为:
fullName(){ // 这个fullName依然在vm身上 return this.firstName + this.lastName; }
注意这里简写的前置条件是, 我不会去调用set方法, 如果调用set方法:
[vue警告]：计算属性, “FulName”分配给了它，但它没有set方法.
