vue学习笔记（三）——vue基础（过滤器、计算属性、侦听器）

因为奋斗超太帅啦

已于 2024-07-23 09:58:37 修改

阅读量94

点赞数

分类专栏： VUE2.0学习笔记文章标签：学习笔记

于 2023-11-08 14:57:12 首次发布

本文链接：https://blog.csdn.net/weixin_56370772/article/details/134289010

版权

VUE2.0学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、过滤器

1.1 过滤器-定义使用

转换格式, 过滤器就是一个函数, 传入值返回处理后的值

过滤器只能用在, 插值表达式和v-bind动态属性里

Vue中的过滤器场景

字符串翻转, "输入hello, world", 输出"dlrow ,olleh”

字母转大写, 输入"hello", 输出"HELLO”

语法:

Vue.filter("过滤器名", (值) => {return "返回处理后的值"}) ——全局过滤器

filters: {过滤器名字: (值) => {return "返回处理后的值"} ——局部过滤器

1. Vue中过滤器作用?

传入一个值, 处理后返回另外一个值

2. 如何定义过滤器?

main.js – Vue.filter('过滤器名字', 函数体)

某.vue文件 – filters: {'过滤器名字': 函数体}

3. 如何使用过滤器?

Vue变量 | 过滤器名字

4. 过滤器注意事项?

插值表达式 / 动态属性

1.2 过滤器-传参和多过滤器

可同时使用多个过滤器, 或者给过滤器传参

语法:

过滤器传参: vue变量 | 过滤器(实参)

多个过滤器: vue变量 | 过滤器1 | 过滤器2

<script>
export default {
  data(){
    return {
      msg: 'Hello, Vue'
    }
  },
  filters: {
    toUp (val) {
      return val.toUpperCase()
    },
    //第一个值 val 永远是固定的为数据本身
    //第二个值就是接收具体参数（实参），这里 sp = '|'
    reverse: (val, sp) => s.split('').reverse().join(sp)
  }
}
</script>

1. 多个过滤器使用?

vue变量 | 过滤器1 | 过滤器2

2. 如何给过滤器传额外值

vue变量 | 过滤器(值)

二、计算属性-computed

一个变量的值, 依赖另外一些数据计算而来的结果

注意: 计算属性也是vue数据变量, 所以不要和data里重名, 用法和data相同

1. 计算属性使用场景?

当变量的值, 需要通过别人计算而得来

2. 计算属性特点?

函数内使用的变量改变, 重新计算结果返回

3. 计算属性注意事项?

计算属性名和data里名字不能重复

2.1 计算属性-缓存

计算属性, 基于依赖项的值进行缓存，依赖的变量不变, 都直接从缓存取结果

reverseMessage 计算属性只执行一次，而getMessage()函数，函数调用几次，执行几次。

1. 计算属性好处是?

带缓存

依赖项不变, 直接从缓存取

依赖项改变, 函数自动执行并重新缓存

2. 计算属性使用场景?

当变量值, 依赖其他变量计算而得来才用

2.2 计算属性-完整写法

计算属性也是变量

演示: 给计算属性赋值问题（无法实现数据的双向同步）

template>
  <div>
    <span>姓名：</span>
    <input type="text" v-model="fullName">
  </div>
</template>

<script>
export default {
    computed: {
      fullName () {
         return '刘建超'
      }
    }
}
</script>

1. 何时用计算属性完整写法?

给计算属性变量赋值时

2. set函数和get函数什么执行?

set 接收要赋予的值 set(val) {}

get 里要返回给这个计算属性具体值 get() {return val}

全选功能

isAll的get里统计小选框最后状态, 影响isAll – 影响全选状态

考虑无数据情况空数组 – 全选不应该勾选