您好,登錄后才能下訂單哦!
小編給大家分享一下Vue事件的基本操作有哪些,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
功能:綁定指定事件名的回調函數
標準寫法: v-on:click='xxx' v-on:keyup='xxx(參數)' v-on:keyup.enter='xxx' 簡便寫法: @click='xxx' @keyup='xxx' @keyup.enter='xxx'
<div id="root"> <!-- 需求當點擊按鈕時彈出同學你好! --> <h2>歡迎來到{{name}}學習</h2> <!-- 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>
Vue中的事件修飾符有6個 - prevent : 阻止默認行為 - stop : 禁止冒泡 - once : 事件只觸發(fā)一次 - capture : 使用事件捕獲模式 - self : 只有even.target所指向的操作元素才能觸發(fā)事件 - passive : 讓事件的默認行為立即執(zhí)行<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">點擊我觸發(fā)事件</button> </div> <hr> <!-- 3. once : 事件只觸發(fā)一次 --> <button @click.once = "once">我只能觸發(fā)一次哦</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所指向的操作元素才能觸發(fā)事件 相當于要滿足兩個條件 - 1. event.target必須指向self所修飾的元素 - 2. 觸發(fā)的也必須是這個元素 從某種意義上相當于禁止了冒泡,因為冒泡雖然觸發(fā)上面事件 但是event.target所指向的并非是這個元素 --> <div class="box3" @click.self = "self"> <button @click = "self">點擊我</button> </div> <hr> <!-- 6. passive : 讓事件的默認行為立即執(zhí)行 scroll:表示的是滾動條進行滾動,滾動條改變就觸發(fā),并且滑到底就不能繼續(xù)觸發(fā) wheel :表示的是鼠標滾輪滾動,滾動一次就觸發(fā)一次,滑到底依舊可以觸發(fā) --> <ul @scroll.passive = "passive"> <li ></li> </ul> <!-- 7. 如果想要使用多個修飾符可以使用鏈式形式 --> <!-- 需要即想要阻止冒泡,也想要禁止默認行為 --> <div @click = "stop" class="div1"> <a @click.stop.prevent = "stop" href="https://www.baidu.com">點擊我進入</a> </div> </div>
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">點擊我觸發(fā)事件</button> </div> <hr> <!-- 3. once : 事件只觸發(fā)一次 --> <button @click.once = "once">我只能觸發(fā)一次哦</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所指向的操作元素才能觸發(fā)事件 相當于要滿足兩個條件 - 1. event.target必須指向self所修飾的元素 - 2. 觸發(fā)的也必須是這個元素 從某種意義上相當于禁止了冒泡,因為冒泡雖然觸發(fā)上面事件 但是event.target所指向的并非是這個元素 --> <div class="box3" @click.self = "self"> <button @click = "self">點擊我</button> </div> <hr> <!-- 6. passive : 讓事件的默認行為立即執(zhí)行 scroll:表示的是滾動條進行滾動,滾動條改變就觸發(fā),并且滑到底就不能繼續(xù)觸發(fā) wheel :表示的是鼠標滾輪滾動,滾動一次就觸發(fā)一次,滑到底依舊可以觸發(fā) --> <ul @scroll.passive = "passive"> <li ></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("只能觸發(fā)一次") }, capture(x){ alert("現在是捕獲模式 "+x) }, self() { alert("self") }, passive(){ for (let index = 0; index < 1000; index++) { console.log("1") } } } }) </script> </body>
常用的按鍵別名: 1.正常使用 例如: @keyup.enter = "xxx" - 回車 enter - 刪除 delete - 退出 esc - 空格 space - 上 up - 下 down - 左 left - 右 right 2. 特別的按鍵 系統修飾鍵 : - ctrl,shift,alt,meta(就是window鍵) - 換行 tab(必須配合keydown去使用) - 配合keyup使用,當按下修飾鍵的時候在按下其他的鍵,然后在松開其他鍵事件才可以被觸發(fā) - 配合keydown使用,就直接觸發(fā)事件 3.如果想要綁定其他按鍵,可以使用按鍵原始本身的key值(名字)去綁定 4.可以自定義去設置按鍵別名,Vue.config.keyCodes.自定義鍵名 = 鍵值
具體案例
<div id="root"> <h2>歡迎學習{{name}}</h2> <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.在頁面中的使用方法:=={{方法名}}==來顯示計算結果
2.定義:要使用的屬性/變量不存在,需要通過已有的屬性計算出來的
3.原理:底層是借助了Object.defineProperty方法所提供的getter和setter
4.get函數執(zhí)行的時機:
(1)初次讀取的時候會執(zhí)行一次
(2)當所依賴的數據發(fā)生改變時就會再次被調用
5.相比于methods的優(yōu)勢,內部是有緩存機制(復用),效率會更高,調試會更方便
6.如果計算屬性要被修改,那必須寫set函數去響應修改,且set中要引起計算時依賴的數據發(fā)生改變
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"> <!-- 第一種寫法 使用插值語法 --> <!-- <h4>全名: {{firstname.slice(0,3)}} - {{lastname}}</h4> --> <!-- 第二種寫法 使用methods --> <!-- <h4>全名: {{fullname()}}</h4> --> <!-- 第三種寫法 使用computed(計算屬性) --> <h4>全名:{{fullname}}</h4> </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只被執(zhí)行一次因為Vue做 了一個事,就是緩存,當執(zhí)行過一次后,后面數據再去讀取會走緩存這條路。 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.當所監(jiān)視的屬性發(fā)生變化時,回調函數自動調用,進行相關的操作
2.監(jiān)視屬性必須要存在,才能進行監(jiān)視
3.監(jiān)視屬性的兩種寫法:
(1)在new Vue中配置watch
(2)通過vm.$watch進行監(jiān)視
4.watch里handler函數this的指向是vm
<div id="root"> <h2>今天天氣真{{weather}}</h2> <button @click="change">切換天氣</button> <h4>a的值是: {{a}}</h4> <!-- 在這里面可以寫簡單的代碼 --> <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, //在一上來就執(zhí)行一次 deep:true //表示深層次監(jiān)視 } } }) vm.$watch("weather",{ immediate:true, handler(newValue,oldValue){ console.log("weather被修改了") } })
watch和computed的區(qū)別是:
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"> <h3>全名: {{fullname}}</h3> </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事件的基本操作有哪些”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。