1、v-on的使用和语法糖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title-hellovuejs</title>
</head>
<body>
<div id ="app">
<h2>当前计数:{{counter}}</h2>
<!-- <button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button> -->
<!-- <button v-on:click="increment">+</button>
<button v-on:click="decrement">-</button> -->
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
//let(变量) /const(常亮)
const chen1 = new Vue({
el: '#app', //用于挂载要管理的元素
data:{//定义数据
counter: 0
},
methods:{
increment(){
console.log('add button click');
this.counter++;
},
decrement(){
console.log('sub button click');
this.counter--;
}
}
})
</script>
</body>
2、v-on的参数传递有好多种要注意的地方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title-hellovuejs</title>
</head>
<body>
<div id ="app">
<!-- 方法1,--此时,不带参数,括号可以省略 -->
<!-- <button @click="btn1Click()">按钮1</button> -->
<button @click="btn1Click">按钮1</button>
<!--方法2,-- 在事件定义时,写函数时省略了小括号,但是方法本身需要一个参数
这个人时候,vue会默认将浏览器的event传输到方法中(参数) -->
<!-- (1)正常使用 -->
<!-- <button @click="btn2Click(123)">按钮2</button> -->
<!-- (2)非正常使用,此时,用括号,不带参数,也不报错 ,参数默认为undifined-->
<!-- <button @click="btn2Click()">按钮2</button> -->
<!-- (3)非正常是哟,此时不带括号,传入了默认参数,浏览器的event (鼠标)-->
<button @click="btn2Click">按钮2</button>
<!-- 方法3,--方法定义时,我们需要event对象,同时又需要其他参数 -->
<!-- 在调用方法是,如何为了获取到浏览器参数的event对象,$event -->
<button @click="btn3Click('123',$event)">按钮3</button>
</div>
<script src="../js/vue.js"></script>
<script>
//let(变量) /const(常亮)
const chen1 = new Vue({
el: '#app', //用于挂载要管理的元素
data:{//定义数据
counter: 0
},
methods:{
btn1Click(){
console.log('btn1');
},
btn2Click(event){
console.log('-----param----',event);
},
btn3Click(abb,event){
console.log('++++++param----',abb,event);
}
}
})
</script>
</body>