1、内联方式:

A:将事件处理器绑定到一个方法中,以下所有事件都以click事件作为案例

注意:内联方式下事件处理器只能绑定一个方法,要是想要绑定多个方法,依旧还是使用js中的addEventListener方法进行绑定

B:与原生的js类似,不仅可以绑定到一个方法上,还可以使用内联js语句

2、点击事件绑定的方法,在Vue实例中,存放在method属性中

注意:methods中定义的方法内的this始终指向创建的Vue实例中

3、$event的应用:需要访问元素DOM事件,用其传入方法中

4、事件处理器中的修饰符

A:使用串联

B:只有修饰符而不绑定事件

C:.prevent  ==>  event.prventDefault()

   .stop ==> event.stopPropagation()

   .capture ==> 表示添加事件侦听器时采用capture即捕获模式

  .self ==> 表示只当事件在该元素本身(而不是子元素)触发时触发回调

5、按键事件

6、v-on变更

Vue - 事件绑定的更多相关文章

  1. Vue事件绑定原理

    Vue事件绑定原理 Vue中通过v-on或其语法糖@指令来给元素绑定事件并且提供了事件修饰符,基本流程是进行模板编译生成AST,生成render函数后并执行得到VNode,VNode生成真实DOM节点 ...

  2. vue事件绑定处理

    事件监听指令 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码,通常是触发一个函数,简写@ <template> <div id="app" ...

  3. vue事件绑定

    事件绑定 vue官方文档:<https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%A ...

  4. vue样式操作与事件绑定

    Vue笔记 1 Vue实例 (VM) var vm = new Vue({    el:'#app', //挂载元素        //数据    data: {        title:'值', ...

  5. Vue之事件绑定

    Vue事件绑定 点击事件 @click="事件名" or v-on:click="事件名" 结构部分: <el-button type="pri ...

  6. vue for 绑定事件

    vue for 绑定事件 <div id="pro_list" v-for="item in pro_list"> <div class=&q ...

  7. IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题

    先上图: 可以看到输入框中的内容和弹出框的内容不一致, <input class="am-fr labRight" id="txcode" type=&q ...

  8. vue 基础重要组件 模板指令 事件绑定

    组件:data methods watch new vue({ data:{ a:1, b:[] }, methods:{ dosomething:function(){ this.a++; } }, ...

  9. Vue之变量、数据绑定、事件绑定使用举例

    vue1.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...

随机推荐

  1. nodejs net模块

    net模块是同样是nodejs的核心模块.在http模块概览里提到,http.Server继承了net.Server,此外,http客户端与http服务端的通信均依赖于socket(net.Socke ...

  2. mysql基于“时间”的盲注

    无需页面报错,根据页面响应时间做判断! mysql基于时间的盲注 =================================================================== ...

  3. window.event.srcElement与window.event.target 触发事件的元素

    IE浏览器支持window.event.srcElement , 而firefox支持window.event.target:<input type="text" onblu ...

  4. touch

    Linux touch 命令   在 Linux 下运用 touch 命令创建一个空文件.当然我们也可以使用其他命令例如 vi, nano 或是任意一个编辑工具来实现.但是你可能需要更多的步骤来完成操 ...

  5. OPP Services Log

    SELECT FCPP.CONCURRENT_REQUEST_ID REQ_ID, FCP.NODE_NAME, FCP.LOGFILE_NAME  FROM FND_CONC_PP_ACTIONS ...

  6. 在Azure虚拟机上安装VNC

    我们知道,Azure提供的linux虚拟机镜像是没有桌面的,是base版的,大多情况下能满足绝大部分工作需要,甚至很多习惯使用命令行的读者,反而用不惯带桌面的linux OS,但是有些情况下,桌面还是 ...

  7. php使用openssl进行Rsa长数据加密(117)解密(128) 和 DES 加密解密

    PHP使用openssl进行Rsa加密,如果要加密的明文太长则会出错,解决方法:加密的时候117个字符加密一次,然后把所有的密文拼接成一个密文:解密的时候需要128个字符解密一下,然后拼接成数据. 加 ...

  8. 常用ubuntu命令

    解压缩.7z sudo apt-get install p7zip-full 7z x PACKAGE.7z 查看图片 eog A.png 关闭打开触摸板(触点) sudo rmmod psmouse ...

  9. sublime自动生成头部注释

    1.在tool->new snippet-创建一个新的snippet sublime text2 用snippet 创建文件头部信息 Snippets are smart templates t ...

  10. 《PHP数组函数》笔记

    ① in_array() 检查数组中是否存在某个值;有两个参数,第一个参数是要查找的值,第二个参数是数组名,返回值为布尔,找到则ture否则false; ② array_search 在数组中搜索给定 ...