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
