zoukankan      html  css  js  c++  java
  • VUE-04 事件

    原生:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4   <meta charset="UTF-8">
     5   <title>事件</title>
     6 </head>
     7 <body>
     8 
     9 <div onclick="fn()" id="btn">点我</div>
    10 
    11 <script>
    12   function fn(){
    13     alert(1);
    14   }
    15   console.log(btn.onclick)
    16   /*
    17   * ƒ onclick(event) {
    18     fn()
    19     }
    20   */
    21 </script>
    22 </body>
    23 </html>

    vue:

     1 <!DOCTYPE html>
     2 <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
     3 <head>
     4   <meta charset="UTF-8">
     5   <title>事件</title>
     6 </head>
     7 <body>
     8 
     9 <div id="app">
    10   <!--v-on === @-->
    11   <!--如果不传递参数 则不要写括号 会自动传入事件源,写括号了要手动传入$event属性-->
    12   <div v-on:click="fn">点我</div>
    13   <div v-on:click="ck($event,1)">点我</div>
    14 </div>
    15 
    16 <script src="./node_modules/vue/dist/vue.js"></script>
    17 <script>
    18 
    19   let vm = new Vue({ // 根实例
    20     el:'#app',
    21     methods:{
    22       // methods 中的this指向的都是实例vm 不能用箭头函数fn:()=>{alert(1);},this会改变
    23       fn() {alert(1);}, // es6 的写法  fn:function () {alert(1);}
    24       ck(event,a) {console.log(event)}
    25     },
    26     data:{
    27       // 也可以 但是 不美观 fn (){alert(1);} data和methods中的数据都会放到vm上,名字不能重复。
    28     }
    29 
    30   });
    31 </script>
    32 </body>
    33 </html>
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Demo</title>
     6 </head>
     7 <body>
     8 <div id="app">
     9   <!--vue中的键盘修饰符 keyup.13 keyup.enter 按enter键  keyup.a keyup.ctrl.a"-->
    10   <input type="text" v-model="val" @keyup.enter="add"/>
    11   <ul>
    12     <li v-for="v,i in arr">{{v}}<button @click="remove(i)">删除</button> </li>
    13   </ul>
    14 </div>
    15 <script src="./node_modules/vue/dist/vue.js"></script>
    16 <script>
    17   let vm = new Vue({
    18     el:'#app',
    19     methods:{
    20       add(e){
    21         // if(e.keyCode===13){  事件上直接用.enter代替
    22           this.arr.unshift(this.val);
    23           this.val = '';
    24         // }
    25       },
    26       remove(i){this.arr = this.arr.filter((item,index)=> index!==i);},
    27     },
    28     data:{
    29       val:'',
    30       arr:[],
    31     }
    32   })
    33 </script>
    34 </body>
    35 </html>
  • 相关阅读:
    如何在mysql客户端即mysql提示符下执行操作系统命令
    干掉safedog命令
    面试题-----判断两个无环单链表是否交叉,如果交叉返回交叉点
    面试题-----单链表的反转
    面试题-----ICMP协议简介
    面试题-------SSL协议简介
    面试题-----求单链表的倒数第k个节点
    面试题---两个有序单链表的合并
    面试题---求一个串中的最大连续递增数字串
    面试题---两个大整数相乘
  • 原文地址:https://www.cnblogs.com/onroad2019/p/13268217.html
Copyright © 2011-2022 走看看