当使用Vue想调用函数时候使用V-ON
不传参数
不穿参数会默认传入一个event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="firstVue">
<h1>欢迎来到V-on</h1>
//意思是当你点击button时候调用showInfo
<button v-on:click="showInfo" >点击我（不传参数）</button>
//可以使用小老鼠
<button @click="showInfo" >点击我（不传参数）</button>
</div>
</body>
<script type="text/javascript">
//关闭生成提示
Vue.config.productionTip=false;
let v=new Vue({
el:"#firstVue",
data() {
return {
main:"VUE"
}
},
methods:{
//在methods里面不需要在写function了
showInfo(a){
alert("同学你好");
console.log(this);//这里的this是Vue实例
console.log(a.target.valueOf());//我明显没有传值进了来却默认给我塞了一个event 这个东西有用可以获取事件目标
}
}
})
console.log(v)
</script >
</html>
传递参数
传递参数event会消失,但是还能拿回来直接加括号就好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="firstVue">
<h1>欢迎来到V-on</h1>
//意思是当你点击button时候调用showInfo
<button v-on:click="showInfo(66)" >点击我（不传参数）</button>
//可以使用小老鼠
<button @click="showInfo($event,88)" >点击我（不传参数）</button>
</div>
</body>
<script type="text/javascript">
//关闭生成提示
Vue.config.productionTip=false;
let v=new Vue({
el:"#firstVue",
data() {
return {
main:"VUE"
}
},
methods:{
//在methods里面不需要在写function了
showInfo(a,b){
alert(a+""+b);
console.log(this);//这里的this是Vue实例
}
}
})
console.log(v)
</script >
</html>
补充：methods:这个属性出来是因为如果你把函数放在data里面会做一次数据代理
直接影响性能。（把方法放在data也能有效果但是却做了不必要的代理）