定义函数事件的方法

 

<!-- 定义事件的函数方法时，不带参数，函数接收时，可以接收到event
	定义事件的函数方法时，带参数$event，函数接收时，可以接收到event -->
	<button @click="ctnFun">{{name1}}</button>
	<button @click="btnFun($event,9)">{{name2}}</button>
	<hr>
	<!-- prevent阻止默认事件 -->
	<a href="./day02.html" @click.prevent="func">我是一个测试文本的a链接</a>
	<hr>
	<!-- stop 阻止冒泡事件-->
	<div @click="divBtn" style="width: 300px;height:300px;background-color: black;">
	<button @click.stop="btn" style="width: 50px;height:50px;background-color:red;">按钮</button>
	</div>
	<hr>
	<!-- once只执行一次事件 -->
	<button @click.once="oneBtn">只执行一次的按钮</button>
	<hr>
	<!-- 键盘抬起触发 enter不区分大小写-->
	<!-- <input type="text" @keyup.enter="enterFun"> -->
	<input type="text" @keyup.ctrl.c="enterFun">
	<div>{{userValue}}</div>
	<!-- 键盘按下触发 -->
	<!-- <input type="text" @keydown.tab="enterFun"> -->
	<!-- <input type="text" @keydown.hc="enterFun"> -->
	<!-- 作业：keycode设置空格触发
	ctrl+a进行复制 ctrl+b进行粘贴 -->
	</div>
	</body>
	<script src="./js/vue.js"></script>
	<script>
	Vue.config.productionTip = false;//阻止开发环境提示
	Vue.config.keyCodes.hc = 13;//设置键码值的名称
	new Vue({
	el:"#app",
	data:{
	name1:"按钮1",
	name2:"按钮2",
	userValue:"123"
	},
	methods: {
	// 点击事件
	ctnFun(evnet){
	console.log("被点击了");
	// console.log(event);
	// console.log(event.target.innerText);
	},
	// 点击事件
	btnFun(a,b){
	console.log("被点击了");
	console.log(a);
	console.log(b);
	// console.log(event.target.innerText);
	},
	// a标签点击事件
	func(){
	console.log("a被点击了");
	},
	// div标签点击事件
	divBtn(){
	console.log("div被触发了");
	},
	// 按钮标签点击事件
	btn(){
	console.log("btn被触发了");
	},
	// 只执行一次的btn点击
	oneBtn(){
	console.log("触发了一次点击");
	},
	// 键盘按下事件
	enterFun(e){
	console.log("键盘按下了");
	console.log(e);
	console.log(e.target.value);
	console.log(this.userValue);
	this.userValue = e.target.value;