2--vue事件处理

作者: Daeeman | 来源:发表于2020-03-17 18:02 被阅读0次

2--vue事件处理
JS 事件
react事件处理
跨浏览器的事件处理程序
App事件中心
Chapter 07. Broadcast
iOS和Flutter里的事件处理
react文档——事件处理
DOM事件的问题！
2021-09-22 GUI(事件监听机制)

1. 事件绑定

v-on

v-on:事件名=“执行内容”
v-on:click=“num=1”
简写方法:
@事件名=""
@click="num=2"
当单击的时候设置num值为2

<div id="app">   
  <!-- <button v-on:click="flag=false">切换</button> -->
  <button @click="flag=!flag">切换</button>
  <p v-if="flag">武汉加油中国加油</p>
 <!-- 
  1.事件的绑定 v-on:事件名
  2.其实任意javascript的事件名都可以
  3.事件绑定的简写方式 @事件名=""
  默认flag =true
  第一次单击 flag=!flag     flag=!true      flag最终:false
  第二次次单击 flag=!flag   flag =!false    falg最终:true
  第三次单击 flag=!flag     flag=!true      flag最终:false
   ...
   实现了切换效果
  -->
</div>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el:"#app", 
        data:{  
           flag:true
        } 
    })
</script>

tab切换案例

<div id="app">   
   <button @click="num=1">vue</button> 
   <button @click="num=2">angular</button> 
   <button @click="num=3">react</button>
   <!-- 单击按钮实现修改 num的为1,2,3 -->
  <div v-if="num==1">vue内容</div>
  <div v-if="num==2">angular内容</div>
  <div v-if="num==3">react内容</div>
 <!-- 实现tab切换 -->
</div>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el:"#app", 
        data:{ num:1,//默认显示第几个div} 
    })

2.事件方法绑定

@click=“methods中的方法名”

@click=“say”
如果响应函数不带括号，默认会带$event事件参数
@click=“say()"
如果响应函数带括号无参()，默认不带$event事件参数
@click=say($event)" @click=say($event,'abc')"
如果带括号带参($event),手动指定事件参数

<div id="app">
    <button @click="say">问候</button>
    <button @click="say()">问候</button>   
    <button @click="say($event,'abc')">问候</button>
    <!-- 按钮点击一下 执行methods里面的 say方法 -->
</div>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el:"#app", 
        // 指定模板
        data:{  
            num:1,
        },
        // 数据中
        methods:{
            say(e,str){ //e为默认原生事件$event
                alert(str);
                console.log(e); // alert('你好vue');             
            }
        } // 方法中心        
    })
</script>

3. vue中的this指向

this在类中指向的是类的实例(new Vue)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">   
    <title></title>
</head>
<body>
<div id="app">  
   
<ul>
   <!-- 姓名:曾庆林--年龄:20岁 -->
   <li v-for="(item,index) in list" :key="index">
        姓名:{{item.name}}--年龄:{{item.age}}岁
        <button @click="deleteItem(item,index)">x</button>
   </li>
   <!-- 实现单击删除当前这行列表 (item当前列表数据 index当前列表下标) -->
</ul>
 
</div>
<script src="./js/vue.js"></script>
<script>
var vm= new Vue({
        el:"#app",         
        data:{  
            list:[
                {name:"mumu",age:18},
                {name:"zql",age:16},
                {name:"曾庆林",age:20},
            ]
        },  
        methods:{
            deleteItem(item,index){
                //this在类中指向的是 类的实例
                var ind = this.list.indexOf(item); //搜索item下标
                this.list.splice(ind,1); //从ind索引开始删除一个item对象
                }
        }      
        })
console.log(vm);    
</script>    
</body>
</html>

4. 表单绑定

v-model

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。

文本

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

<input placeholder="edit me">
Message is:

多行文本

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

Multiline message is:
<textarea placeholder="add multiple lines"></textarea>

在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。

表单修饰符

.lazy v-model默认只要是input事件就会触发视图更新, 添加 .lazy可以转变为使用change事件触发视图更新,进行同步。

<input v-model.lazy="msg"/>

.number把表单的值转换为Number数字类型

