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. 如何使用FileZilla上传和下载文件

    一.使用FileZilla上传文件 1 打开 FileZilla 按照如下图所示,填写远程 Linux 的 IP ,用户名,密码,还有端口号(默认22) 2 选中左边需要上传的文件,然后拖到右边,等待 ...

  2. 搭建Apache Web服务器

    1.下载Apache服务器的安装包 地址:http://httpd.apache.org/download.cgi 从http://archive.apache.org/dist/httpd/bina ...

  3. apache 配置rewrite模块,URL中隐藏index.php

    打开httpd.conf 去掉下面的井号 #LoadModule rewrite_module modules/mod_rewrite.so把前面的警号去掉 在网站根目录添加.htaccess Rew ...

  4. 预处理命令[#define]说明

    宏定义 宏定义是对一些常见的变量.字符串等进行定义,被定义的数据在编译会进行自动替换.有时一些变量或字符串被多次使用,当需要修改时,就需要对源文件中它们出现的地方一一修改,效率比较低,而通过宏定义,只 ...

  5. Volley框架使用笔记

    1.初始化请求队列 RequestQueue RequestQueue queue= Volley.newRequestQueue(context); 2.StringRequest 网络请求 Get ...

  6. 【转】Inode详解

    Inode详解 转自: Inode详解   一.inode是什么 理解inode,要从文件储存说起. 文件储存在硬盘上,硬盘的最小存储单位叫做"扇区"(Sector).每个扇区储存 ...

  7. JavaFx导出文件

    导出文件格式可选 protected void handExportDateAction(ActionEvent event) { // ShowDialog.showConfirmDialog(FX ...

  8. 提交按钮ajax方式

    function doSubmit2(){ $("#formobj").form("submit", { url : "sjsCorporationC ...

  9. ORA-00257:archiver error解决办法

    出现ORA-00257错误(空间不足错误),通过查找资料,绝大部分说这是由于归档日志太多,占用了全部的硬盘剩余空间导致的,通过简单删除日志或加大存储空间就能够解决. (一).oralce 11g更改归 ...

  10. UIButton无法响应点击事件

    一.问题描述 因为项目需要,需要UITableView上添加固定的筛选表头,一直固定,不能随UITableView滚动.所以直接将表头与UITableView分离,将它添加到控制器的UIView上,即 ...