<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!-- 基本用法 -->
<div id="app1">
<p>{{counter}}</p>
<button v-on:click='counter++'>+</button><!--在标签中声明函数-->
<button v-on:click='counter--'>-</button>
<br>
<button @click='counter++'>+</button><!--语法糖（缩写）-->
<button @click='counter--'>-</button>
<br>
<button @click='increment'>+</button><!--使用方法-->
<button @click='decrement'>-</button>
</div>
<script>
new Vue({
el: '#app1',
data: {
counter: 0
},
methods: {
increment: function () {
this.counter++;
},
decrement: function () {
this.counter--;
}
}
})
</script><hr>
<!-- 参数传递问题 -->
<div id="app2">
<!-- 事件调用的方法没有参数 -->
<button @click='btnClick1'>按钮1</button>
<button @click='btnClick1()'>按钮2</button>
<!-- 事件调用的方法有参数 -->
<button @click='btnClick2("eyes++")'>按钮3</button>
<button @click='btnClick2(name)'>按钮4</button>
<!-- 事件调用的方法有参数，但不传参或不加括号 -->
<button @click='btnClick3()'>按钮5</button> <!--不报错，传 undefined-->
<button @click='btnClick3'>按钮6</button> <!--不报错，传 Event对象-->
<!-- 方法定义时，我们需要event对象，也需要其他参数 -->
<button @click='btnClick4'>按钮7</button> <!--event,undefined-->
<button @click='btnClick4()'>按钮8</button> <!--undefined,undefined-->
<button @click='btnClick4("eyes++")'>按钮9</button> <!--eyes++,undefined-->
<button @click='btnClick4("eyes++",$event)'>按钮10</button> <!--手动获取event-->
</div>
<script>
new Vue({
el: '#app2',
data: {
name:'eyes++'
},
methods:{
btnClick1(){
console.log('btn1的调用');
},
btnClick2(value){
console.log('--- ' + value + ' ---');
},
btnClick3(value){
console.log(value);
},
btnClick4(value,event){
console.log(value,event);
}
}
})
</script><hr>
<!-- 修饰符的使用 -->
<div id="app3">
<!-- .stop 阻止冒泡 -->
<div @click='divClick'>
<button @click.stop='btnClick'>按钮</button>
</div>
<!-- .prevent 阻止默认事件 -->
<form action="">
<input type="submit" value="提交" @click.prevent='submitClick'>
</form>
<!--
按键修饰符：
.enter （回车键） .tab .delete .esc .space .up .down .left .right
-->
<form action="">
<input type="textarea" @keyup.delete='keyUp'>
</form>
<!-- .once 只执行一次回调 -->
<button @click.once='doOnce'>click</button>
</div>
<script>
new Vue({
el:'#app3',
data:{
msg:'eyes++'
},
methods:{
btnClick(){
console.log('btn的调用');
},
divClick(){
console.log('div的调用');
},
submitClick(){
console.log('阻止默认事件');
},
keyUp(){
console.log('按了一下删除');
},
doOnce(){
console.log('只能调一次');
}
}
})
</script>
</body>
</html>
扫一扫
评论 1
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