<input v-model.number="age" type="number"/>

.trim 自动过滤用户输入的首尾空白字符

<input v-model.trim="msg">

案例1-文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">   
    <title>表单绑定</title>
</head>
<body>
<div id="app"> 
     <h1>{{msg}}</h1>
     <input type="text" v-model="msg">
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
    el:"#app",         
    data:{  
        msg:'中国加油!'
    }, 
})    
</script>    
</body>
</html>

案例2-checkbox-多选(霸王条款)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">   
    <title>表单绑定-checkbox</title>
</head>
<body>
<div id="app"> 
      {{canDo}}
      <!-- 表单checkbox绑定，选中canDo为true未选中 -->
     <input type="checkbox" v-model="canDo"> 同意相关条款
     <button :disabled="!canDo">下一步</button>
     <!-- 属性绑定disabled值，当为true是表单不可用，为false表单可用 -->
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
    el:"#app",         
    data:{  
       canDo:false
    }, 
})    
</script>    
</body>
</html>

不勾选则禁用

霸王条款.png

案例3-checkbox-单选下拉选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">   
    <title>表单绑定-单选框和下拉</title>
</head>
<body>
<div id="app"> 
<h1>我的性别:{{sex}}</h1>
 <input type="radio" name="sex" value="男" v-model="sex"> 男 <br>
 <input type="radio" name="sex" value="女" v-model="sex"> 女 <br>
 <input type="radio" name="sex" value="密" v-model="sex"> 保密 <br>
 <h1>我的学历:{{level}}</h1>
 <select name="" id="" v-model="level">
     <option value="胎教">胎教</option>
     <option value="幼儿园">幼儿园</option>
     <option value="本科">本科</option>
     <option value="博士后">博士后</option>
 </select>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
    el:"#app",         
    data:{  
        sex:"男",
        level:'胎教'
    }, 
})   
</script>    
</body>
</html>

check.png

5. 简易计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">   
    <title>简单计算器</title>
</head>
<body>
<div id="app"> 
      <input type="text" v-model="v1"> 
      <select name="" id="" v-model="type">
          <option value="+">+</option>
          <option value="-">-</option>
          <option value="x">x</option>
          <option value="÷">÷</option>
      </select>
      <input type="text" v-model="v2"> 
      <button @click="cal">=</button>  
      {{v3}} 
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
    el:"#app",         
    data:{  
      v1:0,//第一个文本框的值
      v2:0,//第二个文本框的值
      v3:0,// 计算结果
      type:"+"//运算符号
    }, 
    methods:{
        cal(){
            if(this.type=="+"){this.v3 = this.v1*1+this.v2*1;}
            if(this.type=="-"){this.v3 = this.v1-this.v2;}
            if(this.type=="x"){this.v3 = this.v1*this.v2;}
            if(this.type=="÷"){this.v3 = this.v1/this.v2;}
        } // 单击实现结果计算。
    }
})    
</script>    
</body>
</html>

计算器-2（自动）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">   
    <title>简单计算器</title>
</head>
<body>
<div id="app"> 
      <input type="text" v-model="c.v1"> 
      <select name="" id="" v-model="c.type">
          <option value="+">+</option>
          <option value="-">-</option>
          <option value="x">x</option>
          <option value="÷">÷</option>
      </select>
      <input type="text" v-model="c.v2"> 
      <button @click="cal">=</button>  
      {{c.v3}} 
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
    el:"#app",         
    data:{  
      c:{v1:0,//第一个文本框的值
      v2:0,//第二个文本框的值
      v3:0,// 计算结果
      type:"+"//运算符号
      }
    }, 
    methods:{
        cal(){
            if(this.c.type=="+"){this.c.v3 = this.c.v1*1+this.c.v2*1;}
            if(this.c.type=="-"){this.c.v3 = this.c.v1-this.c.v2;}
            if(this.c.type=="x"){this.c.v3 = this.c.v1*this.c.v2;}
            if(this.c.type=="÷"){this.c.v3 = this.c.v1/this.c.v2;}
        }
        // 单击实现结果计算。
    },
    watch:{
         'c':{
            handler(nval,oval){
                console.log(nval,oval);
                this.cal();
            },
            deep:true,
        }          
    }
})
</script>    
</body>
</html>

