我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue</title>

    <script src="./vue.js"></script>

</head>

<body>

    <div id="demo">

        <button @click="counter += 1">{{counter}}</button>

        <button v-on:click="cl">{{message}}</button>

        <button @click="say('hi')">内联语句</button>

    </div>

    <script>

        var demo = new Vue({

            el:'#demo',

            data:{

                message: "hello",

                counter:0,
　　　　　　　　　　test:''

            },

            methods:{

                cl(){

                    this.message = this.message + ' vue!';

                },
　　　　　　　　　　say(message){
          　　　　　　　this.test = message;
          　　　　　　　alert(this.test);
        　　　　　},
            }

        })

    </script>

</body>

</html>

事件修饰符

  • stop 阻止冒泡
  • prevent 阻止默认事件
  • capture 使用事件捕获模式
  • self 只在当前元素本身触发
  • once 只触发一次
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue</title>

    <script src="./vue.js"></script>

</head>

<body>

    <div id="demo">

        <button v-on:click="cl">{{message1}}</button>

        <button v-on:click.once="c2">{{message2}}</button>

        <a href="http://cnblogs.com" target="_blank">普通链接</a>

          <a @click.prevent href="http://cnblogs.com" target="_blank">取消默认行为</a>

    </div>

    <script>

        var demo = new Vue({

            el:'#demo',

            data:{

                message1: "hello",

                message2: "hello",

                counter:0,

            },

            methods:{

                cl(){

                    this.message1 = this.message1 + ' vue!';

                },

                c2(){

                    this.message2 = this.message2 + ' vue!';

                },

            }

        })

    </script>

</body>

</html>

需要注意的是，使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击。

鼠标修饰符

  • left 左键
  • right 右键
  • middle 滚轮
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue</title>

    <script src="./vue.js"></script>

</head>

<body>

    <div id="demo">

        <button @mouseup.right="right" @mouseup.middle="middle" @mouseup.left="left">{{message}}

    </div>

    <script>

        var demo = new Vue({

            el:'#demo',

            data:{

                message: "hello",

               text:'点我'

            },

            methods:{

                left(){

                  this.message = 'left'

                },

                right(){

                  this.message = 'right'

                },

                middle(){

                  this.message = 'middle'

                },

            }

        })

    </script>

</body>

</html>

分别点击鼠标左键，右键和滚轮时，会触发不同的事件：

