1.methods中的函数绑定。
v-on:click="vuemethod"
2.事件捕获在子标签中绑定事件的时候 .stop
3.注意：创建vue对象的时候，添加到data,message,data,metod等中所有的属性，本质都会绑定到vue上。vue.属性 就能用。在methods中的函数的this都是vue对象。this. 就能拿到这里面的属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!---------------1.绑定事件------------------>
<div id="app1">
<!--直接和methods中的函数绑定-->
<button v-on:click="buttonAction">按钮</button>
<br />
<button v-on:click="num++">+</button>
<font>{{num}}</font>
<button v-on:click="num--">-</button>
<div v-on:click="div1Action" style="width: 200px; height: 200px; background-color: aquamarine;">
<!--绑定click事件并且捕获-->
<div v-on:click.stop="div2Action" style="width: 100px; height: 100px; background-color: red;">
</div>
</div>
</div>
<script type="text/javascript">
var app1 = new Vue({
el: '#app1',
data:{
num: 100
},
methods:{
buttonAction: function(){
//this是当前Vue对象
alert('按钮被点击')
},
addAction:function(){
this.num ++
},
subAction: function(){
this.num --
},
div1Action:function(evt){
console.log(arguments)
//methods中的函数中的this都是当前Vue对象
console.log(this)
alert('div1被点击')
},
div2Action:function(evt){
alert('div2被点击')
//捕获事件
//evt.stopPropagation()
}
}
})
//注意: 创建Vue对象的时候，添加到data、methods、computed中所有的属性，本质都会绑定到Vue对象上
console.log('num:', app1.num)
app1.buttonAction()
</script>
</body>
</html>
