在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. 原文来自 url get

    w http://www.tuicool.com/articles/BvYbEvR http://36kr.com/p/5069371.html?utm_source=tuicool&utm_ ...

  2. SQLServer与ASP中DATEDIFF函数区别

    一.SQLServer: 格式: DATEDIFF(interval,startdate,enddate) interval参数: 年-yy,yyyy 季度-qq,q 月-mm,m 年中的日-dy,y ...

  3. python 元类metaclass

    文章转自:http://www.cnblogs.com/linhaifeng/articles/8029564.html 一 知识储备 exec:三个参数 参数一:字符串形式的命令 参数二:全局作用域 ...

  4. 简述OSI七层协议模型、TCP/IP四层模型和五层协议之间的关系

    一.OSI七层模型 OSI七层协议模型主要是:应用层(Application).表示层(Presentation).会话层(Session).传输层(Transport).网络层(Network).数 ...

  5. 重写toString方法

    当你要读取关于对象的一些有用细节时,可以在对象上调用toString(). 如,当把一个对象引用传递给System.out.println();时,该对象的toString()方法被调用. Java中 ...

  6. 4.3 使用STM32控制MC20进行GPRS通讯

    需要准备的硬件 MC20开发板 1个 https://item.taobao.com/item.htm?id=562661881042 GSM/GPRS天线 1根 https://item.taoba ...

  7. javascript高级语法三

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

  8. 异常：System.Runtime.InteropServices.Marshal.GetTypeFromCLSID(System.Guid)

    异常:System.Runtime.InteropServices.Marshal.GetTypeFromCLSID(System.Guid) 原因:该引用所需.NET Framework版本为4.5 ...

  9. iOS 认识runtime 中的三个指针 isa , IMP , SEL

    runtime中函数调用经常被提及的三个概念 isa,IMP,SEL 一  isa:是类指针,之所以说isa是指针是因为Class其实是一个指向objc_class结构体的指针,而isa 是它唯一的私 ...

  10. mybatis中collection和association的作用以及用法

    deptDaoMapper.xml 部门对应员工(1对多的关系) <resultMap type="com.hw.entity.Dept" id="deptinfo ...