vue各種事件監聽例項(小結)
計算屬性的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函式return的值，name通過set函式進行設定其值，或者說改變他的值。從執行圖可以看到，當頁面載入的時候，當我用到name的變數的時候，他會預設執行get方法，當我在控制檯中改變其值，他會預設執行set方法。
methods中函式執行和computer計算的對比
這兩個方式都可以對值進行拼接或者進行復雜操作。那麼哪個方法效能比較好呢？答案是computed,原因在於computed內部有快取。看程式碼如下來計算分別呼叫了函式多少次:
<!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',methods:{
a :function(){
console.log("執行了一次函式");
return 'AAAa';
}
},computed: {
name: {
get: function(){
console.log("得值");
console.log("執行了一次 計算屬性的get方法");
return 'AAAa';
},set: function(){
console.log("設值");
}
}
}
})
</script>塊級作用域
那什麼時候改用let，什麼時候用const呢。是變數則用let，靜態常量則是const。
事件監聽
上面已經數說了，標籤點選事件，下面我們來說一下，v-on的語法糖，也就是類似v-bind的語法糖為:,,v-on的語法糖為@。程式碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件監聽練習</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事件監聽練習</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>
執行如下：
監聽獲得event物件，裡面可以有點選事件詳情，程式碼如下:
說明：
在上面的程式碼中，
<button @click="add(num,$event)">*2</button>
num則被vue解釋成變數，$event帶有美元符號的修飾的變數，則被視為是事件。就是說，當你在網頁上對鍵盤或者滑鼠有動作的時候，他會生成事件，這個事件可以被檢測到，可以進行傳遞。
修飾符阻止冒泡
在vue中，我們如果沒有組織冒泡，那麼請看是下面這樣:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件監聽練習</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',methods:{
add: function(){
console.log("點選了按鈕")
},adda: function(){
console.log("點選了div")
}
},computed: {
}
})
</script>
執行結果如下:
那麼vue的阻止事件冒泡方法很簡答，程式碼修改如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件監聽練習</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',computed: {
}
})
</script>
執行如下:
vue回車事件獲取輸入框的值
程式碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件監聽練習</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',adda: function(){
console.log("點選了div")
},console: function(event){
console.log(event.target.value);
}
},computed: {
}
})
</script>
執行效果如下:
通過使用@Keyup.enter事件來進行對輸入框input的事件監聽。
Vue的阻止表單提交的監聽
通常情況下，預設form的submit一點選提交，就立即跳轉，情況如下:
我們有時候希望點選提交submit型別的input按鈕的時候，不要立即跳轉到action頁面，那麼我們可以通過如下程式碼來實現:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue事件監聽練習</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',methods:{
judge: function(){
//在這裡，對資料進行校驗。不先提交
console.log("來了這裡，沒有立即跳轉");
}
},computed: {
}
})
</script>
執行效果如下:
到此這篇關於vue各種事件監聽例項(小結)的文章就介紹到這了,更多相關vue 事件監聽內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！