Since the release of Vue2.0, Vue has become a hot topic in the front-end field, and Github has also broken through the star of 30,000, so how to learn Vue2.0 efficiently and quickly for novices?

Vue basis

The official scaffolding vuE-CLI component project is not recommended for children’s shoes that have not been exposed to ES6 and Webpack. Work through the components chapter at least in document order. Start by introducing vue.js directly into HTML files to understand the basic instructions of VUE and the infrastructure of the entire VUE instance. The lifecycle of a VUE is important, and knowing this can save you a lot of problems. After learning these, you can do some small training projects, such as the eternal Todolist… Now that you are ready to learn how to use vue-CLI component projects, it is recommended to read es6’s introduction to modules before learning about componentization. It is not enough to know the basics of NPM, know how to use git-Bush to install Module dependencies, and know some common commands. See the NPM documentation for more information on this topic and after reading this, you can try to implement the previous written demo with vue-CLI. Attached is a little demo vue-Demo-Search that I wrote to get started. Take a look at the components and see how to implement componentation in VUe-CLI. This concludes the vUE Basics section. You can also conditionally consult the rest of the official documentation in the advanced section, if time is limited, go directly to vue-Router

Vue-router

As before, it is recommended to go through the document directly in HTML + JS to get a good look at the routing navigation hooks. After reading the document you can start vue-CLI, the general novice in these days will be dead or alive run out. The easiest way to sniggle is to go to Github and search for some vue-Router2.0 demo to see how to build routes and project directories. I have a portal here and if I can get out, I can do some small projects, such as writing a daily zhihu. You can write a demo with some component libraries to learn more about componentization. For example, element-Mint-UI of the Ele. me team

Vuex

What is Vuex? Vuex is a state management model + library designed specifically for vue.js applications. It provides centralized storage services for all components within the application, with rules that ensure that state can only change as expected. In other words, it controls some global state of the application. As the state changes, so does the corresponding view.

While learning about Vuex, there are some ES6 features, and when you come across them, it’s best to take a good look at these ES6 features. For example, take a look at ES6’s new Promise and parameter deconstruction when learning about actions. Vuex is mainly used to communicate between different components. It builds the global data and methods of a Vue instance. These data and methods can be get and set in all components of the Vue instance

From getting started to giving up sorting

First, VUE foundation

Vue. Js 2.0: A quick way to get started with Vue2.0. Vue2.0: a quick way to get started with vue Vue2.0 with me into the pit 03 “Vue2.0” with me into the pit — custom notes super easy to use VueJs debugging tool — VUe-devtools Vue2.0 history most complete into the pit tutorial (1) — Build vue scaffolding (VUE-CLI) Vue2.0 history in the most complete pit tutorial (middle) — scaffolding code explanation Vue2.0 history in the most complete pit tutorial (bottom) — actual case Vue2.0 history in the most complete pit tutorial (end) — actual case Vue2.0 – CLI configuration sASS and use sASS function function to achieve PX to REM

2. Vue improvement

Vuejs heart method and techniques Vue2.0 life cycle and some understanding of hook function === “recommend using Webpack (2. X syntax) manual build Vue project comprehensive analysis vuE-CLI generated projects using other libraries (JS library, CSS library) Vuex from the beginning to the proficient using VUE to communicate with the server – VUE-resource VUE development process of the simplest cross-domain solution rich text editor Ueditor how to use in VUE?

Vue 1.x and vue 2.x

What happens to ve2. X? What are the changes to Vue2. X? — Component communication

4. Other essential knowledge points

ES6 Start (1) ES6 Quick Start (2) ES6 Quick Start (3)

Need video tutorial concern public number [programming skills] (ID: ZXBCWCN) reply 14 can be obtained, pay always have harvest

Vue. Js2.0 core idea

Vue. Js is a library providing MVVM data bidirectional binding, focusing on THE UI level, the core idea is: data-driven, component system.

Data-driven:

In terms of technical implementation, Vue. Js data observation principle uses ES5Object.defineProperty and storage attributes: getter and setter (so only compatible with IE9 and above), which can be called the observation mechanism based on dependency collection. The core is the VM, or ViewModel, which ensures consistency between data and views.

Watcher: Each instruction has a corresponding object to observe the data, called watcher, such as v-text=” MSG “, {{MSG}}, that is, two Watcher objects, the watcher objects contain the associated DOM elements to be rendered.

<div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue! '}})Copy the code

Observation mechanism principle based on dependent collection:

1 Transform native data into “observable”, usually by calling defineProperty to change the data in the data object to a storage attribute. An observable can be evaluated as a getter or assigned as a setter. 2 During the parsing of the template, that is, during the evaluation of the watcher, each observable being evaluated registers the current Watcher as a subscriber and becomes a dependency of the current Watcher. 3 When a dependent observable is assigned a value, it notifies notify that all of its Watcher subscriptions are reevaluated and triggers an update that changes the DOM rendering associated with the Watcher object. The advantage of dependent collection is that changes to the data can be tracked accurately and proactively, without the need to manually trigger or evaluate all watchers in scope (a disadvantage of angular’s dirty check implementation). In particular, with arrays, you need to listen for changes to the array through mutable methods (such as push) that wrap around the array. When adding/deleting attributes or modifying elements at specific locations in the array, specific functions such as obj.$add(key, value) are called to trigger the update. This is limited by the language nature of ES5.

