在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. php cmd 不能利用$_COOKIE 的处理 通过文件来暂存字符串

    路径 <?php define('CMDPATH', 'wD:\cmd\\'); echo CMDPATH; die(); broswer 路径无问题 w 读 用 <?php $wfile ...

  2. Windows下批处理文件(.bat)的使用

    cmd文件和bat文件的区别:在本质上两者没有区别,都是简单的文本编码方式,都可以用记事本创建.编辑和查看.两者所用的命令行代码也是共用的,只是cmd文件中允许使用的命令要比bat文件多.cmd文件只 ...

  3. jQuery方法find()与children()区别

    一.find() 1.1 说明 find()方法返回被选元素的后代元素,一路向下直到最后一个后代. 1.2 示例 <div> <p> <span>1</spa ...

  4. PHP-Heredoc用法:<<<EOFEOF;

    Heredoc,用来输出大段的HTML和JavaScript <<<EOF后面不能有空格. EOF;末尾的结束符必须靠边,并且前面不能有空格和缩进符. 例如: $mazey=< ...

  5. 为什么一定要调用 setlocale 呢？ 因为在 C/C++ 语言标准中定义了其运行时的字符集环境为 "C" ，也就是 ASCII 字符集的一个子集。使用setlocal改变整个应用程序的字符集编码方式（wcstombs使用前要设置 setlocale (LC_ALL, "chs"); ）

    setlocale 配置地域化信息. 语法: string setlocale(string category, string locale); 返回值: 字符串 函数种类: 操作系统与环境   内容 ...

  6. Facebook背后的软件

    Facebook的数据规模使得很多传统的解决方案根本不适用,或者无法分解来处理.保持一个拥有5亿用户的系统一直稳定可靠的运行,并不是一件很容易的事情.这篇文章介绍了一下Facebook使用的软件. F ...

  7. 安装VS2013 2015 需要IE10浏览器 跳过的方法

    安装VS2013 如果浏览器版本较旧的话会提示要求你更新到IE10版本,很麻烦,那么我们如何跳过呢? 复制下面代码粘贴到文本文档里,修改文本txt后缀为bat,右键管理员运行. @ECHO OFF   ...

  8. 脉冲神经网络及有监督学习算法Tempotron

    接下来一段时间开启脉冲神经网络模型的探索之旅.脉冲神经网络有更强的生物学基础,尽可能地模拟生物神经元之间的连接和通信方式.其潜在能力较强,值得踏进一步探索. 构建脉冲神经网络模型,至少需要考虑三点:1 ...

  9. Docker基础入门实践

    原文地址 基本概念 Docker三个基本概念 镜像(Image) 容器(Container) 仓库(Repository) 镜像 镜像可以理解为只读模板,如包含一个centos操作系统环境 容器 Do ...

  10. Python 2 一些实用模块的使用

    time模块,sys模块,os模块,random模块, shutil模块, json & pickle 模块,re模块 time模块: 在Python中,通常有这几种方式来表示时间:1)时间戳 ...