6. 修饰符--事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.stop 停止事件冒泡
.prevent 阻止默认事件
.capture
.self
.once 只执行一次
.passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

2.1.4 新增

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。如果你还没有阅读关于组件的文档，现在大可不必担心。

2.3.0 新增

Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

7. 表单绑定修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">   
    <title>表单绑定修饰符</title>
</head>
<body>
<div id="app"> 
   <h1>{{v1}}</h1>
   <input type="text" v-model.number="v1">
   <input type="text" v-model.number="v2">
   {{v1+v2}}
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
    el:"#app",         
    data:{v1:0,v2:0 }, 
})    
</script>    
</body>
</html>

8. vue事件绑定的修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">   
    <title>事件绑定修饰符</title>
</head>
<body>    
<div id="app">  
   <!-- .prevent 阻止默认事件 -->
   <!-- .once 执行一次 -->
   <!-- .stop停止事件冒泡 -->
   <a href="http://www.baidu.com" @click.prevent="say">百度</a>
   <button @click.once="say">执行一次</button>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
    el:"#app",         
    data:{
 
    }, 
    methods:{
        say(){
            alert("百度");
        }
    } 
})    
</script>    
</body>
</html>

9. 按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

<input v-on:keyup.page-down="onPageDown">

在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。

按键码

keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。

使用 keyCode attribute 也是允许的：

<input v-on:keyup.13="submit">

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。

你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

系统修饰键

2.1.0 新增

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift
.meta

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 ()。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

例如：

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。

`.exact` 修饰符

2.5.0 新增

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

鼠标按钮修饰符

2.2.0 新增

.left
.right
.middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

这个 .passive 修饰符尤其能够提升移动端的性能。

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

10. 美妙清单简单版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">   
    <title>美妙清单</title>
</head>
<body>    
<div id="app"> 
    <h1>美妙清单</h1> 
    <input type="text"  v-model="temp" @keyup.enter="addItem"/> 
    <!-- 给input绑定 键盘弹起事件 事件修饰符-按键修饰符enter指enter键 
    .enter               .tab                  .delete (捕获“删除”和“退格”键)
    .esc                 .space                .up
    .down                .left                   .right   -->
    <button @click="addItem">添加</button> 
    <ul>
        <li v-for="(item,index) in list" :key="index">
            {{item}}  <button @click="delItem(item)">删除</button>
        </li>
    </ul>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
    el:"#app",         
    data:{ list:['vue','react'],temp:''}, 
    // list 显示的数据
    // temp临时要被添加的数据 和input绑定
    methods:{
        delItem(item){
            let ind = this.list.indexOf(item);
            // 查找item在list数组中的下标位置 如果没有item 返回-1
            this.list.splice(ind,1);
            // 删除list数组中数据从ind个删除1个
        },
        addItem(){
            // 添加数据
            this.list.unshift(this.temp);
            //  把和input绑定的数据temp 添加到list的最前面
            this.temp = "";
            //  添加完毕清空input表单内容；
        }
    }
})    
</script>    
</body>
</html>

11. 表格案例（添加删除功能）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">   
    <title>表格案例</title>
</head>
<body>    
<div id="app">  
    <div class="add">
        编号: <input type="text" v-model="temp.no"><br>
        商品名称 <input type="text" v-model="temp.name"><br>
        <button @click="add()">添加</button>
    </div>

    <table border="1" width="800">
        <tr>
            <th>编号</th>
            <th>品牌名称</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item,index) in list" :key="index">
            <td>{{item.no}}</td>
            <td>{{item.name}}</td>
            <td>{{item.time}}</td>
            <td> <a href="javascript:void(0)" @click="delItem(item)">删除</a></td>
        </tr>
    </table>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
    el:"#app",         
    data:{
        // 临时添加内容绑定到表单上面
        temp:{
           no:"",
           name:"",
           time:""
        },
        list:[
            {no:1,
            name:"宝马",
            time:"2017-12-27 16:26"
            },
            {no:2,
            name:"奔驰",
            time:"2017-12-27 16:26"
            },
        ]
    }, 
    methods:{
        delItem(item){
            let ind = this.list.indexOf(item);
            this.list.splice(ind,1);
        },
        add(){
            var d = new Date();
            this.temp.time = d.toLocaleDateString()+d.toLocaleTimeString();
            // temp time值为 本地的日期字符串+本地的时间字符
            // this.list.unshift({...this.temp});
            this.list.unshift({...this.temp})
            // 把表单的数据添加到 list最前面
            // 清空表单数据
            this.temp.no='';
            this.temp.name='';
            this.temp.time='';
        }
    }  
})    
</script>    
</body>
</html>

