Vue3.0 Quick Start Tutorial

• Chapter1 Vue3-MVVM pattern and component development
• 1-1 Get to know the new version of VUE3 Family Bucket
• 1-2 The two cores of VUE-responsive and component-based development
• 1-3 VUE data two-way binding
• 1-4 VUE event operations
• 1-5 Command to interactively install vue-cli scaffolding
• 1-6 Running and packaging of VUE projects
• 1-7 mount function component mounting principle
• 1-8 Data two-way binding and vue.config.js file configuration
• 1-9 VUE instance parameters and MVVM mode
• 1-10 VUE template interpolation operation
• 1-11 Use of VUE template directives
• 1-12 VUE virtual DOM and diff algorithm
• Chapter2 Vue’s template directives and event monitoring
• 2-1 Yesterday’s lesson notes
• 2-2 The v-bind directive implements dynamic binding of element attributes
• 2-3 Detailed explanation of v-bind binding style attribute
• 2-4 v-bind binds class attributes to implement dynamic styles
• 2-5 VUE computed handles computed properties
• 2-6 VUE event monitoring
• 2-7 v-on event modifier
• 2-8 VUE conditional branch instructions
• 2-9 VUE loop traversal instruction v-for
• 2-10 v-model form data two-way binding-real-time calculation of total shopping cart price
• Chapter3 Vue component communication and named slots
• 3-1 VUE component development
• 3-2 Creation and registration of VUE components
• 3-3 VUE scoped attributes realize the independence of component styles
• 3-4 Use lang=scss in VUE
• 3-5 Parent component passes data to child component
• 3-6 $emit enables child components to communicate with parent components
• 3-7 Slot extracts the commonality of components to achieve component expansion
• 3-8 Upgrade of named slots and scoped slots--the use of v-slot
• Chapter4 Component life cycle and Element-plus component library
• 4-1 Responsibilities of each component life cycle
• 4-2 Triggering of component life cycle hook functions
• 4-3 Component life cycle--creation and destruction of instances
• 4-4 Element-UI-ElementPlus component library document introduction
• 4-5 ElementPlus components are referenced globally in main.js
• 4-6 Secondary development of ElementPlus tab component
• 4-7 Installation and activation of Vue Router
• 4-8 Create page route
• 4-9 The router-link component implements routing navigation
• 4-10 Use global variable $route to implement route jump
• 4-11 Route jump--Parameter passing and receiving
• Chapter5 Vue routing nesting and Vuex state management
• 5-1 Start routing process sorting
• 5-2 Vue implements routing loading on demand (lazy loading of routes)
• 5-3 Vue-route sub-routing (nested routing)
• 5-4 Passing and receiving sub-routing parameters
• 5-5 Route redirection and alias settings
• 5-6 VUEX state warehouse management
• 5-7 Use of VUEX getters computed properties
• 5-8 Vuex state management--the use of Mutation
• 5-9 Vuex state management--Action asynchronous operation
• 5-10 Vuex Module--State warehouse segmentation