vue.js 事件绑定

来源:http://www.chinese-glasses.com 作者:Web前端 人气:176 发布时间:2020-03-24
摘要:时间: 2019-11-07阅读: 144标签: 事件1.添加事件监听 v-on 1、列表渲染 (1)使用v-on指令可以添加事件监听,语法:v-on:eventName="fn" 也可以简写成@:eventName="fn"(2)参数:$event就是当前触发事件的元

时间: 2019-11-07阅读: 144标签: 事件1.添加事件监听 v-on

1、列表渲染

(1)使用v-on指令可以添加事件监听,语法:v-on:eventName="fn" 也可以简写成 @:eventName="fn"(2)参数:$event就是当前触发事件的元素,即使不传$event,在回调函数中也可以使用event这个参数

①   v-for  — 根据一组数组的选项列表进行渲染;

基本使用:

语法: value,key in items

div  button v-on:click="test"点我/button button v-on:click="test2('hello vue')"点我2/button button v-on:click="test3($event)"点我3/button button v-on:click="test4"点我4/button/div

methods: { test() { console.log('hi'); }, test2(content) { console.log(content); }, test3(event) { console.log(event.target); }, test4(){ //即使不传$event,在回调函数中也可以使用event这个参数 console.log(event.target.innerText); }}

           value,key of items

其他事件:

如:v-for =  “item in items”     items指源数据数组; item指数组元素的每一项

body div  !-- 点击事件 -- button @click="testClick"点我/button !-- input事件 -- input type="text" @input="testInput" !-- change事件 -- select @change="testChange" option value="020"广州/option option value="021"上海/option /select /div/bodyscript new Vue({ el:"#app", data:{}, methods:{ testClick(){ console.log('Click') }, testInput(){ console.log('Input') }, testChange(){ console.log('Change') } } })/script

②   变异方法 — vue提供了一组方法对数组进行操作时候会触发视图更新

2.事件修饰符

push();                                splice();

shift();                                 sort();

unshift();                            reverse();

事件修饰符用来控制事件的冒泡和默认行为,共有2个:.stop:阻止事件冒泡.prevent:阻止默认事件

2、事件处理器

1、v-on — 用来监听DOM事件触发代码;

语法:v-on:eventName=“eventHandle”;

事件处理函数写在methods中统一管理;

事件对象($event)在事件处理函数中获取,内联事件处理函数执行传入事件对象;

注意:

① 当 v-on:eventName=“eventHandle(abc)”;函数名加括号传参时,如 eventHandle(ev){},ev不是事件对象而是传入的参数;如果还需要事件对象需要手动添加,如v-on:eventName=“eventHandle(abc,$event)eventHandle(message,ev){}

② 事件处理函数中的this指向的是当前这个根实例;

基本使用:

3、事件修饰符

事件处理函数只是纯粹的逻辑判断,不处理DOM事件的细节,例如阻止冒泡、取消默认行为、判断按键等

① 修饰符的位置  v-on:eventName.修饰符   通过由点(.)表示的指令后缀来调用修饰符;

② 修饰符

.shop    // 阻止冒泡                                   .prevent       // 取消默认行为

.capture                                                   .self

.once   // 执行一次

按键修饰符

.space                                                       .up

.down                                                        .left

.right                                                         .esc

.enter       //回车                                        .tab

.delete                                                       .alt

.shift                                                          .meta

.键位

!-- 阻止事件冒泡 --div @click="test" div @click.stop="test2"/div/div!-- 阻止默认事件,点击a链接不会发生跳转,只会执行test方法的代码 --a href="" @click.prevent="test"百度一下/a

4、条件渲染

v-show 指令 — 根据表达式的值,用来显示和隐藏元素;

语法:v-show=“表达式”;

元素会被渲染在页面中,中根据表达式的值进行css的切换;

5、动态class(动态绑定class)

class为元素的属性,也可以使用v-bind:class

语法:  : class=“{className:表达式}”;

注意:表达式的值为true,添加className;表达式的值为false,不添加className;

:class=“[className,classname]”;

   

3.按键修饰符

本文由10bet发布于Web前端,转载请注明出处:vue.js 事件绑定

关键词:

最火资讯