(精华)2020年7月12日 vue v-on的使用

愚公搬代码
107 阅读1分钟 
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>常用指令：v-on</title>
	<!-- 事件简写和事件对象$event -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		window.onload = function () {
			let vm = new Vue({
				el: '#app',
				data: { //存储数据
					arr: [12, 34, 45, 23, 5]
				},
				methods: { //存储方法
					show: function () {
						console.log('show方法');
					},
					add(e) {
						console.log(this); //this表示当前vue实例
						console.log(this === vm); //true
						this.arr.push(666); //使用this访问当前实例中的成员
						console.log(this.arr)
						this.show();
						console.log(e.target.innerHTML); //DOM对象
					},
				}
			});
		}
	</script>
</head>

<body>
	<div id="app">
		<!--vue点击事件-->
		<button v-on:click="show">点我</button>
		<!-- 简写 -->
		<button @click="show">简写点我</button>
		<button @mouseover="show">鼠标经过</button>
		<button @dblclick="show">双击</button>
		<button @click="add">数组中添加元素</button>
	</div>
</body>

</html>
avatar
文章
阅读
粉丝