12. 值类型与引用类型 (回顾)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">   
    <title>复习 值类型与引用类型</title>
</head>
<body>    
 
<script>
  // 对象，数组         引用类型       复杂数据类型
  // 字符串-数字-布尔   值类型         简单数据类型
  var list = [{name:"mumu"},{name:"zql"}];
 /*  //  引用类型存储的变量 是内存中的一个引用地址
  var obj = {name:"曾庆林"};
  list.push(obj);
  obj.name="zengqinglin";
  console.log(list);//[{name:"mumu"},{name:"zql"},{name:"zengqinglin"}] 
/*  复杂数据类型obj发生改变时候 list内引用obj的数据也会随之变化 */ 
  var  obj=18;//18是数字，是一个简单的数据类型，
  list.push(obj);
  obj=50;
// console.log(list);//[{name:"mumu"},{name:"zql"},18]
/*  简单数据类型obj发生改变时候 list内引用obj的数据不会发生改变 */
</script>    
</body>
</html>

2--vue事件处理
1. 事件绑定 v-on v-on:事件名=“执行内容” v-on:click=“num=1”简写方法: @事件名...
JS 事件
目录事件流事件处理程序HTML事件处理程序DOM0级事件处理程序DOM2级事件处理程序IE事件处理程序跨浏览器...
react事件处理
一,事件处理写法:on+事件名称= {事件处理函数} 类组件触发写法on+事件名称 = 事件处理函数 ---...
跨浏览器的事件处理程序
事件处理程序有DOM0级事件处理程序、DOM2级事件处理程序，IE事件处理程序，DOM0级事件处理程序具有简单，跨...
App事件中心
App事件中心，事件的的生产端和处理端分离，事件处理结果广播通知，事件状态（初始化、处理中和处理完成）管理，事件类...
Chapter 07. Broadcast
阅读原文 7.1 . 理论概述广播事件处理属于系统级的事件处理(一般事件处理是属于View级的事件处理) 一个应...
iOS和Flutter里的事件处理
目录先说一下事件处理里的被处理者：事件一、iOS里的事件二、Flutter里的事件然后说一下事件处理里的处理者：响...
react文档——事件处理
事件处理 React 元素的事件处理和 DOM 元素的事件处理非常相似。但也有一些语法差异： React 事件使用...
DOM事件的问题！
1.事件冒泡 2.事件捕获事件处理程序 1.HTML事件处理程序 2.DOM 0级事件处理程序 3.DOM 2级...
2021-09-22 GUI(事件监听机制)
事件监听机制组成事件源（组件）事件（Event）监听器（Listener）事件处理（引发事件后处理方式）事件监听...

2--vue事件处理

1. 事件绑定

2.事件方法绑定

3. vue中的this指向

4. 表单绑定

v-model

文本

多行文本

表单修饰符

5. 简易计算器

计算器-2（自动）

6. 修饰符--事件修饰符

7. 表单绑定修饰符

8. vue事件绑定的修饰符

9. 按键修饰符

按键码

系统修饰键

`.exact` 修饰符

鼠标按钮修饰符

10. 美妙清单简单版

11. 表格案例（添加删除功能）

12. 值类型与引用类型 (回顾)

相关文章

2--vue事件处理

JS 事件

react事件处理

跨浏览器的事件处理程序

App事件中心

Chapter 07. Broadcast

iOS和Flutter里的事件处理

react文档——事件处理

DOM事件的问题！

2021-09-22 GUI(事件监听机制)

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读