vue快速入门(四) 之 v-on:事件绑定 以及 @keyup事件触发
在JavaScript中有点击,鼠标移动等事件,vue中自然也有对应的方法,如下这一次我们使用了method而不是data,在method里边定义各种方法,比如这个弹出警告的方法,在div里边呢,我们使用v-on后边接动作类型,比如点击,鼠标移动等,后边就是触发的方法名点击弹出警告就会弹出代码如下<body><div id="app">...
1.v-on方法
在JavaScript中有点击,鼠标移动等事件,vue中自然也有对应的方法,如下
这一次我们使用了method而不是data,在method里边定义各种方法,比如这个弹出警告的方法,在div里边呢,我们使用v-on 后边接动作类型,比如点击,鼠标移动等,后边就是触发的方法名
点击弹出警告就会弹出
代码如下
<body>
<div id="app">
<input type="button" value="弹出警告" @click="warn" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
methods: {
warn: function() {
alert("警告,警告!!!")
}
}
})
</script>
</body>
有关v-on:可以缩写成一个@,如下
我们使用@click效果和v-on:click效果一样
下面我们再来定义一个双击事件
这样双击就可以弹出警告窗口,其他的鼠标操作事件都是可以的
当然我们在实际用的时候并不会这么简单的去做点击事件,也会有dom操作,不过vue省去了dom操作,示例如下
我们在div里边添加了一个欢迎,data里边也添加了一个欢迎,方法里边添加了一个欢迎方法,
这样我们点击欢迎的时候就会出现欢迎你,一直点一直出现如下
<body>
<div id="app">
<input type="button" value="弹出警告" @dblclick="warn" />
<h2 @click="welcome">{{wel}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
wel: "欢迎"
},
methods: {
warn: function() {
alert("警告,警告!!!")
},
welcome: function() {
this.wel += "你"
}
}
})
</script>
</body>
当然我们的v-on方法也可以让函数添加参数,如下
2.@keyup事件触发
另外我们也可以使用@keyup来触发一些事件
@keyup是一些按键松开的操作,比如
@keyup.enter表示按下回车键松开后触发
@keyup.left表示鼠标左键按下松开后触发
@keyup.right表示鼠标按下右键松开后触发
@keyup.delete表示按下删除键松开后触发
当我们在框框里按下回车的时候,就会触发sayHi
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献2条内容
所有评论(0)