事件修饰符

最新推荐文章于 2025-02-07 09:00:00 发布

azmingliang

最新推荐文章于 2025-02-07 09:00:00 发布

阅读量131

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/azmingliang/article/details/95531383

博客围绕Vue的事件修饰符和计算属性展开。事件修饰符可解决代码重复、性能浪费问题，如阻止事件冒泡；按键修饰符对拿取键盘码过程进行封装，还能自定义。计算属性则是为解决mustache语法中js逻辑多、methods使用不符问题而提出，可像全局变量一样使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件修饰符计算属性

业务：阻止事件冒泡

我们在事件处理程序中添加阻止事件冒泡行为时我们发现，e.stopPropagation() 我们书写了三次
这么书写会导致代码重复，浪费性能
解决：修饰符


<body>
 <div id="app">
   <div class="big" @click = "bigHandler">
     <div class="middle" @click = "middleHandler">
       <div class="small" @click = "smallHanlder"></div>
     </div>
   </div>
 </div>
</body>

new Vue({
   el: '#app',
   methods: {
     bigHandler ( e ) {
       e.stopPropagation()
       alert( 'big' )
     },
     middleHandler ( e ) {
       e.stopPropagation()
       alert( 'middle' )
     },
     smallHanlder ( e ) {
       e.stopPropagation()
       alert( 'small' )
     }
   }
 })

事件修饰符

格式： @eventType.修饰符 = “事件处理程序”
修饰符名称：是我们原生方法简写（大多数是第一个单词）
所以上面的例子就可以写成下面这样

<body>
 <div id="app">
   <div class="big" @click.stop = "bigHandler">
     <div class="middle" @click.stop = "middleHandler">
       <div class="small" @click.stop = "smallHanlder"></div>
     </div>
   </div>
   <hr>
   <div class="big" @click.self = "bigHandler">
     <div class="middle" @click.self = "middleHandler">
       <div class="small" @click.self = "smallHanlder"></div>
     </div>
   </div>
 </div>
</body>

new Vue({
   el: '#app',
   methods: {
     bigHandler ( e ) {
       alert( 'big' )
     },
     middleHandler ( e ) {
       alert( 'middle' )
     },
     smallHanlder ( e ) {
       alert( 'small' )
     }
   }
 })

按键修饰符

业务： input 按键 enter 时触发，Vue将通过事件对象 e 拿取键盘码的这个过程进行了封装
自定义按键修饰符
指定某一个字符为某一个键盘码
案例

<body>
<div id="app">
  <input type="text" v-model = "val" @keyup = "inputHandler">
  <hr>
  <input type="text" v-model = "val" @keyup.enter = "fn">
  <input type="text" v-model = "val" @keyup.13 = "fn">

  <hr>
  <input type="text" v-model = "val" @keyup.p = "fn">
</div>
</body>

Vue.config.keyCodes.p = 13   //88 键盘的 p
new Vue({
  el: '#app',
  data: {
    val: ''
  },
  methods: {
    inputHandler ( e ) {
      if( e.keyCode === 13 ){
        console.log( this.val )
      }
    },
    fn () {
      console.log( this.val )
    }
  }
})

计算属性

计算属性：
业务：将一个字符串反向输出
思路：str->arr-arr反向->str
总结：如果说业务功能增加，我们发现 mustache 语法中的js逻辑有点多了，V是视图，作用是用来展示界面的，但是我们上面的写法让V的负担增加。如果我们写在methods中写一个方法，然后运行这个方法，又有点觉得和我们认为的methods里面最好放事件处理程序不符。
综合：以上方式都不是最佳的选择
解决： Vue提出了一个新的解决方案：计算属性 computed
计算属性
计算属性中存放的是函数（书写逻辑）
计算属性可以直接像全局变量一样使用，直接将方法名当做全局变量一样使用
面试题（王者）实用题：计算属性( computed ) vs 方法（ methods）

1. 事件处理程序往methods里面放 
2. 满足一下两个条件，你直接使用计算属性
 - 要书写逻辑
 - 要像全局变量一样使用（ 符合 MVVM 的思想）

案例如下

<body>
<div id="app">
  {{ msg.split('').reverse().join('') }}
  <p> {{ reverseMsg }} </p>
</div>
</body>

new Vue({
  el: '#app',
  data: {
    msg: 'hello Vue.js 周四'
  },
  computed: {
    reverseMsg () {
      return this.msg.split('').reverse().join('')
    }
  }
})