In this paper, copyright belongs to "public, | front ten thousand hours", welcome reproduced! Please indicate the source of reprint, without consent, can not modify the content of the article.Copy the code

🔥🔥🔥 “front-end 10,000 hours” in the two star column limited time discount, welcome to click the public account menu bar module to understand ~

❗ ️ ❗ ️ ❗ ️

The following link is the latest erratum to this articleThe interview | Vue”

  • End face examination questions “before” and “reference answer” belong to “RMB 102.4 RMB 199 | brush the interview question” private team exclusive content, pay reading;

  • Articles listed in the list below article belong to “RMB 2020 RMB 2999 | from zero basis to easily obtain employment” private team exclusive content, except for the part of the open source, other all need to pay;

Pre-web knowledge

Spending HTML

Spending CSS

🚀HTML+CSS combat: PC “simple book” static home page development (difficulty: ☆☆)

Spending JavaScript first

Introduction to spending JavaScript

Spending JavaScript based

🚀 native JS combat: small DEMO series

Spending ES6 +

🚀 native JS Practical combat: Building wheels series

Front and back end interaction

Front-end development

🚀 native JS project actual combat: mobile end music player

Learn the basic syntax of react. js

🚀 react. js project: PC “Simple book” development


Vue. Js basic grammar learning

  • Vue introduction — ① Hello World [ref: vue_01]

❗❗️❗ ❗ P.s. Public id dialog box Reply vue_01, vue_02, web_01, html_01 or css_01 Check the reference answer sample ~

1. What is vue.js? 2. What are the main functions of vue.js?Copy the code
  • “Vue introduction — ② TodoList (V-Model, V-for, V-ON) development” [Ref. : VUe_02]
1. How to use v-Model? 2. Can V-ON listen on multiple methods? 3. How to use event handlers? 4. How to implement bidirectional binding? 5. What modifiers does v-Model support?Copy the code
  • Vue introduction — ③ MVVM Mode [Ref. : vue_03]
1. What is MVVM? How is it different from MVC? 2. What are the advantages of Vue? 3. Understanding of progressive framework? 4. Comparison of the three frameworks?Copy the code
  • “Introduction to Vue — ④ To Transform TodoList with Components” [Ref. Vue_04]
1. How to introduce components? 2. What is the component and give an example? 3. What is the global registry in the component? 4. Why do you need local registration? 5. What is the difference between local registration and global registration in a modular system?Copy the code
  • “Introduction to Vue — ⑤ Simple Value transfer between components” [Ref. : vue_05]
What is props?Copy the code
  • Vue Basics — ① Vue Examples [ref. : vue_06]
1. What is a Vue instance? 2. How do I access the root instance? 3. How to access the parent instance?Copy the code
  • “Vue Basics — ② Vue Instance Lifecycle” [Ref. Vue_07]
1. What is the function of the Vue life cycle? 2. What is the Vue lifecycle? 3. Which hooks trigger the first page load? 4. Describe the specific scenarios for each cycle. 5. Created and Mounted 6. In which periodic function does Vue get data? 7. How to use $nextTick?Copy the code
  • Vue template Syntax
  • “Vue Basics — ④ Computing Properties, Methods and Listeners” [Ref. : vue_09]
Question: Use of computed attributes? Is it different from Watch and methods? What are the usage scenarios of computed and Watch respectively?Copy the code
  • 5. Calculate getters and setters for attributes [ref. Vue_10]
Vue. Set view update?Copy the code
  • “Vue Basics — ⑥ Style Binding in Vue” [ref: vue_11]
Question: How do I make CSS work only in the current component?Copy the code
  • Conditional Rendering in Vue [REF. Vue_12]
1. What are the similarities and differences between V-show and V-IF commands? 2. Priorities of V-IF and V-for? 3. What are conditional directives?Copy the code
  • Table Rendering in Vue [ref. : vue_13]
1. Tell how many Vue commands and how to use them. 2. Why use key? 3. What are the common commands? 4. What is the purpose of the V-for directive? 5. How to reuse elements with key attributes? 6. Why can't we use both the V-if and v-for directives on the same element? 7. Why do WE need the key attribute when using the for directive? 8. How to use the V-for command in a range? 9. How to use the V-for directive on a template? 10. What is array detection for mutations? 11. What is array detection non-mutation method? 12. What are the precautions for detecting array changes? 13. What should be paid attention to when detecting object changes?Copy the code
  • “Understanding Vue components in depth — ① Details of using Components” [ref. Vue_14]
