vue todos

vue-todos

Preview address (responsive design, PC, mobile) First release address (source code and tutorial)

vue-todos is an upgraded version of the todomvc vue module. It has a simple interface, rich functions, and comprehensive knowledge. It can help you quickly get started with vuejs. If you like it, please like it, follow it, star it, and fork it. These are the motivations for me to persist!!

Preface

vuejs is a good open source project that greatly releases our productivity. Using Vue for 2 years not only gave me a promotion and salary increase, but also made great progress in my front-end technology. I have been hanging out in major Vue groups and major forums for a long time, and have answered many vuejs novice questions. I found that many problems with vueApi documentation are caused by insufficient understanding of the API. The worst thing is that many people don't like to consult the documentation, and because they have few opportunities to practice, they are at a loss when encountering problems.

hope

This course will take you to practice Vue from scratch. I hope that through this course, beginners can quickly get started with Vuejs and quickly learn to use Vue's commonly used APIs. Let Vue.js beginners learn Vuejs step by step and effectively. .

run

 # 更新依赖包
npm install
# 本地运行 at localhost:8080
npm run dev
# 打包
npm run build

you will learn

• Construction of vue-cli development environment
• Analyze API documentation and component programming
• Vue basics (1. Instance 2. Component 3. Directive 4. Options 5. Template rendering 6. Event binding 7. Calculated properties 8. Built-in animation 9. Component interaction 10. Built-in routing)
• vue advanced (1.vue life cycle 2.vuex usage 3.axios usage 4.mock.js front-end simulation data)
• Solutions to cross-domain issues

Picture preview

*pc version

Course catalog (please stay tuned, one section will be updated every day)

• Development environment setup
  • Node.js installation
  • Installation of vue-cli
  • Create the first vue application
• Practical development of upgraded version of todomvc]
  • Preliminary preparation
    • Project analysis
    • needs analysis
    • api analysis
    • component analysis
  • Responsive layout
  • Component writing
    • Menu component
    • Head assembly
    • List component
  • menu
    • Written by api.js (axios.js)
    • Bind menu data
    • New menu
  • head
    • Bind a single piece of data
    • Add list
    • Modify title
    • Remove content
  • list
    • Complete to-do items
    • Modify to-do items
    • Delete to-do items
  • locking
    • Lock to-do items
  • vuex
    • Menu data update
    • Mobile menu shrink
  • transition animation
    • Menu animation
    • List animation
• Vue.js knowledge points explained