//index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <div id="vue-app"> <button v-on:click="age++">加一岁</button> <button v-on:click="age--">减一岁</button> {{ age }} </div> <script src="app.js"></script> </body>
//app.js
new Vue({
el:"#vue-app",
data:{
age:30,
},
methods:{
}
});
v-on
1.单击事件 click
v-on 指令绑定一个事件监听器，click后双引号里面，也可以是函数，写在methods的函数
eg：
methods:{
up:function()
{
this.age++;
},
down:function(){
this.age--;
}
}
<button v-on:click="up">加一岁</button> <button v-on:click="down">减一岁</button>
写成这样也是可以的。
对于函数加不加括号的问题，当在两个花括号里面{{ a() }}这个时候，一定要加括号，否则会被当成值来对待
当在事件中，v-on能自动识别出它是一个事件，所以可以不用加，需要传参的时候就要添加括号
比如，加不同的岁数，减不同的岁数，这个时候就可以调用参数了，就不用再额外多写函数
2.双击事件dblclick
<button v-on:dblclick="up">加一岁</button> <button v-on:dblclick="down">减一岁</button>改成这样，要双击按钮，才会调用函数。
3.鼠标事件mouseover
在js事件中，鼠标事件有个event
<div id="square" @mousemove="update">{{ x }},{{ y }}</div>
update:function(event)
{
//console.log(event);
this.x=event.offsetX;
this.y=event.offsetY;
}
这里的index.html中update函数不能写括号，构建一个方框，鼠标移到哪里，显示出它的x、y轴的值
PS:另外，所有的v-on：这里，可以全部用@代替
eg：
<div id="square" @mousemove="update">{{ x }},{{ y }}</div>功能不变