• 事件修饰符

    • 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。

    • Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符

    • 修饰符 是 由点开头的指令后缀来表示的 比如v-on:click.stop阻止事件冒泡

    事件修饰符.prevent

    事件修饰符.prevent 作用 ： 可以"阻止" 当前对象默认行为的发生

    1.  <div id="app">
    2.         <!-- v-bind:属性名="数据"  简写：属性名="数据" -->
    3.         <!-- v-bind 指令：属性渲染指令，可以在任何标签上的数据 ，渲染数据 -->
    4.         <div>
    5.             <a v-bind:href="url">百度一下，就知道</a>
    6.             <br>
    7.             <a :href="url">百度一下，就知道</a>
    8.             <hr>
    9.             <!-- 事件修饰符 .prevent -->
    10.             <!-- v-on:click.prevent 使用".prevent"修饰符 可以"阻止" 当前对象默认行为的发生 
    11.          超链接标签的 默认行为 是 你点击它，它会进行页面的跳转  -->
    12.             <a href="" @click.prevent="toThis($event)">查看</a>
    13.         </div>
    14.  
    15.  
    16.         <br><br><br><br><br>
    17.         <div>
    18.             <form action="" method="post">
    19.                 用户名:<input type="text">
    20.                 <br>
    21.                 <input type="submit" value="提交" @click.prevent="toThis($event)">
    22.             </form>
    23.         </div>
    24.     </div>
    25.  
    26.     <script src="./js/vue.js"></script>
    27. <script>
    28.     var vm = new Vue({
    29.         el:'#app',
    30.         data(){
    31.             return{
    32.                 url:'https://www.baidu.com/'
    33.             }
    34.         },
    35.         methods:{
    36.             toThis(event){
    37.                 console.log(event);
    38.             }
    39.         }
    40.  
    41.     })
    42. </script>

    预览效果

     

    事件修饰符.stop

    事件冒泡 ：当"一个元素"接收到"事件"的时候 会把他"接收到的事件"传给自己的父级，一直到window

    事件修饰符.stop的作用： 阻止事件冒泡 (阻止单击事件继续传播 )

    1.  <style>
    2.         .outer{
    3.             width: 600px;
    4.             height: 600px;
    5.             background-color: springgreen;
    6.             margin: 10px auto;
    7.             display: flex;
    8.             justify-content: center;
    9.             align-items: center;
    10.         }
    11.         .middle{
    12.             width: 400px;
    13.             height: 400px;
    14.             background-color: lightpink;
    15.             display: flex;
    16.             justify-content: center;
    17.             align-items: center;
    18.         }
    19.         .inner{
    20.             width: 200px;
    21.             height: 200px;
    22.             background-color: lightblue;
    23.             display: flex;
    24.             justify-content: center;
    25.             align-items: center;
    26.         }
    27.     style>
    28. head>
    29. <body>
    30.     <div id="app">
    31.         
    32.         <div class="outer" @click.stop="outer">
    33.             <div class="middle" @click.stop="middle">
    34.                 <div class="inner" @click.stop="inner">
    35.                     <button @click.stop="run">点击我button>
    36.                     <hr>
    37.                     
    38.                     <a href="" @click.stop.prevent="run">点击，看一看a>
    39.                 div>
    40.             div>
    41.         div>
    42.     div>
    43.  
    44.     
    45.     <script src="./js/vue.js">script>
    46.     <script>
    47.         var vm = new Vue({
    48.             el:'#app',
    49.             data(){
    50.                 return{
    51.                     
    52.                 }
    53.             },
    54.             methods:{
    55.                 outer(){
    56.                     console.log('我是outer');
    57.                 },
    58.                 middle(){
    59.                     console.log('我是middle');
    60.                 },
    61.                 inner(){
    62.                     console.log('我是inner');
    63.                 },
    64.                 run(){
    65.                     console.log('我是run');
    66.                 },
    67.                 
    68.             }
    69.         })
    70.     script>

    预览效果

     

    注意：事件修饰符，可以  连写  @click.stop.prevent  阻止冒泡行为   阻止当前对象的默认行为

    事件修饰符.once

    事件修饰符.once 的作用： 只执行一次点击 (或者 说 事件，只执行一次！)

    修饰符可以串联 即阻止冒泡也阻止默认事件

    只当在 event.target 是当前元素自身时触发处理函数 即事件不是从内部元素触发的

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

    1.   <div id="app">
    2.         <p>{{number}}</p>
    3.         <button @click="number++">点击，加1</button>
    4.         <hr>
    5.         <button @click.once="number++">点击，加1,只能执行一次</button>
    6.     </div>
    7.     
    8.     <script src="./js/vue.js"></script>
    9.     <script>
    10.         var vm = new Vue({
    11.             el:'#app',
    12.             data(){
    13.                 return{
    14.                     number:1,
    15.                 }
    16.             },
    17.             methods:{
    18.                 
    19.             }
    20.         })
    21.     </script>

    预览效果

     

    按键修饰符

    在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

    常见的按键修饰符 有哪些呢？

    .enter => enter键 回车键

    .tab => tab键 （不能文本框里操作）

    .delete (捕获“删除”和“退格”按键) => 删除键

    .esc => 取消键

    .space => 空格键

    .up => 上

    .down => 下

    .left => 左

    .right => 右

    1. <div id="app">
    2.         <h1>按键修饰符h1>
    3.         <p>
    4.             
    5.             
    6.             <input type="text" v-model="uname" @keyup.enter="submit">
    7.         p>
    8.         <p>
    9.             
    10.             
    11.             <input type="text" v-model="msg" @keyup.space.enter="showMsg">
    12.         p>
    13.         <p>
    14.             
    15.             
    16.             
    17.             <input type="text" v-model="title" @keyup.13="showTit">
    18.  
    19.         p>
    20.     div>
    21.     
    22.     <script src="./js/vue.js">script>
    23.     <script>
    24.         var vm = new Vue({
    25.             el:'#app',
    26.             data(){
    27.                 return{
    28.                     uname:'',
    29.                     msg:'',
    30.                     title:'',
    31.                 }
    32.             },
    33.             methods:{
    34.                 submit(){
    35.                     console.log('当你按回车键的时候，我们获取到你输入的值是：'+this.uname);
    36.                 },
    37.                 showMsg(){
    38.                     console.log('当你按回车键的时候，我们获取到你输入的值是：'+this.msg);
    39.                 },
    40.                 showTit(event){
    41.                     console.log(event);
    42.                 }
    43.             }
    44.         })
    45.     script>

    预览效果

     

     

     

    自定义事件修饰符

    有时候Vue内置的修饰符可能无法满足我们的实际的项目需求，那么在Vue中可以通过config.keyCodes自定义按键修饰符别名

    1.  <div id="app">
    2.         <h1>自定义事件修饰符</h1>
    3.     </div>
    4.     
    5.     <script src="./js/vue.js"></script>
    6.     <script>
    7.         var vm = new Vue({
    8.             el:'#app',
    9.             data(){
    10.                 return{
    11.                     
    12.                 }
    13.             },
    14.             // 生命周期钩子函数
    15.             // vue中实现页面按键事件，并获取  当前按键的keyCode值
    16.             created(){
    17.                 document.onkeydown = function(e){
    18.                     var ev = window.event || e;
    19.                 
    20.                 console.log(ev);
    21.                 // console.log('你按的是'+ ev.key +'键');
    22.  
    23.                 // 如果你把想把按键范围缩小，当你按某个指定键的时候，我们才输出某些提示消息  ---》你按的是某键
    24.                 // 按其他键就会显示全部信息
    25.                 if(ev.keyCode == 87){
    26.                     console.log('你按的是'+ ev.key +'键');
    27.                 };
    28.              };
    29.             },
    30.             methods:{
    31.                 run(event){
    32.  
    33.                 }
    34.             }
    35.         })
    36.     </script>

    预览效果

     

    1. <div id="app">
    2.         <h1>自定义事件修饰符</h1>
    3.         <h2>Vue.config.keyCodes.自定义键名 = 键码， 可以去定制按键别名</h2>
    4.         <input type="text" name="" id="" v-on:keydown.rr="run()">
    5.     </div>
    6.     
    7.     <script src="./js/vue.js"></script>
    8.     <script>
    9.         // 116  ---F5键
    10.         // 自定义事件修饰符.rr
    11.         Vue.config.keyCodes.rr = 116;
    12.         var vm = new Vue({
    13.             el:'#app',
    14.             data(){
    15.                 return{
    16.                     
    17.                 }
    18.             },
    19.             methods:{
    20.                 run(){
    21.                     window.alert('你按了键盘上的F5键')
    22.                 }
    23.             }
    24.         })
    25.     </script>

     预览效果

    案例讲解-计算器

    1.   <style>
    2.         #app{
    3.             width: 600px;
    4.             margin: 30px auto;
    5.         }
    6. </style>
    7. </head>
    8. <body>
    9.     <div id="app">
    10.         <input type="text" class="inp" v-model="num1"/>
    11.         <select v-model="flag">
    12.             <option value="+">+</option>
    13.             <option value="-">-</option>
    14.             <option value="*">x</option>
    15.             <option value="/">/</option>
    16.         </select>
    17.         <!--点击回车，进行计算-->
    18.         <input type="text" class="inp" v-model="num2" @keydown.enter="sums"/>
    19.         <!--点击按钮进行计算-->
    20.         <button @click="sums">=</button>
    21.         <span>{{result}}</span>
    22.  </div>
    23.  <script src="./js/vue.js"></script>
    24. <script>
    25.     var vm = new Vue({
    26.         el:'#app',
    27.         data(){
    28.             return{
    29.                 num1:'',
    30.                 num2:'',
    31.                 flag:'+',
    32.                 result:'',
    33.             }
    34.         },
    35.         methods:{
    36.             sums(){
    37.                 this.result = eval(this.num1+this.flag+this.num2)
    38.             }
    39.         }
    40.     })
    41. </script>

      预览效果

     

  • 相关阅读:
    前端 TS 快速入门之六：枚举 enum
    在作业方面小型土路肩摊铺机突出的表现
    自动化测试的必备准则
    设计模式 - 结构型模式考点篇：代理模式（静态代理、JDK 动态代理、CGLIB 动态代理）
    锂电池储能系统建模发展现状及其数据驱动建模初步探讨
    (matplotlib)如何不显示x轴或y轴刻度(ticks)
    无线WiFi安全渗透与攻防(六)之WEP破解-Gerix-wifi-cracker自动化破解WEP加密
    HC-05 蓝牙 2.0 串口模块
    vue、react中虚拟的dom
    JWT 安全及案例实战
  • 原文地址：https://blog.csdn.net/m0_71814235/article/details/126871133