v-on
vue中我们可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码
v-on:action="",双引号里面相当于一个表达式,我们可以写函数名调用函数 也可以直接对js域中vue的data数据区进行操作
前序,计数器实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body >
<div id="app">
<button @click="count=count-2">减小2</button>
{{count}}
{{num}}
<button @click="count=count+2">增加2</button>
</div>
<script>
new Vue({
el:"#app",
data:{
count:0,
}
})
</script>
</body>
</html>
_________________other___________________________________
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body >
<div id="app">
<button @click="fucd">减小1</button>
{{count}}
<button @click="fucu">增加1</button>
</div>
<script>
new Vue({
el:"#app",
data:{
count:0,
},
methods:{
fucd:function(){
this.count--;
},
fucu:function(){
this.count++;
}
}
})
</script>
</body>
</html>
1. v-on :click 点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-on:click</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{age}}
<button v-on:click="fun1('20')">click</button>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
message:"hellow,vue,哈哈哈",
age:15,
name:"zyh"
},
methods:{
fun1:function(n){
this.age=n;
this.
}
}
})
</script>
</html> 2. v-on:keydown="fun($event)" 键盘按下事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-on:keydown</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
新vue:<input type="text" v-on:keydown="fun($event)"> <br />
传统js:<input type="text" onkeydown="showKeyCode()">
</div>
</body>
<script>
/* vue方法 */
/*从body里的函数传过来一个$event
它和我们在js中直接使用的event一样的,只是这里需要我们加$
*/
new Vue({
el:"#app",
methods:{
fun:function(event){
var keyCode=event.keyCode
if(keyCode>=48&&keyCode<=57||keyCode>=97&&keyCode<=105||keyCode==8){
event.getPreventDefault();//键盘有效,允许输入
}else{
event.preventDefault()//键盘无效,不允许输入
}
}
}
})
/* 传统js */
function showKeyCode(){
var keyCode=event.keyCode
if(keyCode>=48&&keyCode<=57||keyCode>=97&&keyCode<=105||keyCode==8){
event.getPreventDefault();//键盘有效,允许输入
}else{
event.preventDefault()//键盘无效,不允许输入
}
}
</script>
</html>这里,我们在传统js可以通过event直接获取事件信息,得到输入的状态码,并且可以做一些判断, 我们在vue中可以通过body里传入&event的方式间接来获取事件信息.
鼠标悬停感应事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>v-on:mouseover</title>
<style>
#div {
background-color: red;
}
#div1 {
background-color: red;
}
</style>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div @mouseover="fun1" id="div1">
<textarea @mouseover="fun2($event)">这是一个文件域</textarea>
</div>
</div>
<br/>
<div id="app2">
<div onmouseover="fun11()" id="div">
<textarea onmouseover="fun222()">这是一个文件域</textarea>
</div>
</div>
</body>
<script>
//view model
//老规矩,写一下传统js代码
function fun222() {
alert("鼠标移动到文件域textarea上了");
event.stopPropagation();
//event.stopPropagation();阻止后续事件
//比如这里本来由于文件域就在div上,我们移动到文件域上就相当于移动到div上
//那么我们出发文件域上的alert就相遇触发了div上的alert
}
function fun11() {
alert("鼠标移动到div上了");
}
//vue新式
new Vue({
el: "#app",
methods: {
fun1: function(){
alert("鼠标移动到div上了");
},
fun2: function(event){
alert("鼠标移动到文件域textarea上了");
event.stopPropagation();
}
}
})
</script>
</html>从代码运行结果来看@和 v-on: 作用相同 另外这里有个event功能函数介绍 event.stopPropagation();阻止后续事件 比如这里本来由于文件域就在div上,我们移动到文件域上就相当于移动到div上 那么我们出发文件域上的alert就相遇触发了div上的alert
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/11/16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
