vue各種事件監(jiān)聽實(shí)例(小結(jié))
計(jì)算屬性的Get方法和Set方法
看代碼說話:
<!doctype html><html><head><meta charset='utf-8'><title>vue小練習(xí)</title></head><body> <div id='calc'> <a v-cloak=''>{{name}}</a> </div></body></html><script src='http://www.gepszalag.com/bcjs/js/vue.js'></script><script> let app = new Vue({ el: ’#calc’ ,data: { counter:0 } ,methods:{ } ,computed: { name: {get: function(){ console.log('得值'); return ’AAAa’;},set: function(){ console.log('設(shè)值'); } } } })</script>
運(yùn)行后如下:
可以知道，在計(jì)算屬性對(duì)象中，里面定義一個(gè)name，通過定義name的set和get方法來對(duì)其值進(jìn)行設(shè)置和獲取，name獲得get函數(shù)return的值，name通過set函數(shù)進(jìn)行設(shè)置其值，或者說改變他的值。從運(yùn)行圖可以看到，當(dāng)頁面加載的時(shí)候，當(dāng)我用到name的變量的時(shí)候，他會(huì)默認(rèn)執(zhí)行g(shù)et方法，當(dāng)我在控制臺(tái)中改變其值，他會(huì)默認(rèn)執(zhí)行set方法。
methods中函數(shù)執(zhí)行和computer計(jì)算的對(duì)比
這兩個(gè)方式都可以對(duì)值進(jìn)行拼接或者進(jìn)行復(fù)雜操作。那么哪個(gè)方法性能比較好呢？答案是computed,原因在于computed內(nèi)部有緩存。看代碼如下來計(jì)算分別調(diào)用了函數(shù)多少次:
<!doctype html><html><head><meta charset='utf-8'><title>vue小練習(xí)</title></head><body> <div id='calc'> <a v-cloak=''>{{name}}</a> <a v-cloak=''>{{name}}</a> <a v-cloak=''>{{name}}</a> <a v-cloak=''>{{name}}</a> <hr> <a v-cloak=''>{{a()}}</a> <a v-cloak=''>{{a()}}</a> <a v-cloak=''>{{a()}}</a> <a v-cloak=''>{{a()}}</a> </div></body></html><script src='http://www.gepszalag.com/bcjs/js/vue.js'></script><script> let app = new Vue({ el: ’#calc’ ,data: { counter:0 } ,methods:{ a :function(){console.log('執(zhí)行了一次函數(shù)');return ’AAAa’; } } ,computed: { name: {get: function(){ console.log('得值'); console.log('執(zhí)行了一次 計(jì)算屬性的get方法'); return ’AAAa’;},set: function(){ console.log('設(shè)值'); } } } })</script>
塊級(jí)作用域
那什么時(shí)候改用let，什么時(shí)候用const呢。是變量則用let，靜態(tài)常量則是const。
事件監(jiān)聽
上面已經(jīng)數(shù)說了，標(biāo)簽點(diǎn)擊事件，下面我們來說一下，v-on的語法糖，也就是類似v-bind的語法糖為:,, v-on的語法糖為@。代碼如下:
<!doctype html><html><head><meta charset='utf-8'><title>vue事件監(jiān)聽練習(xí)</title></head><body> <div id='calc'> <a id='num'>{{num}}</a> <button @click='add'>+1</button> </div></body></html><script src='http://www.gepszalag.com/bcjs/js/vue.js'></script><script> let app = new Vue({ el: ’#calc’ ,data: { num: 0 } ,methods:{ add: function(){this.num ++; } } ,computed: { } })</script>
運(yùn)行效果如下:
**傳參情況，**代碼如下:
<!doctype html><html><head><meta charset='utf-8'><title>vue事件監(jiān)聽練習(xí)</title></head><body> <div id='calc'> <a id='num'>{{num}}</a> <button @click='add(num,$event)'>*2</button> </div></body></html><script src='http://www.gepszalag.com/bcjs/js/vue.js'></script><script> let app = new Vue({ el: ’#calc’ ,data: { num: 1 } ,methods:{ add: function(param,event){console.log(param);console.log(event);this.num = param * 2; } } ,computed: { } })</script>
運(yùn)行如下：
監(jiān)聽獲得event對(duì)象，里面可以有點(diǎn)擊事件詳情，代碼如下:
說明：
在上面的代碼中，
<button @click='add(num,$event)'>*2</button>
num則被vue解釋成變量，$event帶有美元符號(hào)的修飾的變量，則被視為是事件。就是說，當(dāng)你在網(wǎng)頁上對(duì)鍵盤或者鼠標(biāo)有動(dòng)作的時(shí)候，他會(huì)生成事件，這個(gè)事件可以被檢測(cè)到，可以進(jìn)行傳遞。
修飾符阻止冒泡
在vue中，我們?nèi)绻麤]有組織冒泡，那么請(qǐng)看是下面這樣:
<!doctype html><html><head><meta charset='utf-8'><title>vue事件監(jiān)聽練習(xí)</title></head><body> <div @click='adda'> <button @click='add'>點(diǎn)我</button> </div></body></html><script src='http://www.gepszalag.com/bcjs/js/vue.js'></script><script> let app = new Vue({ el: ’#calc’ ,data: { num: 1 } ,methods:{ add: function(){console.log('點(diǎn)擊了按鈕') } ,adda: function(){console.log('點(diǎn)擊了div') } } ,computed: { } })</script>
運(yùn)行結(jié)果如下:
那么vue的阻止事件冒泡方法很簡(jiǎn)答，代碼修改如下：
<!doctype html><html><head><meta charset='utf-8'><title>vue事件監(jiān)聽練習(xí)</title></head><body> <div @click='adda'> <a >我不是按鈕</a> <button @click.stop='add' >點(diǎn)我</button> </div></body></html><script src='http://www.gepszalag.com/bcjs/js/vue.js'></script><script> let app = new Vue({ el: ’#calc’ ,data: { num: 1 } ,methods:{ add: function(){console.log('點(diǎn)擊了按鈕') } ,adda: function(){console.log('點(diǎn)擊了div') } } ,computed: { } })</script>
運(yùn)行如下:
vue回車事件獲取輸入框的值
代碼如下:
<!doctype html><html><head><meta charset='utf-8'><title>vue事件監(jiān)聽練習(xí)</title></head><body> <div @click='adda'> <a >我不是按鈕</a> <button @click.stop='add' >點(diǎn)我</button> <input type='text' @keyup.enter='console'> </div></body></html><script src='http://www.gepszalag.com/bcjs/js/vue.js'></script><script> let app = new Vue({ el: ’#calc’ ,data: { num: 1 } ,methods:{ add: function(){console.log('點(diǎn)擊了按鈕') } ,adda: function(){console.log('點(diǎn)擊了div') } ,console: function(event){console.log(event.target.value); } } ,computed: { } })</script>
運(yùn)行效果如下:
通過使用@Keyup.enter事件來進(jìn)行對(duì)輸入框input的事件監(jiān)聽。
Vue的阻止表單提交的監(jiān)聽
通常情況下，默認(rèn)form的submit一點(diǎn)擊提交，就立即跳轉(zhuǎn)，情況如下:
我們有時(shí)候希望點(diǎn)擊提交submit類型的input按鈕的時(shí)候，不要立即跳轉(zhuǎn)到action頁面，那么我們可以通過如下代碼來實(shí)現(xiàn):
<!doctype html><html><head><meta charset='utf-8'><title>vue事件監(jiān)聽練習(xí)</title></head><body> <div id='calc'> <form action='www.erremall.top' @click.prevent='judge' > <input type='submit'> </form> </div></body></html><script src='http://www.gepszalag.com/bcjs/js/vue.js'></script><script> let app = new Vue({ el: ’#calc’ ,data: { num: 1 } ,methods:{ judge: function(){//在這里，對(duì)數(shù)據(jù)進(jìn)行校驗(yàn)。不先提交console.log('來了這里，沒有立即跳轉(zhuǎn)'); } } ,computed: { } })</script>
運(yùn)行效果如下:
到此這篇關(guān)于vue各種事件監(jiān)聽實(shí)例(小結(jié))的文章就介紹到這了,更多相關(guān)vue 事件監(jiān)聽內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. Ajax常用封裝庫(kù)——Axios的使用2. jsp網(wǎng)頁實(shí)現(xiàn)貪吃蛇小游戲3. CSS Hack大全-教你如何區(qū)分出IE6-IE10、FireFox、Chrome、Opera4. jsp+servlet簡(jiǎn)單實(shí)現(xiàn)上傳文件功能（保存目錄改進(jìn)）5. 微信小程序授權(quán)登錄的最新實(shí)現(xiàn)方案詳解(2023年)6. 使用Blazor框架實(shí)現(xiàn)在前端瀏覽器中導(dǎo)入和導(dǎo)出Excel7. Python中selenium庫(kù)的用法詳解8. Java向數(shù)據(jù)庫(kù)插入中文出現(xiàn)亂碼解決方案9. 使用Python第三方庫(kù)pygame寫個(gè)貪吃蛇小游戲10. 在服務(wù)器端的XSLT過程中的編碼問題
網(wǎng)公網(wǎng)安備