为什么在 HTML 中监听事件?

你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念。不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护上的困难。实际上,使用 v-on 有几个好处:

  1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

  2. 因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。

  3. 当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。

Vue 为什么在 HTML 中监听事件?的更多相关文章

  1. 关于AngularJs中监听事件及脏循环的理解

    可能很多刚入行或者刚学习的前端对于AngularJs中的一些事件或者概念感觉不理解或者没有思路,今天让我们一起来剖析一下AngularJs中的一些事件. AngularJs中对于的监听事件会用到一个s ...

  2. vue v-on监听事件

    在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码,下面我们就简单聊聊Vue.js中的监听事件是怎么处理的. 在vue.js中监听事件是通过v-on指令来实现的,先看一下 ...

  3. Android 监听事件

    安卓中监听事件的三种实现方式 1.匿名内部类的实现方式 2.独立类的实现方式 3.实现接口方式实现 一.匿名内部类的实现 1.首先声明一个Button //声明一个Button private But ...

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

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

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

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

  6. vue 定义全局函数,监听android返回键事件

    vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...

  7. Vue的watch监听事件

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

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

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

  9. 在vue中监听storage的变化

    1.首先在main.js中给Vue.protorype注册一个全局方法,其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage’,然后创建一个StorageEv ...

随机推荐

  1. [译]git status

    git status git status命令能展示工作目录和stage区的状态. 使用他你能看到那些修改被staged到了, 哪些没有, 哪些文件没有被Git tracked到. git statu ...

  2. (免量产,免格式化)手动将PE安装到移动硬盘/U盘或无系统硬盘!

    在一台没有装系统的电脑上,只要把XP系统启动文件,及引导菜单文件(ntldr,boot.ini,”bootfont.bin这个可有可无,主要作用是显示中文菜单”)和GRUB引导文件和PE系统文件复制到 ...

  3. Effective Java 学习笔记之创建和销毁对象

    一.考虑用静态工厂方法代替构造器 1.此处的静态工厂方法是指返回指为类的对象的静态方法,而不是设计模式中的静态工厂方法. 2.静态工厂方法的优势有: a.使用不同的方法名称可显著地表明两个静态工厂方法 ...

  4. iOS开发——UI进阶篇(六)键盘处理

    一.键盘通知我们经常需要在键盘弹出或者隐藏的时候做一些特定的操作,因此需要监听键盘的状态 键盘状态改变的时候,系统会发出一些特定的通知UIKeyboardWillShowNotification // ...

  5. ubuntu安装python一些安装包

    sudo apt-get install python-pip sudo pip install distribute sudo pip install nose sudo pip install v ...

  6. trigger() & bind() 使用心得

    trigger(type) 在每一个匹配的元素上触发某类事件. 返回值:jQuery 参数: type (String): 要触发的事件类型 示例: $("p").trigger( ...

  7. Laravel5.1-错误和日志

    简介 这一章也是属于文档写得比较混乱的一章,所以我决定重新组织一下内容结构: 配置 debug配置 我们都知道,开发环境应该把debug打开,生产环境应该把debug关闭:这个设置在config/ap ...

  8. TP中的四种url访问方式

    什么是PATHINFO:就是http://localhost/index.php/Home/Index/index/a/1/b/2?c=3中的红色部分, 注意c=3并不是pathinfo的一部分,它是 ...

  9. (转)一个JavaWeb项目开发总结

    原文地址:http://www.cnblogs.com/lzb1096101803/p/4907775.html 一.学会如何读一个JavaWeb项目源代码 步骤:表结构->web.xml-&g ...

  10. vmware vcenter orchestrator configuration提示“用户名密码错误或登录失败超过次数被锁定”

    首次登录,使用默认用户密码登录vmware/vmware vmware vcenter orchestrator configuration提示"用户名密码错误或登录失败超过次数被锁定&qu ...