1. Why must data be a function in Vue? 2. Two core points of Vue? 3. How do I get the DOM?Copy the code
  • “In-depth Understanding of Vue components — ② Data transfer between parent and child Components” [Ref. : vue_15]
A Vue parent component passes data to a child component. 2. Does a child component pass events like a parent? 3. Two-way data binding across components? 4. What is the acceptable type of prop? 5. What is the data flow behind props? 6. What are non-prop properties? 7. What validations are available for props?Copy the code
  • Insight into Vue Components — component parameter Verification and Non-props features
  • “Understanding Vue components in depth — bind Native Events to Components”
  • “In-depth Understanding of Vue components — value transfer between non-parent and child Components” [Ref. : vue_18]
Question: Communication between components?Copy the code
  • An in-depth understanding of Vue components — ⑥ Using slots in Vue [Ref. Vue_19]
What is slot?Copy the code
  • In-depth Understanding of Vue Components — ⑦ Scope slots
  • “Deep Understanding of Vue Components — ⑧ Dynamic Components and V-once Instruction” [Ref. Vue_21]
What is a dynamic component?Copy the code
  • Animation effects in Vue — principles of CSS Animation in Vue
  • Using the Animate. CSS library in Vue
  • Animation effects in Vue — ③ Using both transitions and animations in Vue
  • Animation effects in Vue — ④ The combination of JS animation and Velocity.js in Vue
What are the possible ways to provide Transitions?Copy the code
  • Animation effects in Vue — ⑤ Transitions of multiple elements or components in Vue
  • Animation effects in Vue — ⑥ List Transition in Vue
  • Animation Special Effects in Vue — ⑦ Animation Encapsulation in Vue


▽ 🚀 vue. js Project actual combat: mobile terminal “tourism website” development

  • Vue Actual Combat Preparation — ① Using “Scaffolding” to build projects
  • “Vue combat preparation — ② Project framework source code analysis” [Id: Travel_02]
Vue CLI project SRC directory each folder and file use?Copy the code
  • Vue Preparation — ③ Single file Components and routing in Vue [Id: Travel_03]
1. What problems does the single file component solve? 2. What is the difference between vue-router jump and location.href? 3. Router-link in Vue is useful on PC, but not on Android. 4. Failed to register events in Vue2 on router-link? 5. What is a Vue Router and its features? 6. What are the steps of using Vue Router and give an example? 7. What is route matching priority? 8. What is nesting?Copy the code
  • “Vue actual combat preparation — ④ Single page application 🆚 Multi-page application” [Id: Travel_04]
Question: What are the advantages and disadvantages of single-page apps and multi-page apps?Copy the code
  • Vue Preparation — 4 Things you Need to Do first to Get a “mobile” project
  • Home development — ① Header Component [Id: travel_06]
Question: 1. When do I need a single root element? 2. What is the Asset URL transformation rule? 3. Is it possible to mix local and global styles? 4. Do parent styles leak into child components in Scoped CSS?Copy the code
  • Home Page Development — ② Round cast Component [Id: Travel_07]
1. What is a plug-in and its services? 2. How do I create a plug-in? 3. How to use plug-ins? 4. How to use the deep selector?Copy the code
  • “Home page development — ③ Icon area component”
  • “Home page development — ④” Hot Recommendation “and” where to go on the weekend “component”
  • “Homepage development — ⑤ AJAX to get homepage data”
  • Development of City Selection Page — ① Header Component
  • City Selection Page Development — ② “Search Box”, “List” and “Alphabet” Layout
  • “City Selection Page development — ③ AJAX access to city selection Page data”
  • Development of City Selection Page — linkage between “List” and “Alphabet”
  • Development of City Selection Page — implementation of “Search Box” Logic
  • Development of City Selection Page — ⑥ Vuex Component Data Sharing
  • Development of city selection page — ⑦ use of localStorage and advanced use of Vuex
  • “City Selection Page Development — Using Keep-Alive to Optimize Web Performance” [Id: travel_18]
What is the purpose of the keep-alive tag?Copy the code
  • Detail Page Development — ① Dynamic Routing and Banner Component Layout
  • Detail Page Development — ② Public Picture Gallery Component
  • “Detail page development — ③ Header component (implement Header fade in)”
  • Details Page Development — ④ Details page “List” and “User Review” component [Id: Travel_22]
Question: What is a recursive component?Copy the code
  • “Detail Page Development — AJAX dynamic access to detail Page data”
  • Detail Page Development — ⑥ Basic Animation Components
  • Performance Optimization and Project Launch [Id: Travel_25]
1. What event modifiers does Vue provide? 2. What are asynchronous components? 3. What is the structure of an asynchronous component factory?Copy the code