Calendar-Component

Use VUE to achieve a calendar component belonging to their own

Function implementation

  • Shown at the top is our current date
  • It will also give us an alternative style below to highlight our current date
  • You can go ahead and click on other dates and then when you click on another date it’s show at the top and we click on whichever one we want to show
  • You can also switch between months

Knowledge used

  • Template string
    • The same as normal strings
    • Multiline string
    • Embed variables in strings
    • You can also call functions from a template string
    • Template strings can also be nested
  • The dynamic of the class
  • event
  • Flex layout
  • computed
    • Computed Changes in variables that you use to monitor your definition are not declared in data and are defined in computed directly and then you can do two-way data binding on the page to display the results or do other things
    • Computed is more suitable for processing multiple variables or objects and returning a result value, that is, if one of the variables changes, the value we monitor changes as well. For example: The relationship between the list of items in your shopping cart and the total amount should change whenever the number of items in the list changes or decreases or increases or deletes and the total amount here is best calculated using a computed property
  • Difference between computed and Watch
    • Watch is mainly used to monitor vUE instance changes. The variables it monitors must be declared in data. It can monitor a variable or an object, but we can only monitor a single variable
    • Watch is generally used for monitoring routing, special processing of values in input boxes, etc. It is suitable for scenarios where one data affects multiple data
    • For computed usage, one data is affected by multiple data
    • Computed values are used to simplify the functions and processes of {{}} functions or $emit in templates. Cacheable pages render values without changing computed properties and immediately return the computed results without having to execute the function again
    • Watch is an action that listens for the props $emit or the value of this component to perform an asynchronous operation. Cacheless page is rerendered without changing the value

Effect of picture

Project source welcome start

Github.com/cxuhwiuefhu…

Your “like” is my motivation for continuous output. I hope it can help us learn from each other. If you have any questions, please leave a message below