Vue 中提供了 v-on: 事件绑定机制
绑定的事件处理函数必须定义到vm实例的事件处理函数 methods 中去
<div id="app">
<!-- <input type="button" value="点我，魅力可大了呢" id="btn"/> -->
<input type="button" value="点我，魅力可大了呢" v-on:click="add"/>
<!-- <input type="button" value="点我，魅力可大了呢" v-on:mouseover="btn"/> -->
<hr>
<h3>今日的魅力值----{{glamour}}</h3>
</div>
<script src="./vue2.6.10.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
glamour:'1'
},
methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
add: function () {
// alert('Hello')
console.log('ok')
}
}
})
</script>
es6 中函数的简写形式：
methods: {
// add: function () {
// // alert('Hello')
// console.log('ok')
// }
// es6中函数的简写形式：
add(){
console.log('yes')
}
}
如果在 绑定的add 方法中加入小括号()页面也能正常执行
<input type="button" value="点我，魅力可大了呢" v-on:click="add()"/>
methods: {
add(num1,num2,num3){
console.log('hello'+num1+num2+num3)
}
}
既然都能执行，那加入小括号与不加小括号的区别在于:
加入小括号就能传递参数了呀，是不是傻
<input type="button" value="点我，魅力可大了呢" v-on:click="add(1,2,3)"/>
来吧展示：
函数中可以使用...的方式去接收数组形式的参数
methods: {
// es6中函数的简写形式：
// add(num1,num2,num3){
// console.log('hello'+num1+num2+num3)
// }
add(...args){
console.log(args)
}
}
在vm实例中，如果想要访问data中的值，如果直接通过变量的方式是获取不到的，只能通过this访问，this就代表vm实例
栗子：
methods: {
// add(...args){
// console.log(args)
// }
add(){
console.log(msg)
}
}
通过this.xxx去获取
add(){
console.log(this.msg)
}
思考：如果this是vm实例的话，想要获取data上的属性中的数据，方式不应该是
this.data.msg？，
测试：
解释：
能够直接通过this.xxx的方式去获取data属性上的数据的原因是，
vue做了一层处理，你挂载到data上的这些属性，默认处理了直接挂载到vm的身上
点击按钮,让魅力值增加
<body>
<div id="app">
<input type="button" value="点我，魅力可大了呢" v-on:click="add()"/>
<hr>
<h3>今日的魅力值----{{msg}}</h3>
</div>
<script src="./vue2.6.10.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:1
},
methods: {
add(){
this.msg+=1
console.log(this.msg)
}
}
})
</script>
</body>
v-on的简写: 将 v-on: 替换成 @ 符号
比如:
<input type="button" value="点我，魅力可大了呢" v-on:click="add()"/>
<input type="button" value="点我，魅力可大了呢" v-on:mouseover="add()"/>
<input type="button" value="点我，魅力可大了呢" @click="add()"/>
<input type="button" value="点我，魅力可大了呢" @mouseover="add()"/>