Vue事件的基本操作
Tree_wws 人气:01. 事件的基本操作
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的小案例
<div id="root"> <!-- 需求当点击按钮时弹出同学你好! --> <h1>欢迎来到{{name}}学习</h1> <!-- v-on:xxx可以简写为: @xxx --> <button v-on:click="btn1">点击我进行学习(不传参)</button> <button @click="btn2('hello!','同学',$event)">点击我进行学习(传参) //如果需要传参数的话就在后面加(),里面写的就参数 </div> <script> /* 事件回调需要写在methods对象中,最终会在vm上 methods中配置的函数,不要使用箭头函数 methods中配置的函数,this指向vm或者是组件实例化对象 */ Vue.config.productionTip = false var vm = new Vue({ el: '#root', data: { name: "清华大学" }, methods: { btn1() { alert("同学你好!") }, btn2(x, y, event) { console.log(x, y); console.log(event.target.innerText); alert("同学你好!") } } }) </script>
1.2 事件修饰符
Vue中的事件修饰符有6个 - prevent : 阻止默认行为 - stop : 禁止冒泡 - once : 事件只触发一次 - capture : 使用事件捕获模式 - self : 只有even.target所指向的操作元素才能触发事件 - passive : 让事件的默认行为立即执行<body> <div id="root"> <!-- 1. prevent : 阻止默认行为 --> <a href="https://www.bilibili.com/" @click.prevent = "prevent">点击我进入b站</a> <hr> <!-- 2. stop : 禁止冒泡 --> <div @click = "stop" class="div1"> <button @click.stop = "stop">点击我触发事件</button> </div> <hr> <!-- 3. once : 事件只触发一次 --> <button @click.once = "once">我只能触发一次哦</button> <hr> <!-- 4. capture : 使用事件捕获模式 --> <div class="box1" @click.capture = "capture(1)"> div1 <div class="box2" @click = "capture(2)"> div2 </div> </div> <hr> <!-- 5. self : 只有even.target所指向的操作元素才能触发事件 相当于要满足两个条件 - 1. event.target必须指向self所修饰的元素 - 2. 触发的也必须是这个元素 从某种意义上相当于禁止了冒泡,因为冒泡虽然触发上面事件 但是event.target所指向的并非是这个元素 --> <div class="box3" @click.self = "self"> <button @click = "self">点击我</button> </div> <hr> <!-- 6. passive : 让事件的默认行为立即执行 scroll:表示的是滚动条进行滚动,滚动条改变就触发,并且滑到底就不能继续触发 wheel :表示的是鼠标滚轮滚动,滚动一次就触发一次,滑到底依旧可以触发 --> <ul style="overflow: auto; height: 100px;" @scroll.passive = "passive"> <li style="height: 600px;"></li> </ul> <!-- 7. 如果想要使用多个修饰符可以使用链式形式 --> <!-- 需要即想要阻止冒泡,也想要禁止默认行为 --> <div @click = "stop" class="div1"> <a @click.stop.prevent = "stop" href="https://www.baidu.com">点击我进入</a> </div> </div>
1.2.1 事件修饰符代码解析
html代码
<body> <div id="root"> <!-- 1. prevent : 阻止默认行为 --> <a href="https://www.bilibili.com/" @click.prevent = "prevent">点击我进入b站</a> <hr> <!-- 2. stop : 禁止冒泡 --> <div @click = "stop" class="div1"> <button @click.stop = "stop">点击我触发事件</button> </div> <hr> <!-- 3. once : 事件只触发一次 --> <button @click.once = "once">我只能触发一次哦</button> <hr> <!-- 4. capture : 使用事件捕获模式 --> <div class="box1" @click.capture = "capture(1)"> div1 <div class="box2" @click = "capture(2)"> div2 </div> </div> <hr> <!-- 5. self : 只有even.target所指向的操作元素才能触发事件 相当于要满足两个条件 - 1. event.target必须指向self所修饰的元素 - 2. 触发的也必须是这个元素 从某种意义上相当于禁止了冒泡,因为冒泡虽然触发上面事件 但是event.target所指向的并非是这个元素 --> <div class="box3" @click.self = "self"> <button @click = "self">点击我</button> </div> <hr> <!-- 6. passive : 让事件的默认行为立即执行 scroll:表示的是滚动条进行滚动,滚动条改变就触发,并且滑到底就不能继续触发 wheel :表示的是鼠标滚轮滚动,滚动一次就触发一次,滑到底依旧可以触发 --> <ul style="overflow: auto; height: 100px;" @scroll.passive = "passive"> <li style="height: 600px;"></li> </ul> <!-- 7. 如果想要使用多个修饰符可以使用链式形式 --> <!-- 需要即想要阻止冒泡,也想要禁止默认行为 --> <div @click = "stop" class="div1"> <a @click.stop.prevent = "stop" href="https://www.baidu.com">点击我进入</a> </div> </div>
js代码
<script> Vue.config.productionTip = false new Vue({ el: '#root', data: { }, methods:{ prevent(){ alert("禁止默认行为"); }, stop(){ alert("禁止冒泡") }, once(){ alert("只能触发一次") }, capture(x){ alert("现在是捕获模式 "+x) }, self() { alert("self") }, passive(){ for (let index = 0; index < 1000; index++) { console.log("1") } } } }) </script> </body>
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.自定义键名 = 键值
具体案例
<div id="root"> <h1>欢迎学习{{name}}</h1> <input type="text" @keyup="keyboard"> <br><br> <input type="text" @keyup.huiche="keyboard"> <br><br> <input type="text" @keyup.ctrl.y="keyboard"> </div> <script> 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); } } }) </script>
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()
<div id="root"> 姓: <input type="text" v-model="firstname"> <br><br> 名: <input type="text" v-model="lastname"> <!-- 第一种写法 使用插值语法 --> <!-- <h3>全名: {{firstname.slice(0,3)}} - {{lastname}}</h3> --> <!-- 第二种写法 使用methods --> <!-- <h3>全名: {{fullname()}}</h3> --> <!-- 第三种写法 使用computed(计算属性) --> <h3>全名:{{fullname}}</h3> </div> <script> 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 } } */ } } }) </script>
1.5 监视属性(watch)
1.当所监视的属性发生变化时,回调函数自动调用,进行相关的操作
2.监视属性必须要存在,才能进行监视
3.监视属性的两种写法:
(1)在new Vue中配置watch
(2)通过vm.$watch进行监视
4.watch里handler函数this的指向是vm
<div id="root"> <h1>今天天气真{{weather}}</h1> <button @click="change">切换天气</button> <h3>a的值是: {{a}}</h3> <!-- 在这里面可以写简单的代码 --> <button @click = "a++">点击我让a+1</button> </div> <script> 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或者组件的实例化对象
<div id="root"> <!-- 用watch写一遍姓名的案例 --> 姓: <input type="text" v-model="firstname"> <br><br> 名: <input type="text" v-model="lastname"> <h2>全名: {{fullname}}</h2> </div> <script > // 需求:想要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(() => { //这里如果使用普通函数this就指向window console.log(this); //vm this.fullname = newval + " - " + this.lastname }, 1000); } }, lastname: { handler(newval) { setTimeout(() => { this.fullname = this.firstname + " - " + newval }, 1000); } } } }) </script>
总结
以上就是今天要讲的内容,本文仅仅介绍了Vue一些基本事件的操作,希望对大家有帮助!
加载全部内容