Vue - 事件绑定
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 - 事件绑定的更多相关文章
- Vue事件绑定原理
Vue事件绑定原理 Vue中通过v-on或其语法糖@指令来给元素绑定事件并且提供了事件修饰符,基本流程是进行模板编译生成AST,生成render函数后并执行得到VNode,VNode生成真实DOM节点 ...
- vue事件绑定处理
事件监听指令 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码,通常是触发一个函数,简写@ <template> <div id="app" ...
- vue事件绑定
事件绑定 vue官方文档:<https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%A ...
- vue样式操作与事件绑定
Vue笔记 1 Vue实例 (VM) var vm = new Vue({ el:'#app', //挂载元素 //数据 data: { title:'值', ...
- Vue之事件绑定
Vue事件绑定 点击事件 @click="事件名" or v-on:click="事件名" 结构部分: <el-button type="pri ...
- vue for 绑定事件
vue for 绑定事件 <div id="pro_list" v-for="item in pro_list"> <div class=&q ...
- IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题
先上图: 可以看到输入框中的内容和弹出框的内容不一致, <input class="am-fr labRight" id="txcode" type=&q ...
- vue 基础重要组件 模板指令 事件绑定
组件:data methods watch new vue({ data:{ a:1, b:[] }, methods:{ dosomething:function(){ this.a++; } }, ...
- Vue之变量、数据绑定、事件绑定使用举例
vue1.html <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/19 ...
随机推荐
- 类别(Category)与扩展(Extensions)
一.类别(Category) 类别(Category)是一种可以为现有的类(包括类簇:NSString...,甚至源码无法获得的类)添加新方法的方式无需从现有的类继承子类.类别添加的新方法可以被子类继 ...
- highcharts饼状图使用案例
在公司由于需要对订单数据进行分析,故使用到了highcharts工具 <block name="Js"> <script type="text/java ...
- Hibernate连接mysql数据库的配置
<?xml version='1.0' encoding='utf-8'?> <!DOCTYPE hibernate-configuration PUBLIC "-//Hi ...
- LPC43xx系列使用IAP的注意事项
LPC43xx系列使用IAP的注意事项 Tags: LPC43xx IAP 单片机 LPC43xx IAP函数的调用 一般MCU的IAP是,厂商固化一段代码在芯片的某个区域,然后告诉你这个代码的入口地 ...
- Angular.js中使用$watch监听模型变化
$watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEqua ...
- using 声明与编译指令
using std::cout; // using 声明 using namespace std; // using 编译指令,导入std里面的所有名称 一般使用using 声明,它只会导入指定的名称 ...
- SDK,API,DLL名词解释
SDK (software devalopment kit) 软件开发工具包 : 一般都是一些软件工程师Wie特定的软件包.软件框架.硬件平台.操作系统等建立应用软件时的开发工具的集合. API (A ...
- js 控制文本只能输入数字
代码如下: <input onkeypress="setNumber()"><script> function setNumber(){ var keyCo ...
- java中 IndexOf()、lastIndexOf()、substring()的用法
public int indexof(String str)返回字符串中出现str的第一个位置 public int indexof(String str,int fromIndex)返回字符串中从f ...
- DIV+CSS中标签dl dt dd常用的用法
转自:http://smallpig301.blog.163.com/blog/static/9986093201010262499229/ < dl>< /dl>用来创建一个 ...