在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. js 日期加一天

    经常在js 重要做时间加一的处理记录一下 ps:时间格式为:'2017-03-30' 一:源码: //时间加一天 function addDate(date, days) { if (days == ...

  2. Exponentiation(高精度大数)

    Exponentiation Description Problems involving the computation of exact values of very large magnitud ...

  3. 关于string的replace方法

    今天写代码遇见一个小问题,就是当string  a,b,c,d当腰删除b的时候如果replace(“a”,"");会造成,b,c,d   所以得replace("a&qu ...

  4. IntelliJ IDEA For Mac 快捷键 [转]

    Mac键盘符号和修饰键说明 ⌘ Command ⇧ Shift ⌥ Option ⌃ Control ↩︎ Return/Enter ⌫ Delete ⌦ 向前删除键(Fn+Delete) ↑ 上箭头 ...

  5. 巨蟒django之CRM5 学习记录&&课程记录&&班级管理&&私户的数量上限

    1.公户变私户(事务+行级锁) 2.私户的数量上限 3.班级的管理 4.课程记录管理 5.学习记录的初始化 6.展示和编辑学习记录

  6. Markov Process

    w Markov Process -- from Wolfram MathWorld  http://mathworld.wolfram.com/MarkovProcess.html 谷歌背后的数学_ ...

  7. 根据字段表 自动创建 表SQL

    create PROC CreateTableSql ) AS ) ,) ,) ) ,) ,) ,@IsIdentity bit ,@IsNull bit ,@IsPrimaryKey bit ),) ...

  8. MySql 的备份与恢复

    1. 数据库导出 SQL 脚本 mysqldump -u 用户名 -p 密码 数据库名称>生成的脚本文件路径 示例: mysqldump -uroot -p 123 mydb1>/User ...

  9. 介绍一下Python中webbrowser的用法？

    webbrowser模块提供了一个高级接口来显示基于Web的文档,大部分情况下只需要简单的调用open()方法.webbrowser定义了如下的异常:exception webbrowser.Erro ...

  10. [转载]分布式session处理方案

    伴随网站业务规模和访问量的逐步发展,原本由单台服务器.单个域名的迷你网站架构已经无法满足发展需要. 此时我们可能会购买更多服务器,并且启用多个二级子域名以频道化的方式,根据业务功能将网站分布部署在独立 ...