Vue.js 筆記（四）事件

今天要跟大家介紹事件處理器

Quick Start

接下來將要分享我的 Vue 學習筆記，有任何建議與需要改進的地方，也請大家多多指教。

因 Hexo 已採用 Vue 框架，故以下範例在大括號中皆多一個空白符號，使用範例時，請自行去除空白

事件處理器三種寫法

  • 如果不傳參數可不寫()
  • 如果動作很簡單，可直接寫在 click 之後

sample

vue9.html 529 B
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
	  <button @click="handleClick">Click1</button>
	  <button @click="handleClick()">Click2</button>
	  <button @click="isShow=!isShow">Click3</button>
	  <div v-show="isShow">show</div>
	</div>
<script>
	var app = new Vue({
	  el: '#app',
	  data: {
	  	isShow: false
	  },
	  methods: {
	  	handleClick() {
	  		this.isShow = !this.isShow;
	  	}
	  }
	});
</script>
</body>
</html>

事件修飾符

當 ul 與 li 都綁定事件時， li 事件觸發會接著觸發 ul 事件。

vue10.html 497 B
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
	  <ul @click="handleUlClick()">
	  	<li @click="handleLiClick()">A</li>
	  	<li>B</li>
	  	<li>C</li>
	  </ul>
	</div>
<script>
	var app = new Vue({
	  el: '#app',
	  data: {
	  },
	  methods: {
	  	handleLiClick() {
	  		console.log("li click");
	  	},
	  	handleUlClick() {
	  		console.log("ul click");
	  	}
	  }
	});
</script>
</body>
</html>
  • 點擊 A

如果要阻止觸發 ul 事件

  • 使用 Event.stopPropagation() 阻止冒泡

    vue11.html 532 B
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 
    <!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
	  <ul @click="handleUlClick()">
	  	<li @click="handleLiClick($event)">A</li>
	  	<li>B</li>
	  	<li>C</li>
	  </ul>
	</div>
<script>
	var app = new Vue({
	  el: '#app',
	  data: {
	  },
	  methods: {
	  	handleLiClick(ev) {
	  		ev.stopPropagation();
	  		console.log("li click");
	  	},
	  	handleUlClick() {
	  		console.log("ul click");
	  	}
	  }
	});
</script>
</body>
</html>

  • 使用 @click.stop 事件修飾符

    vue12.html 510 B
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 
    <!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
	  <ul @click="handleUlClick()">
	  	<li @click.stop="handleLiClick($event)">A</li>
	  	<li>B</li>
	  	<li>C</li>
	  </ul>
	</div>
<script>
	var app = new Vue({
	  el: '#app',
	  data: {
	  },
	  methods: {
	  	handleLiClick(ev) {
	  		console.log("li click");
	  	},
	  	handleUlClick() {
	  		console.log("ul click");
	  	}
	  }
	});
</script>
</body>
</html>

  • 使用 @click.slef 事件修飾符

    只有自己被觸發時，才會執行

    vue13.html 540 B
    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 
    <!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
	  <ul @click.self="handleUlClick()">
	  	<li @click.stop="handleLiClick($event)">A</li>
	  	<li @click="handleLiClick()">B</li>
	  	<li>C</li>
	  </ul>
	</div>
<script>
	var app = new Vue({
	  el: '#app',
	  data: {
	  },
	  methods: {
	  	handleLiClick(ev) {
	  		console.log("li click");
	  	},
	  	handleUlClick() {
	  		console.log("ul click");
	  	}
	  }
	});
</script>
</body>
</html>

  • 其他的修飾符，如： @click.prevent ，這效果等同於 Event.preventDefault()

    如果事件可以被取消，就取消事件
    可以透過 Event.cancelable() 查看事件是否能被取消

  • 其他的修飾符，如： @click.once

    只限定觸發一次的事件修飾符

  • 按鍵修飾符，如： @keyup.enter

    當輸入 Enter 按鍵時觸發

今天的筆記就到這邊，期待下次再會！

謝謝您的支持與鼓勵

Ads