这篇文章主要为大家详细介绍了Vue事件的基本操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
1. 事件的基本操作
1.1 v-on
功能：绑定指定事件名的回调函数
标准写法： v-on:click='xxx' v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx' 简便写法： @click='xxx' @keyup='xxx' @keyup.enter='xxx'
1.1.1 v-on的小案例
欢迎来到{{name}}学习
1.2 事件修饰符
Vue中的事件修饰符有6个 - prevent : 阻止默认行为 - stop : 禁止冒泡 - once : 事件只触发一次 - capture : 使用事件捕获模式 - self : 只有even.target所指向的操作元素才能触发事件 - passive : 让事件的默认行为立即执行
1.2.1 事件修饰符代码解析
html代码
js代码
1.3 键盘事件
常用的按键别名： 1.正常使用 例如： @keyup.enter = "xxx" - 回车 enter - 删除 delete - 退出 esc - 空格 space - 上 up - 下 down - 左 left - 右 right 2. 特别的按键 系统修饰键 : - ctrl,shift,alt,meta(就是window键) - 换行 tab(必须配合keydown去使用) - 配合keyup使用，当按下修饰键的时候在按下其他的键，然后在松开其他键事件才可以被触发 - 配合keydown使用，就直接触发事件 3.如果想要绑定其他按键，可以使用按键原始本身的key值（名字）去绑定 4.可以自定义去设置按键别名，Vue.config.keyCodes.自定义键名 = 键值
具体案例
欢迎学习{{name}}
1.4 计算属性（computed）
1.在页面中的使用方法：=={{方法名}}==来显示计算结果
2.定义：要使用的属性/变量不存在，需要通过已有的属性计算出来的
3.原理：底层是借助了Object.defineProperty方法所提供的getter和setter
4.get函数执行的时机：
（1）初次读取的时候会执行一次
（2）当所依赖的数据发生改变时就会再次被调用
5.相比于methods的优势，内部是有缓存机制（复用），效率会更高，调试会更方便
6.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
7.需要注意的一个特殊点：以下面例子举例：get函数中return返回值的会作为fullname的值进行返回，在控制台可以看到是这样的形式呈现fullname：xxx。
8.computed中的this指向是vm
9.简写形式: 基本要求就是在不使用set的情况下才可以简写 注意在调用的时候不要写成fullname()
姓:
名:全名:{{fullname}}
1.5 监视属性（watch）
1.当所监视的属性发生变化时，回调函数自动调用，进行相关的操作
2.监视属性必须要存在，才能进行监视
3.监视属性的两种写法：
（1）在new Vue中配置watch
（2）通过vm.$watch进行监视
4.watch里handler函数this的指向是vm
今天天气真{{weather}}
a的值是: {{a}}
总结
以上就是今天要讲的内容，本文仅仅介绍了Vue一些基本事件的操作，希望对大家有帮助！
以上就是Vue事件的基本操作你知道吗的详细内容，更多请关注0133技术站其它相关文章！
