阿里面试官 我给你手写一个用vue实现的日历组件

1,688 阅读2分钟

Calendar-Component

用vue实现一款属于自己的日历组件

功能实现

  • 在最上面展示的是我们当前的日期
  • 在下面也会给我们加一个另类的样式凸显出来我们当前的日期
  • 还可以去进行点击其他日期 再点击的时候最上面是展示我们点击哪一个就展示哪一个
  • 还可以进行月份的切换

用到的知识

  • 模板字符串
    • 和普通字符串的使用一样
    • 多行字符串
    • 字符串中嵌入变量
    • 模板字符串中还可以调用函数
    • 模板字符串之间还可以进行嵌套
  • 动态class
  • 事件绑定
  • flex布局
  • computed
    • computed用来监控自己的定义的变量 改变量不在data里面声明 直接在computed里面定义 然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理
    • computed比较适合对多个变量或者对象进行处理后返回一个结果值 也就是多个变量中的某个值发生变化 则我们的监控的这个值也会发生变化 举例:购物车里面的商品列表和总金额之间的关系 只要商品列表里面的商品数量发生变化或减少或增多或删除商品 总金额都应该发生变化 这里的这个总金额使用computed属性进行计算是最好的选择
  • computed与watch的区别
    • watch主要用于监控vue实例的变化 它监控的变量必须在data里面声明才可以 它可以监控一个变量 也可以是一个对象 但是我们我们只能监控单个变量
    • watch一般用于监控路由丶input输入框的值特殊处理等等 它比较适合的场景是一个数据影响多个数据
    • computed使用场景是: 一个数据受多个数据的影响
    • computed是计算值 应用就是简化template里面{{}}计算和处理props或$emit的传值 具有缓存性 页面重新渲染值不变化 计算属性会立即返回之前的计算结果 而不必再次执行函数
    • watch是观察的动作 应用是监听props $emit或本组件的值执行异步操作 无缓存性 页面重新渲染时值不变化也会执行

效果图片

图片atl

项目源码 欢迎start

github.com/cxuhwiuefhu…

你的点赞是我持续输出的动力 希望能帮助到大家 互相学习 有任何问题下面留言 一定回复