Shulou(Shulou.com)06/01 Report--

Editor to share with you what are the basic operations of Vue events, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. Basic operation of events 1.1 v-on

Function: bind the callback function that specifies the event name

Standard way to write: v-on:click='xxx'v-on:keyup='xxx (parameters)'v murondisplacement keyup.enterprisesxxx`: a small case of @ click='xxx'@keyup='xxx'@keyup.enter='xxx'1.1.1 v-on Welcome to {{name}} Learning Click me to learn (no parameters) Click me to learn Xi (pass parameters) / / add () if you need to pass parameters. The parameter / * event callback needs to be written in the methods object and will eventually be configured in the methods on vm. Do not use the function configured in the arrow function methods. This points to vm or component instantiation object * / Vue.config.productionTip = false var vm = new Vue ({el:'# root', data: {name: "Tsinghua University"} Methods: {btn1 () {alert ("Hello!") }, btn2 (x, y, event) {console.log (x, y); console.log (event.target.innerText); alert ("Hello!") }) 1.2There are 6 event modifiers in the event modifier Vue-prevent: block default behavior-stop: no bubbling-once: event is triggered only once-capture: use event capture mode-self: only fuck that even.target points to Make an element to trigger the event-passive: let the default behavior of the event be executed immediately. Click on me to enter bilibili. I can only trigger the event once. I can only trigger it once. Div2 Click I Click I enter 1.2.1 event modifier Code parsing

Html code

Click on me to enter bilibili click on me to trigger the event I can only trigger once oh div1 div2 click on me Click me to enter

Js code

Vue.config.productionTip = false new Vue ({el:'# root', data: {}, methods: {prevent () {alert ("disable default behavior") }, stop () {alert ("No bubbling")}, once () {alert ("trigger only once")} Capture (x) {alert ("now capture mode" + x)}, self () {alert ("self")}, passive () {for (let index = 0) Index

< 1000; index++) { console.log("1") } } } }) 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}} Vue.config.productionTip = false Vue.config.keyCodes.huiche = 13 //定义了一个别名 var vm = new Vue({ el: '#root', data: { name: "Vue" }, methods: { keyboard(event){ // console.log(event.keyCode); 按键编码 // console.log(event.key); 按键的名字 console.log(event.target.value); } } }) 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}} Vue.config.productionTip = false let vm = new Vue({ el: '#root', data: { //属性 firstname: "张", lastname: "三", }, // methods: // { // fullname() { // // 这里的this指向是vm // return this.firstname.slice(0,3) + "-" + this.lastname // } // } computed: { fullname: { /* 1. Vue已经进行配置过了将this指向vm 2. 当用人去读取fullname时，get就会被调用，但是get只被执行一次因为Vue做 了一个事，就是缓存，当执行过一次后，后面数据再去读取会走缓存这条路。 3. return 的返回值会作为fullname的值，将fullname也抛到vm （fullname:"张-三"） */ get() { return this.firstname + "-" + this.lastname }, set(value) { // 当fullname被修改时，set才会被调用 var arr = value.split("-") //按照指定字符串进行拆分成数组 this.firstname = arr[0] this.lastname = arr[1] } /* 简写形式: 基本要求就是在不使用set的情况下才可以简写 注意在调用的时候不要写成fullname(),这个很特殊 computed:{ fullname(){ //相当于fullname：function(){} return this.firstname + "-" + this.lastname } } */ } } }) 1.5 监视属性（watch） 1.当所监视的属性发生变化时，回调函数自动调用，进行相关的操作 2.监视属性必须要存在，才能进行监视 3.监视属性的两种写法： （1）在new Vue中配置watch （2）通过vm.$watch进行监视 4.watch里handler函数this的指向是vm 今天天气真{{weather}} 切换天气 a的值是: {{a}} 点击我让a+1 Vue.config.productionTip = false let vm = new Vue({ el: '#root', data: { flag: true }, computed: { weather() { return this.flag ? "凉快" : "炎热" } }, methods: { change() { return this.flag = !this.flag } }, watch:{ flag:{ // 第一个参数表示：修改后的值，第二个参数表示修改前的值 handler(newValue,oldValue){ console.log("flag被修改了"); }, immediate:true, //在一上来就执行一次 deep:true //表示深层次监视 } } }) vm.$watch("weather",{ immediate:true, handler(newValue,oldValue){ console.log("weather被修改了") } })1.5.1 watch和computed的区别 watch和computed的区别是： 1.watch能够完成的功能，computed不一定可以完成，但是computed可以完成的，watch也可以完成 2.computed是依靠return的返回值（getter），所以它不能够完成异步的任务,而watch可以 3.watch是靠我们自己写代码进行修改 4.在学Vue当中有两个很重要的原则： 所有被Vue管理的函数，最好写成普通的函数，因为这样this的指向才是vue或者组件的实例化对象 所有不被Vue管理的函数，最好写成箭头函数（Ajax的回调函数，定时器的回调函数，Promise的回调函数），因为这样this的指向才是vue或者组件的实例化对象 姓: 名: 全名: {{fullname}} // 需求：想要1s过后在显示全名 Vue.config.productionTip = false let vm = new Vue({ el: '#root', data: { firstname: "张", lastname: "三", fullname: "张 - 三" }, watch: { firstname: { handler(newval) { console.log(this); //vm /* 这里使用箭头函数的目的就是为了让this指向vue 此时没有this所以他就向外面找，外面handler的this 指向是vm所以定时器的this指向也是vm */ setTimeout(() =>

{/ / if you use the ordinary function this, point to window console.log (this); / / vm this.fullname = newval + "-" + this.lastname}, 1000) }, lastname: {handler (newval) {setTimeout () = > {this.fullname = this.firstname + "-" + newval}, 1000) }) these are all the contents of the article "what are the basic operations of Vue events". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.