从0到Vue3企业项目实战【03.vue基本api入门】

自白
1,320 阅读3分钟

走进过滤器

注意:

  • 过滤器格式: vue变量 | 过滤器名
  • 过滤器只能用在插值表达式与v-bind动态属性内

语法

  • Vue.filter("过滤器名",(值) => {return "返回处理后的值"}
  • filters:{过滤器名字:(值) => {return "返回处理后的值"} 代码演示\

App.vue

<template>
  <div>
    <p>原来的样子: {{ msg }}</p>
    <p>使用反转过滤器: {{ msg | reverse }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "你看我几分像从前",
    };
  },
};
</script>

<style></style>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 方式1 全局过滤器
// 任意vue文件中均可直接使用
// 语法: Vue.filter("过滤器名", 值 => 处理后结果)

Vue.filter("reverse",val => val.split("").reverse().join(""))

new Vue({
  render: h => h(App),
}).$mount('#app')

以上是全局过滤器的注册以及使用方法,需要在全局过滤器可以在任意vue文件中直接使用,需要在main.js中写好过滤方法,从而实现在全局注册的效果\

<template>
  <div>
    <p>原来的样子: {{ msg }}</p>
    <p>使用反转过滤器: {{ msg | reverse }}</p>
    <p :title="date | getDate">鼠标停留康康日期</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "你看我几分像从前",
      date: new Date(),
    };
  },
  // 方式2 局部过滤器
  // 只能在当前vue文件中使用
  filters: {
    getDate(Date) {
      return Date.getMonth() + "月" + Date.getDate() + "日";
    },
  },
};
</script>

<style></style>

image.png 局部过滤器需要在vue文件写一个跟data同级的对象 filters,(注:这里有个s注意,里面可以写多个过滤方法),内部写过滤方法,方法名为过滤器名称,参数为要过滤参数,返回为过滤后的值,这就是过滤器的基本使用

给过滤器传参

给过滤传参

  • 语法 : vue变量 | 过滤器名称(值) 过滤器语法
  • Vue.filter("过滤器名",(值,传递的参数) => {return "返回处理后的值"}
  • filters:{过滤器名字:(值,传递的参数) => {return "返回处理后的值"} 使用多个过滤器
  • 语法 : vue变量 | 过滤器1 | 过滤器2 App.vue
<template>
  <div>
    <p>原来的样子: {{ msg }}</p>
    <p>使用反转过滤器: {{ msg | reverse("!") }}</p>
    <p :title="date | getDate | reverse">鼠标停留康康日期</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "你看我几分像从前",
      date: new Date(),
    };
  },
  // 方式2 局部过滤器
  // 只能在当前vue文件中使用
  filters: {
    getDate(Date) {
      return Date.getMonth() + "月" + Date.getDate() + "日";
    },
  },
};
</script>

<style></style>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 方式1 全局过滤器
// 任意vue文件中均可直接使用
// 语法: Vue.filter("过滤器名", 值 => 处理后结果)

Vue.filter("reverse",(val,s) => val.split("").reverse().join(s))

new Vue({
  render: h => h(App),
}).$mount('#app')

image.png

走进计算属性

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

computed: {
    "计算属性名" () {
        return "值"
        }
    }

App.vue

<template>
  <div>
    <div>{{ num }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      n1: 20,
      n2: 21,
    };
  },
  // 计算属性
  computed: {
    num() {
      return this.n1 + this.n2;
    },
  },
};
</script>

<style></style>

image.png

函数内使用的变量发生改变,将会重新计算结果,计算属性的后缀名是属性而非方法,所有可以直接将计算属性的名称当作变量来使用

使用计算属性与普通方法有何差异?

<template>
  <div>
    <p>{{ reverseMsg }}</p>
    <p>{{ reverseMsg }}</p>
    <p>{{ reverseMsg }}</p>
    <p>{{ getResverMsg() }}</p>
    <p>{{ getResverMsg() }}</p>
    <p>{{ getResverMsg() }}</p>
    <p>{{ getResverMsg() }}</p>
    <button @click="changeMsg">改变msg的值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "你看我几分像从前",
    };
  },
  // 计算属性
  computed: {
    reverseMsg() {
      console.log("计算属性执行了");
      return this.msg.split("").reverse().join("");
    },
  },
  methods: {
    getResverMsg() {
      console.log("函数执行了");
      return this.msg.split("").reverse().join("");
    },
    changeMsg() {
      this.msg = "前从像分几我看你";
    },
  },
};
</script>

<style></style>

动画.gif

计算属性的优势

  • 带缓存
  • 计算属性对于的函数执行后, 会把return的值缓存起来
  • 依赖项目不变,多次调用都是从缓存中取值
  • 依赖像值变化,函数会自动重新执行并且缓存新的值 计算属性性能更优

