Vue2.5 development where to go Web app from zero basics to combat projects

Source: Internet
Author: User

The 1th chapter of the course Introduction
This chapter mainly introduces the curriculum knowledge Outline, the study premise, the teaching method and the expected harvest.
1-1 Course Brief

The 2nd Chapter Vue starts
This chapter will quickly explain some of the Vue basic syntax, through the writing of the ToDoList function, on the basis of familiarity with basic grammar, extend the concept and advantages of parsing MVVM pattern and front-end assembly.
2-1 Course Learning Methods
2-2 Hello World
2-3 Development ToDoList (V-model, v-for, v-on)
2-4 MVVM Mode
2-5 Front-end Assembly
2-6 Retrofit ToDoList with components
2-7 simple inter-component transfer values
2-8 Chapter Summary

3rd Vue Foundation explaining
This chapter explaining the basics of Vue in a carefully selected case, including examples, lifecycles, instructions, computational properties, methods, listeners, forms, and so on.
3-1 Vue Instance
3-2 Vue instance life cycle
3-3 Vue's template syntax
3-4 calculating properties, methods and listeners
3-5 getter and setter for calculated attributes
3-6 style bindings in Vue
Conditional rendering in 3-7 vue
3-8 List Rendering in Vue
Set method in 3-9 Vue

The 4th chapter in-depth understanding of VUE components
This chapter will delve into the details of the Vue component, starting with the parameter passing and checking of the parent-child component, and stepping into the description of the value-transfer, slot, scope slot, dynamic component of the non-parent-child component.
4-1 using the detail points of the component
4-2 data transfer between parent and child components
4-3 component parameter Check and non-props characteristics
4-4 binding a native event to a component
4-5 passing values between non-parent and child components
4-6 using slots in Vue
4-7 Scope Slots
4-8 dynamic components and v-once directives

5th. Animated effects in Vue
This chapter will explain the CSS and Js animation principles in Vue, as well as the use of the ANIMATE.CSS and Velocity.js animation libraries in Vue, and after understanding the fundamentals of animation, this chapter expands the knowledge of the multi-element and list transition in Vue, and takes the students to learn how to The animation effect is encapsulated in code. ...
5-1 Vue Animation-the principle of CSS animation in Vue
5-2 using the Animate.css library in Vue
5-3 using transitions and animations in Vue
The combination of Js animation and velocity.js in 5-4 vue
5-5 the transition of multiple elements or components in the Vue
5-6 the list transitions in Vue
5-7 the animated package in Vue
5-8 subsections of this chapter

6th. Vue Project Preheating
This chapter first explains the basic configuration of the project environment, based on the analysis of the Project code directory structure, extending the concept of single-file components and single-page application routing in Vue, and finally will take you to organize the project directory, complete the stylus, RESET.CSS and other basic tools and styles introduced, Complete the preparation before the project development. ...
6-1 Vue Project preheating-Environment configuration
6-2 Vue Project Preheating-Project Code Introduction
6-3 Vue Project preheating-Single file components and routing in Vue
6-4 Vue Project preheating-single page application vs multi-page application
6-5 Vue Project preheating-Project Code initialization

The 7th Chapter Project actual combat-Travel website Homepage development
This chapter formally enters the project development link, will take everybody complete realization Project the homepage, covers the function point to contain the header component splits, the Iconfont introduction, the multi-block carousel, the hot sale recommendation and the weekend tour and so on display module.
7-1 Vue Project Home-header area development
7-2 Vue Project Home-use and code optimization for Iconfont
7-3 Vue Project home page-Home carousel diagram
7-4 Vue Project Home-icon Area page layout
7-5 Vue Project Home-icon area logic implementation
7-6 Vue Project Home-hot selling recommended component development
7-7 Vue Project homepage-Development of Weekend tour components
7-8 Vue Project Home-send AJAX requests using Axios
7-9 Vue Project Home-Home parent-child group component transfer value

The 8th Chapter project actual combat-Tour website City List page development
This chapter will explain the development of the details page of the attraction, mainly on the production of the Fade Header components, the splitting of common components, the acquisition and processing of routing parameters, and the use of recursive components. On the Details page, we also encapsulate the generic animation effects in code.
8-1 Vue Project City Selection page-routing configuration
8-2 Vue Project City Selection page-search box layout
8-3 Vue Project City Selection page-list layout
8-4 Vue Project City Selection page-use of Betterscroll and alphabet layout
8-5 Vue Project City Selection page-Dynamic Data rendering for pages
8-6 Vue Project City Selection page-Sibling component data transfer
8-7 Vue Project City Selection page-List performance optimization
8-8 Vue Project City Selection page-Search logic implementation
8-9 Vue Project City Selection page-Vuex for data sharing
8-10 Vue Project City Selection page-Advanced use and localstorage of Vuex
8-11 Vue Project City Selection page-use keep-alive to optimize Web page performance

The 9th Chapter Project actual combat-Tour website Detail Page development
This chapter will explain the development of the details page of the attraction, mainly on the production of the fade header components, the splitting of common components, the acquisition and processing of routing parameters, and the use of recursive components. On the Details page, we also encapsulate the generic animation effects in code.
9-1 Vue Project Details page-dynamic Routing and Banner layout
9-2 Vue Project Details page-Common picture gallery component split
9-3 Vue Project Details page-Achieve header fade fade effect
9-4 Vue Project Details page-Unbind global events
9-5 Vue Project Details page-using recursive components to implement the details page list
9-6 Vue Project Details page-Dynamic Access Details page data
9-7 Vue Project Details page-add basic animations to your project

The 10th chapter of the actual project-the joint adjustment, testing and release on-line
This chapter will be based on the requirements of the Company-level projects, to explain when the development of the project, the developer of the joint adjustment, testing, and release of the detailed process, at the same time point out the process may encounter problems and repair solutions. In addition, we will give you an explanation of the asynchronous component's knowledge points, and by using asynchronous components, we can greatly improve the first screen speed of large projects. Finally, we will explain to you, after this course study, continue to study the Vue side ...
10-1 Vue Project on-line test online-pre-and post-project end-linking
10-2 Vue Project Test on-line-real-machine test
10-3 Vue Project on-line test online-packaged online
10-4 Vue Project Test on-line-asynchronous component implementation load on demand
10-5 Vue Project on-line test-course summary and follow-up study guide

: Baidu Network Disk download

Vue2.5 development where to go Web app from zero basics to combat projects

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.