在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. IIPP迷你项目（二）"Guess the Number!"

    本来这个程序是早就编完了的,一直没时间发布博客.时至今日已时隔多天,也算是复习一下事件驱动型编程的过程吧. 1 事件驱动型编程 本质上这次的作业是披着猜数字皮的图形化界面编程,好在 simplegui ...

  2. 安装mysql报错—解决方法：error while loading shared libraries: libssl.so.6

    for 32bit ln -sf /usr/lib/libssl.so.10 /usr/lib/libssl.so.6ln -sf /usr/lib/libcrypto.so.10 /usr/lib/ ...

  3. CSS 关于让页面的高度达到电脑屏幕的底部

    .sidebar:before {content: "";display: block;width: 190px;position: fixed;bottom: 0;top: 0; ...

  4. influxDB选择类函数

    1)TOP()函数 作用:返回一个字段中最大的N个值,字段类型必须是长整型或float64类型. 语法: SELECT TOP(<field_key>[,<tag_keys>] ...

  5. 巨蟒python全栈开发django6: FBV&CBV&&单表查询的其他方法

    练习CBV用法 截图中的action="/cbv/",应该是这样 上边红图,说明mysql有问题,需要重启一下 返回,输入的内容 @wrapper==>cbv=wrapper ...

  6. Jquery Ajax Json ashx 实现前后台数据传输

    经过一个多星期的研究,各种查找资料终于自己实现了Jquery  Ajax Json ashx 的前后台数据交流功能 首先一点,Ajax只能对应一个ashx文件,多余两个,如果打开异步传输的async: ...

  7. 通过margin负值去除padding

    .pay-type { // 图片布局前通过margin负值去除padding margin: 0 -@page-padding-horizontal; display: inline-flex; } ...

  8. 【python】-- Django ORM（基础）

    Django ORM(基础) Django 框架十分强大,自带数据库操作功能.Django 跟 SQLAchemy 一样,也是通过ORM(Object Relational Mapping,关系对象映 ...

  9. hexo+yilia页脚添加总访问量

    个人博客:https://www.yuehan.online 现在博客:http://www.wangyurui.top 脚本方法使用不蒜子计数 安装脚本 要使用不蒜子(官网:http://busua ...

  10. PyQt4 颜色选择，字体选择代码

    # -*- coding: utf-8 -*- """ ------------------------------------------------- File Na ...