计算属性和data的区别

  • 计算属性是动态的,而data中的属性都有一个固定的初始值
  • 计算属性也是变量也可以进行v-model双向绑定,但是当我们双向绑定的时候我们需要书写计算属性的完整写法
  computed: {
    属性名: {
      set(获取的值) {
        console.log(val);
      },
      get() {
        // 返回的是默认值
        return "默认值";
      },
    },
  },

来写个案例来体会完整用法吧 App.vue

<template>
  <div>
    <span>一键三连:</span>
    <input type="checkbox" v-model="sanLian" />
    <ul>
      <li v-for="(val, index) in arr" :key="index">
        <input type="checkbox" v-model="val.check" />
        <span>{{ val.name }}</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      arr: [
        {
          name: "点赞",
          check: false,
        },
        {
          name: "转发",
          check: false,
        },
        {
          name: "收藏",
          check: false,
        },
      ],
    };
  },
  computed: {
    // sanLian() {
    //   // every方法 当数组里面有一个不符合条件 ,直接返回false
    //   return this.arr.every((obj) => obj.check === true);
    // },
    sanLian: {
      set (val) {
        // forEach方法会直接改变原数组
        this.arr.forEach(obj => obj.check = val);
      },
      get () {
        // every方法 当数组里面有一个不符合条件 ,直接返回false
        return this.arr.every(obj => obj.check === true);
      },
    },
  },
};
</script>

动画.gif 我们需要注意的是当我们将计算属性绑定在v=model的时候,需要为计算属性改为get以及set的形式 两者都是一个方法,get可以放置我们之前的return的值,set每次当我们改变当前值的时候会触发,我们可以在这里写一写方法来影响其他值

侦听器

侦听器与计算属性类似都有一种简写形式以及一种完整形式,不同的是计算属性对于非双向绑定的可输入属性可以使用简写,反之则需要使用更完整的写法监听输入,而侦听器则是对于简单类型的侦听可以使用简写,对于复杂类型需要使用完整写法

<template>
  <div>
    输入值:
    <input type="text" v-model="value" />
    姓名:
    <input type="text" v-model="obj.name" />
    年龄:
    <input type="text" v-model="obj.age" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: '',
      obj: {
        name: '',
        age: ''
      }
    }
  },
  // 侦听器
  // 语法: 
  // 简写
  // watch: {
  //   变量名 (新的变量名, 旧的变量名) {
  //     console.log(新的变量名, 旧的变量名);
  //   }
  // }
  // 完整写法
  // watch: {
  //   变量名: {
  //     handler (newVal, oldVal) {
  //       console.log(newVal, oldVal);
  //     },
  //     deep: true //深度侦听
  //     immediate: true // 立即侦听(网页打开handler立即执行一次)
  //   }
  // }
  watch: {
    value (newVal, oldVal) {
      console.log(newVal, oldVal);
    },
    obj: {
      handler (newVal, oldVal) {
        console.log(newVal, oldVal);
      },// 侦听方法
      deep: true,//深度侦听,复杂对象必须加这个
      immediate: true // 立即侦听(网页打开handler立即执行一次)
    }
  }
}
</script>
<style>
</style>

动画.gif 总结

  • 语法:
  1. 简写
  watch: {
    变量名 (新的变量名, 旧的变量名) {
      console.log(新的变量名, 旧的变量名);
    }
  }
  1. 完整写法
 watch: {
    变量名: {
      handler (新的变量名, 旧的变量名) {
        console.log(新的变量名, 旧的变量名);
      },
      deep: true //深度侦听
      immediate: true // 立即侦听(网页打开handler立即执行一次)
    }
  }

当我们监听复杂数据类型,类似于对象,数组等的时候,必须开启深度监听也就是deep,immediate当我们加载相应资源的时候会立即监听一次,handler就是一个方法,内部可以拿到改变后的值和之前的值

来看看我的其他章节吧,正在长更中

从0到Vue3企业项目实战【01.Vue的基本概念与学习指南】 - 掘金 (juejin.cn)

从0到Vue3企业项目实战【02.了解并理解Vue指令以及虚拟Dom】 - 掘金 (juejin.cn)

从0到Vue3企业项目实战【03.vue基本api入门】 - 掘金 (juejin.cn)

从0到Vue3企业项目实战【04.从vue组件通讯到eventBus以及vuex(附mock接口与axios简单实践)】 - 掘金 (juejin.cn)

从0到Vue3企业项目实战【05.vue生命周期】 - 掘金 (juejin.cn)

从0到Vue3企业项目实战【06.ref与ref与nextTick使用】 - 掘金 (juejin.cn)

从0到Vue3企业项目实战【07.vue动态组件,组件缓存,组件插槽,子组件直接修改props,自定义指令看这一篇就够了】 - 掘金 (juejin.cn)

avatar
文章
阅读
粉丝