在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码，下面我们就简单聊聊Vue.js中的监听事件是怎么处理的。

在vue.js中监听事件是通过v-on指令来实现的，先看一下简单的监听事件代码。

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript"  src="vue.js"></script>

 </head>

 <body>

 <div id="app">

    <button v-on:click="count += 1">点击测试</button>

     <p>这个按钮被点击了{{count}}次</p>

 </div>

 </body>

 <script>

     var vm = new Vue({

         el:"#app",

         data:{

             count:0

         }

     })

 </script>

 </html>

下面再看看监听方法事件的代码示例

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript"  src="vue.js"></script>

 </head>

 <body>

 <div id="app">

    <button v-on:click="test">点击测试</button>

 </div>

 </body>

 <script>

     var vm = new Vue({

         el:"#app",

         data: {

             name: 'Vue.js'

         },

         // 在 `methods` 对象中定义方法

         methods: {

             test: function (event) {

                 // `this` 在方法里指当前 Vue 实例

                 alert('Hello ' + this.name + '!')

                 // `event` 是原生 DOM 事件

                 alert(event.target.tagName)

             }

         }

     })

 </script>

 </html>

内联处理器方法，内联javaScript语句

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript"  src="vue.js"></script>

 </head>

 <body>

 <div id="app">

    <button v-on:click="say('say hello')">say hello</button>

     <button v-on:click="say('say goodbye')">say goodbye</button>

 </div>

 </body>

 <script>

     var vm = new Vue({

         el:"#app",

         data: {

             name: 'Vue.js'

         },

         // 在 `methods` 对象中定义方法

         methods: {

             say:function(message){

                 alert(message)

             }

         }

     })

 </script>

 </html>

vue v-on监听事件的更多相关文章

  1. Vue的watch监听事件

    Vue的watch监听事件 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  2. Vue子组件监听事件中传递参数的方法

    在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...

  3. Vue 为什么在 HTML 中监听事件?

    为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念.不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑 ...

  4. Vue自定义事件,$on(eventName) 监听事件,$emit(eventName) 触发事件

    <!--自定义事件 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件--> <div id="app15"> ...

  5. Vue Element-ui 框架：路由设置 限制文件类型 表单验证 回车提交 注意事项 监听事件

    1.验证上传文件的类型: (1)验证图片类型 <template> <el-upload class="avatar-uploader" action=" ...

  6. vue 中监听窗口发生变化，触发监听事件， window.onresize && window.addEventListener('resize'，fn) ，window.onresize无效的处理方式

    // 开始这样写,不执行 window.onresize = function() { console.log('窗口发生变化') } // 改成window监听事件 window.addEventL ...

  7. vue(一)--监听事件

    1.vue-on:监听事件: demo:点击按钮,number+1 v-on 还可以缩写为 @ 2.事件修饰符 .stop:等同于JavaScript中的event.stopPropagation() ...

  8. Android中Button的五种监听事件

    简单聊一下Android中Button的五种监听事件: 1.在布局文件中为button添加onClick属性,Activity实现其方法2.匿名内部类作为事件监听器类3.内部类作为监听器4.Activ ...

  9. Second Day: 关于Button监听事件的三种方法（匿名类、外部类、继承接口）

    第一种:通过匿名类实现对Button事件的监听 首先在XML文件中拖入一个Button按钮,并设好ID,其次在主文件.java中进行控件初始化(Private声明),随后通过SetOnClickLis ...

随机推荐

  1. 【BZOJ4325】NOIP2015 斗地主 搜索+剪枝

    [BZOJ4325]NOIP2015 斗地主 Description 牛牛最近迷上了一种叫斗地主的扑克游戏.斗地主是一种使用黑桃.红心.梅花.方片的A到K加上大小王的共54张牌来进行的扑克牌游戏.在斗 ...

  2. do not use numbers as enumeration values

    w 字段类型设置错误 有限元的判断,勿用枚举行. MySQL :: MySQL 5.7 Reference Manual :: 12.4.4 The ENUM Typehttps://dev.mysq ...

  3. ECMAScript6箭头函数ArrowFunction"=>"

    一.说明 ECMAScript6可以用箭头"=>"定义函数.x => x * x或(x) => {return x * x;}与匿名函数function(x){r ...

  4. hadoop学习（一）概念理解

    1.概念 1.1什么是hadoop? hadoop 是大数据存储和处理的框架,主要组成为文件存储系统hdfs和分布式计算框架mapreduce. 1.2能做什么,擅长做什么,不擅长做什么? 1.2.1 ...

  5. python中json.dumps使用的坑以及字符编码

    我们知道,python中的字符串分普通字符串和unicode字符串,一般从数据库中读取的字符串会自动被转换为unicode字符串 下面回到重点,使用json.dumps时,一般的用法为: >&g ...

  6. C# 函数2

    //读写INI     public class GF_INI     {         [DllImport("kernel32")]         private stat ...

  7. javascript高级语法三

    一.js的正则表达式 1.什么是正则表达式 正则表达式(regular expression)是一个描述字符模式的对象,ECMAScript的RegExp类表示正则表达式,而String和RegExp ...

  8. 剑指offer 面试32题

    面试32题: 题目:从上到下打印二叉树 题:不分行从上到下打印二叉树 解题代码: # -*- coding:utf-8 -*- # class TreeNode: # def __init__(sel ...

  9. CS224n学习资源汇总

    一.课程网站: http://web.stanford.edu/class/cs224n/archive/WWW_1617/index.html 二.视频(中文字幕) http://www.mooc. ...

  10. ASP.NET,什么是MVC,MVC的简单介绍

    什么是MVC模式 MVC(Model-View-Controller,模型—视图—控制器模式)用于表示一种软件架构模式.它把软件系统分为三个基本部分:模型(Model),视图(View)和控制器(Co ...