<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{num}}</p>
<!-- v-on事件绑定 后边是写什么事件 事件的名称 方便下边写事件具体做什么-->
<input type="button" value="onAdd" v-on:click="onAdd">
<input type="button" value="onReduce" v-on:click="onReduce">
<!-- <button v-on:click="onAdd">onAdd</button>-->
<!-- <button v-on:click="onReduce">onReduce</button>-->
<!-- 键盘事件具体哪个键直接点就可以 可以传入多个 可以传入键号 也可以传入键-->
<input type="text" value="键盘抬起事件" @keyup.13.space="onEnter">
<button v-on="{mouseenter:onAdd,mouseleave:onAdd}">多个事件</button>
<!-- 这里还有一个修饰符 once只能触发一次-->
<button @click.once="onAdd">只能触发一次</button>
<!-- 点可以修饰 阻止默认事件.prevent 阻止冒泡.stop-->
<form action="https://www.baidu.com" v-on:submit.prevent>
<input type="submit" value="提交">
</form>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
new Vue({
el:"#app",
data(){
return {
num:0
}
},
methods:{
onAdd(){
// this指向Vue实例
this.num++;
// console.log(this)
},
onReduce(){
this.num--;
},
onEnter(){
this.num++;
}
}
});
</script>
</body>
</html>
Python3Turtle