vue计算属性

最新推荐文章于 2024-07-16 09:46:43 发布

weixin_45213847

最新推荐文章于 2024-07-16 09:46:43 发布

阅读量113

点赞数

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

本文链接：https://blog.csdn.net/weixin_45213847/article/details/93115776

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.计算属性

代码举例

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


<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello World!'
        },
        computed: {
            changeHandler(){
                return this.msg.split('').reverse().join('')
            }
        }
    })
</script>

1.1思路：

计算属性： 
      业务： 将一个 字符串  反向  ？
      思路： str ->arr- arr反向 ->str

1.2总结：

如果说业务功能增加，我们发现 mustache 语法中的js逻辑有点多了

V是视图，作用是用来展示界面的，但是我们上面的写法  让  V 的负担增加

如果我们写在methods中写一个方法，然后运行这个方法，又有点觉得和我们认为的methods里面最好放事件处理程序不符

综合：以上方式都不是最佳的选择

解决： Vue提出了一个新的解决方案：计算属性 computed

计算属性：

计算属性中存放的是函数（书写逻辑）
计算属性可以直接像全局变量一样使用，直接将方法名当做全局变量一样使用

**面试题，实用题： **

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

2.事件修饰符

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.阻止事件冒泡

方法一：

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

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

缺点：这么书写会导致代码重复，浪费性能

方法二：修饰符

格式： @eventType.修饰符 = "事件处理程序"
修饰符名称： 是我们原生方法简写（ 第一个单词（基本上））

例子：<input type="text" v-model = "val" @keyup.enter = "fn">

weixin_45213847

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录