vue各種事件監(jiān)聽實例(小結(jié))
更新時間：2020年06月24日 09:18:15 作者：理想的亡命之徒
這篇文章主要介紹了vue各種事件監(jiān)聽實例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
計算屬性的Get方法和Set方法
看代碼說話:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue小練習</title>
</head>
<body>
<div id="calc">
<a v-cloak="">{{name}}</a>
</div>
</body>
</html>
<script src="./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("設值");
}
}
}
})
</script>
運行后如下:
可以知道，在計算屬性對象中，里面定義一個name，通過定義name的set和get方法來對其值進行設置和獲取，name獲得get函數(shù)return的值，name通過set函數(shù)進行設置其值，或者說改變他的值。從運行圖可以看到，當頁面加載的時候，當我用到name的變量的時候，他會默認執(zhí)行g(shù)et方法，當我在控制臺中改變其值，他會默認執(zhí)行set方法。
methods中函數(shù)執(zhí)行和computer計算的對比
這兩個方式都可以對值進行拼接或者進行復雜操作。那么哪個方法性能比較好呢？答案是computed,原因在于computed內(nèi)部有緩存?？创a如下來計算分別調(diào)用了函數(shù)多少次:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue小練習</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="./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í)行了一次 計算屬性的get方法");
return 'AAAa';
},
set: function(){
console.log("設值");
}
}
}
})
</script>
塊級作用域
那什么時候改用let，什么時候用const呢。是變量則用let，靜態(tài)常量則是const。
事件監(jiān)聽
上面已經(jīng)數(shù)說了，標簽點擊事件，下面我們來說一下，v-on的語法糖，也就是類似v-bind的語法糖為:,, v-on的語法糖為@。代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件監(jiān)聽練習</title>
</head>
<body>
<div id="calc">
<a id="num">{{num}}</a>
<button @click="add">+1</button>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
let app = new Vue({
el: '#calc'
,data: {
num: 0
}
,methods:{
add: function(){
this.num ++;
}
}
,computed: {
}
})
</script>
運行效果如下:
**傳參情況，**代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件監(jiān)聽練習</title>
</head>
<body>
<div id="calc">
<a id="num">{{num}}</a>
<button @click="add(num,$event)">*2</button>
</div>
</body>
</html>
<script src="./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>
運行如下：
監(jiān)聽獲得event對象，里面可以有點擊事件詳情，代碼如下:
說明：
在上面的代碼中，
<button @click="add(num,$event)">*2</button>
num則被vue解釋成變量，$event帶有美元符號的修飾的變量，則被視為是事件。就是說，當你在網(wǎng)頁上對鍵盤或者鼠標有動作的時候，他會生成事件，這個事件可以被檢測到，可以進行傳遞。
修飾符阻止冒泡
在vue中，我們?nèi)绻麤]有組織冒泡，那么請看是下面這樣:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件監(jiān)聽練習</title>
</head>
<body>
<div id="calc" @click="adda">
<button @click="add">點我</button>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
let app = new Vue({
el: '#calc'
,data: {
num: 1
}
,methods:{
add: function(){
console.log("點擊了按鈕")
}
,adda: function(){
console.log("點擊了div")
}
}
,computed: {
}
})
</script>
運行結(jié)果如下:
那么vue的阻止事件冒泡方法很簡答，代碼修改如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件監(jiān)聽練習</title>
</head>
<body>
<div id="calc" @click="adda">
<a >我不是按鈕</a>
<button @click.stop="add" >點我</button>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
let app = new Vue({
el: '#calc'
,data: {
num: 1
}
,methods:{
add: function(){
console.log("點擊了按鈕")
}
,adda: function(){
console.log("點擊了div")
}
}
,computed: {
}
})
</script>
運行如下:
vue回車事件獲取輸入框的值
代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件監(jiān)聽練習</title>
</head>
<body>
<div id="calc" @click="adda">
<a >我不是按鈕</a>
<button @click.stop="add" >點我</button>
<input type="text" @keyup.enter="console">
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
let app = new Vue({
el: '#calc'
,data: {
num: 1
}
,methods:{
add: function(){
console.log("點擊了按鈕")
}
,adda: function(){
console.log("點擊了div")
}
,console: function(event){
console.log(event.target.value);
}
}
,computed: {
}
})
</script>
運行效果如下:
通過使用@Keyup.enter事件來進行對輸入框input的事件監(jiān)聽。
Vue的阻止表單提交的監(jiān)聽
通常情況下，默認form的submit一點擊提交，就立即跳轉(zhuǎn)，情況如下:
我們有時候希望點擊提交submit類型的input按鈕的時候，不要立即跳轉(zhuǎn)到action頁面，那么我們可以通過如下代碼來實現(xiàn):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件監(jiān)聽練習</title>
</head>
<body>
<div id="calc">
<form action="www.erremall.top" @click.prevent="judge" >
<input type="submit">
</form>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
let app = new Vue({
el: '#calc'
,data: {
num: 1
}
,methods:{
judge: function(){
//在這里，對數(shù)據(jù)進行校驗。不先提交
console.log("來了這里，沒有立即跳轉(zhuǎn)");
}
}
,computed: {
}
})
</script>
運行效果如下:
到此這篇關于vue各種事件監(jiān)聽實例(小結(jié))的文章就介紹到這了,更多相關vue 事件監(jiān)聽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章主要介紹了vue頁面使用阿里oss上傳功能的實例(二)，主要介紹OSS管理控制臺設置訪問權(quán)限、角色等，有興趣的可以了解一下2017-08-08
Vue3中的動態(tài)路由是一種高級功能,它允許你在URL中包含變量,這些變量可以在組件內(nèi)部通過$route.params對象訪問,動態(tài)路由通常用于構(gòu)建可配置性強、更具靈活性的應用,本文詳細介紹了如何在vue3中實現(xiàn)動態(tài)路由,需要的朋友可以參考下2024-07-07
這篇文章主要為大家介紹了Vite的createServer啟動源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
vue按住shift鍵多選方式(以element框架的table為例)
這篇文章主要介紹了vue按住shift鍵多選方式(以element框架的table為例),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue計算屬性computed的使用方法,結(jié)合實例形式分析了vue計算屬性computed的基本用法及相關操作注意事項,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了vue操作dom并為dom增加點擊事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要為大家學習介紹了Vue如何利用廣度優(yōu)先搜索實現(xiàn)watch（有意思），文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下2023-08-08
這篇文章主要介紹了vue2.x引入threejs,如果在開發(fā)過程中出現(xiàn)threejs生成的canvas出現(xiàn)外邊框,只需要用css樣式修改，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了Vue 項目分環(huán)境打包的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
Effect幾乎是Vue3.0中最重要的一個功能了,計算屬性監(jiān)聽函數(shù)都是基于effect實現(xiàn)的,下面這篇文章主要給大家介紹了關于vue3中effect函數(shù)到底是什么的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06