vue基础(2)

最新推荐文章于 2024-07-12 16:55:56 发布

丶Parousia

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量80

点赞数

分类专栏： vue 文章标签： vue 前端

本文链接：https://blog.csdn.net/qq_33721570/article/details/93407748

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

vue基础(2)

事件修饰符

业务：阻止事件冒泡
这是我们需要在我们的事件处理程序中添加阻止事件冒泡行为
但是我们发现，e.stopPropagation() 我们书写了三次，
总结：这么书写会导致代码重复，浪费性能
解决：修饰符
格式： @eventType.修饰符 = “事件处理程序”
修饰符名称：是我们原生方法简写（第一个单词（基本上））

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
 <style>
   .big{
     width: 200px;
     height: 200px;
     background: red;
   }
   .middle{
     width: 100px;
     height: 100px;
     background: blue;
   }
   .small{
     width: 50px;
     height: 50px;
     background: yellow;
   }
 </style>
</head>
<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>
<script>
new Vue({
   el: '#app',
   methods: {
     bigHandler ( e ) {
       alert( 'big' )
     },
     middleHandler ( e ) {
       alert( 'middle' )
     },
     smallHanlder ( e ) {
       alert( 'small' )
     }
   }
 })
</script>

自定义按键修饰符
业务： 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>
<script>
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 )
      }
    }
  })
</script>

计算属性

业务：将一个字符串反向？
思路： 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>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    msg: 'hello Vue.js 周四'
  },
  computed: {
    reverseMsg () {
      return this.msg.split('').reverse().join('')
    }
  }
})
console.log('vm',vm)
</script>

丶Parousia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础(2)

vue基础(2)事件修饰符业务：阻止事件冒泡这是我们需要在我们的事件处理程序中添加阻止事件冒泡行为但是我们发现，e.stopPropagation() 我们书写了三次，总结：这么书写会导致代码重复，浪费性能解决：修饰符格式： @eventType.修饰符 = “事件处理程序”修饰符名称：是我们原生方法简写（第一个单词（基本上））<script src="https...
复制链接

扫一扫