键值修饰符

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符。

  • .enter
  • .tab
  • .delete (捕获 “删除” 和 “退格” 键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue</title>

    <script src="./vue.js"></script>

</head>

<body>

    <div id="demo">

        <button v-on:keyup.enter="enter">{{message}}<br>

        <button @keyup.tab="tab">{{message}}<br>

        <button @keyup="show($event)">{{message}}<br>

    </div>

    <script>

        var demo = new Vue({

            el:'#demo',

            data:{

                message: "hello",

            },

            methods:{

                enter(){

                    this.message = 'enter'

                },

                tab(){

                    this.message = 'tab'

                },

                show(e){

                    this.message = e.keyCode

                }

            }

        })

    </script>

</body>

</html>

表单事件

在进行表单提交时，页面会刷新，导致我们绑定的表单提交事件执行出问题，会避免刷新，我们需要使用阻止修饰符。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue</title>

    <script src="./vue.js"></script>

</head>

<body>

    <div id="demo">

        <form v-on:submit.prevent="onSubmit">

            <input type="text"><br />

            <input type="submit" value="提交">

        </form>

    </div>

    <script>

        var demo = new Vue({

            el:'#demo',

            data:{

                message: "hello",

            },

            methods:{

                onSubmit(){

                    alert('提交')

                },

            }

        })

    </script>

</body>

</html>

vue之v-on的更多相关文章

  1. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  2. Vue基础（环境配置、内部指令、全局API、选项、内置组件）

    1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...

  3. vue集成环信IM

    vue 集成环信im 简单demo 环信AppKey:1106190415055331#test 测试账号: test1  123456  test2  123456  test3  123456 默 ...

  4. Vue main.js 文件中全局组件注册部分

    在 \src\components\index.js 文件中export组件 import HeaderList from './HeaderList' import HeaderMenu from ...

  5. vue.js的ajax和jsonp请求

    首先要声明使用ajax 在 router下边的 Index.js中 import VueResource from 'vue-resource'; Vue.use(VueResource); ajax ...

  6. 如何在Vue项目中使用Typescript

    0.前言 本快速入门指南将会教你如何在Vue项目中使用TypeScript进行开发.本指南非常灵活,它可以将TypeScript集成到现有的Vue项目中任何一个阶段. 1.初始化项目 首先,创建一个新 ...

  7. vue基础响应式数据

    1.vue 采用 v……vm……m,模式,v---->el,vm---->new Vue(实例),m---->data 数据,让前端从操作大量的dom元素中解放出来. 2.vue响应 ...

  8. vue.js 配置axios 用来ajax请求数据

    * 用npm 安装 axios 切换到项目的根目录 npm install --save axios vue-axios * 在vue的入口文件./src/main.js 中引入axios, 添加2行 ...

  9. 第六十二篇：Vue的双向绑定与按键修饰符

    好家伙,依旧是vue的基础 1.按键修饰符 假设我们在一个<input>框中输入了12345,我们希望按一下"Esc" 然后删除所有前面输入的内容,这时候,我们会用到按 ...

  10. 微信小程序探究

    前段时间比较流行的微信小程序,因为一直没有所谓内测码也没具体关注.拖到现在正好借组内分享的时机来仔细了解一下微信小程序.了解一个新的事物无外乎从是什么(本质),怎么用(具体用法),为什么用(优缺点)来 ...

随机推荐

  1. 质因子分解（Pollard_Rho法）

    LL Pollard_Rho(LL n, LL c) { LL x, y, d; LL i = , k = ; x = y = rand() % n; do { i++; d = gcd(n + y ...

  2. PTA——支票面额

    PTA 7-38 支票面额 #include<stdio.h> int main() { int n,f,y; ; scanf("%d",&n); ; flag ...

  3. django-dailyfresh

    Hold on ,learn by myself! redis nosql - 不支持sql语法 - 存储数据都是KV形式 - Mongodb - Redis - Hbase hadoop - Cas ...

  4. UV纹理+修改器:VertexWeightEdit+修改器:Mask遮罩

    UV纹理+修改器: VertexWeightEdit+修改器: Mask遮罩 基本流程, 如下图,准备地图一份, 黑白色即可. 纹理使用颜色绘制权重. 白色为1, 黑色为0. 新增球体, 细分多次, ...

  5. [zoj4045][思维＋dfs]

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=4045 题意:给一棵树.这棵树有n个节点,问你这个图能不能分成k个分块.这个 ...

  6. redis 部署相关

    ★ 启动: 配置好环境变量后:打开一个cmd窗口,执行redis-server.exe就可以启动redis了. https://blog.csdn.net/weixin_42423819/articl ...

  7. 【mybatis源码学习】利用maven插件自动生成mybatis代码

    [一]在要生成代码的项目模块的pom.xml文件中添加maven插件 <!--mybatis代码生成器--> <plugin> <groupId>org.mybat ...

  8. vm如何安装xenserver

    xenserver下载链接 http://downloadns.citrix.com.edgesuite.net/12636/XenServer-7.2.0-install-cd.iso 安装过程和安 ...

  9. RESTful Web API 理解

    REST 是一种应用架构风格,不是一种标准,是面向资源架构(ROA)风格,与具体技术平台无关,REST架构的应用未必建立在Web之上,与之对应的是传统的Web Service 采用的面向操作的RPC架 ...

  10. Zabbix-2.4-安装-2

    zabbix自定义报警-动作   打开资产自动接收   这里看到主机资产有数据了,这里的数据,就是来自下面的关联 上面的数据就是设置login-user时候设置的关联    有些关联显示的慢,比如下面 ...