Component system:

The application UI can be thought of as being entirely composed of a tree of components.

Register a component:

Vue.component(' my-Component ', {// template: '<div>{{MSG}} {{privateMsg}}</div>', // Props: {MSG: Data: function () {return {privateMsg: 'Component! ' } } }) <my-component msg="hello"></my-component>Copy the code

The core options of the component

1 Template: A template declares the mapping between data and the DOM that is ultimately presented to the user. Initial data: the initial data state of a component. For reusable components, this is usually a private state. 3 Accepted external parameters (props) : Parameters are used to transfer and share data between components. 4 Methods: Data changes are generally performed in component methods. Lifecycle hooks: A component fires multiple lifecycle hook functions. The latest version 2.0 has major changes to the names of lifecycle hooks. 6 Private Resources (assets) : Vue.js refers to user-defined commands, filters, and components as resources. A component can declare its own private resources. A private resource can be invoked only by this component and its children. Webpack is an open source front-end module building tool that provides a powerful Loader API to define pre-processing logic for different file formats, which is the basis of the.vue suffix single-file component form. Therefore, vue-Loader developed by UVU allows the integration of template, style and logic into a single file. Vue file suffix to form a single file component format, which is convenient for project architecture and development reference.

Other features:

Asynchronous batch DOM update: When a large amount of data changes, all affected watcher will be pushed to a queue, and each Watcher will be pushed to the queue only once. This queue is executed asynchronously on the next tick of the process. This mechanism can avoid redundant DOM operations caused by multiple changes of the same data and ensure that all DOM write operations are executed at the same time, avoiding the layout that may be caused by DOM read/write switching. 2 Animation system: Vue.js provides a simple but powerful Animation system. When the visibility of an element changes, users can not only easily define the corresponding CSS Transition or Animation effect, but also use rich JavaScript hook functions for lower-level Animation processing. 3 Scalability: In addition to custom directives, filters, and components, vue.js also provides a flexible mixin mechanism that allows users to reuse common features across multiple components.

Node&angular/vue.js video tutorials need to be accessed by the following public number: ZXBCWCN (ID: ZXBCWCN)

Finally, the learning sequence of Vue 2.0 is suggested

start

  1. Solid JavaScript/HTML/CSS skills. That’s the precondition.

  2. Read through the basics of the official guide. Do not use any build tools, just use the simplest script, imitate the examples in the tutorial, understand how to use. Starting with vue-CLI is not recommended, especially if you don’t have a Node/Webpack base.

  3. Follow the examples on the official website, think of some similar examples, imitate the implementation to practice, deepen understanding.

  4. Read the first half of the tutorial, up to “Custom Directive”. Focus on understanding Vue’s responsive mechanisms and component lifecycle. “Render Function” can be skipped if you have trouble understanding it.

  5. Read the sections on routing and state management in the tutorial, then learn vuE-Router and VUex as needed. Again, ignore the build tools and follow the examples in the documentation.

  6. If you’re not familiar with Node-based front-end engineering after the basic documentation, you’ll need to take a refresher course. The following is not strictly Vue per se, nor does it cover all front-end engineering knowledge, but it is a prerequisite for large Vue projects and should be a qualified “front end engineer”.

Front-end ecology/engineering

  1. Learn about the specification behind JavaScript, the history of ECMAScript, and the way the specification is currently made. Learn the new features of ES2015/16, understand ES2015 Modules, and pay proper attention to proposals that have not yet become standard.

  2. Learn how to use the command line. Mac is recommended.

  3. Learn the basics of Node.js. It is recommended to use a tool like NVM to manage the Version of Node on the machine, and to configure the NPM Registry as the mirror source for Taobao. At a minimum, understand the common NPM commands, how NPM scripts are used, the semantic version number rules, the CommonJS module specification (see its similarities and differences with ES2015 Modules), Node package parsing rules, and the common Node apis. You should be able to write some basic command-line programs yourself. Note that most ES2015 features are already supported in the latest version of Node (6+) to consolidate ES2015.

  4. Learn how to use/configure Babel to compile ES2015 into ES5 for the browser environment.

  5. Webpack study. Webpack is an extremely powerful and complex tool to start with, just understand its “everything module” idea and have a basic understanding of its common configuration options and loader concepts/usage, such as how to use Babel with Webpack. One of the challenges of learning Webpack is its messy documentation. Do a lot of searching and there should be good third-party tutorials. Good English is recommended to read the Webpack 2.0 documentation, which is a great improvement over 1.0, but needs to be aware of the incompatibilities with 1.0.

Vue advanced

  1. With the basics of Node and Webpack, vue-CLI can be used to build webPack-based projects that support single-file components. It is recommended to start with the Webpack-Simple template and read the rest of the official tutorial progression and the vue-Loader documentation for some advanced configurations. If you are interested, you can build a project from scratch to deepen your understanding.

  2. Try to integrate vuE-Router and VUex based on Webpack template according to the example

  3. In-depth understanding of the Virtual DOM and the chapter on “Render Functions” (optionally using JSX), understanding the correspondence between templates and Render Functions, understanding how they are used and applicable scenarios.

  4. (Optional) Know how to use server-side rendering as required (with Node server development knowledge required). It’s more important to understand the problem it solves and whether you need it or not.

  5. Read open source Vue applications, components, plug-ins source code, try to write their own open source Vue components, plug-ins.