<body>
<div id="app">
<input type="text" v-model="txt">
<br>
<!-- 在vue中使用v-on指令进行事件绑定 -->
<!-- 格式为v-on:事件类型="绑定方法" -->
<!-- 绑定的方法必须是本组件的methods中的方法 ，方法名后可以加()，也可以不加()。区别是：如果不加括号，vue在调用方法时会自动传递event对象，如果加了()则可以自定义传参。
传参时需要事件对象可以传递$event-->
<!-- <button v-on:click="btnClick">按钮</button> -->
<!-- <button v-on:click="btnClick($event)">按钮</button> -->
<!-- v-on: 可以缩写为@ -->
<!-- （）可以加可以不加 加（）需要传参，不加直接传event -->
<button @click="btnClick">按钮</button>
<br>
<br>
<button @click="secondBtn">按钮</button>
<br>
<hr>
<button @click="jian">-</button>
<br>
<span>{{number}}</span>
<br>
<button @click="jia">+</button>
</div>
<script src="vue.js"></script>
<script>
let root=new Vue({
el:"#app",
data:{
txt:"",
number:0,
},
// 组件的参数配置对象中，methods表示组件方法，类型是一个对象，对象中以键值对的形式添加方法（函数）。组件中的方法可以被v-on指令监听。
// arguments 一个函数调用时 所有的参数对象
methods:{
btnClick:function(e){
// console.log("123")
// console.log(e)
// console.log(root.txt)
// 组件创建之后，组件中data中的数据会作为属性添加到组件对象中，而methods中的函数会作为方法添加到组件对象中.(所以data中的名字和methods中的名字不能重复)
// 在组件方法中，this表示这个组件对象本身。所以在本组件方法中可以通过this访问本组件的data，也可以通过this调用本组件的其他方法。
console.log(this.txt)
},
secondBtn(){
console.log("second")
},
// 组件的方法中不能使用箭头函数，否则会导致函数中的this不指向组件对象，从而不能使用组件中的其他数据或方法。
jia(){
this.number=this.number+1;
},
jian(){
this.number=this.number-1;
}
}
})
</script>
</body>