Vue, or vue.js, is a popular front-end development framework that has developed into an excellent front-end ecology.

To learn Vue, you need to have a basic knowledge of HTML, CSS, JavaScript, and preferably experience developing websites using these technologies.

Vue.js is almost impossible to understand if you are not familiar with JavaScript. So readers, please be prepared to learn vue.js according to your own situation.

Once you have the basics, start building the environment, learning as you go.

There is no doubt that reading while doing is the best way to master a practical skill.

The installation

For small projects, simply use the vue. js library for reference to the project. For large projects, it is officially recommended to use NPM to install vue. js and various ancillary extension tools.

reference

Here’s the official way to quote:

# test environment < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > # production environment - specify version < script SRC = "https://cdn.jsdelivr.net/npm/[email protected]" > < / script > # native ES Modules environment < script type = "module" > import Vue the from https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js: '< / script >Copy the code

The installation

NPM is a package management tool for JS/Node. Vue tools use NPM to install other related JS packages to local projects.

The following is a list of how to install Vue from scratch:

[NVM](https://github.com/nvm-sh/nvm) curl -o- # https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash install the latest version of the Node NVM install Node # installationCopy the code

The principle of

To grasp the essence of Vue, we need to keep the following points in mind:

Virtual DOM

A virtual DOM is a virtual DOM element that does not need to be defined in the HTML node tree in advance. Instead, you “build” enough of what the virtual DOM wants to do, and then mount it into the real HTML structure, so you achieve what’s called MVC of the front end.

The fundamental principle of Vue is virtual DOM technology.

The root object

Whether you have studied JS or not, you must understand that everything in JS is an object. A variable, a class, a function, all have the characteristics of an object.

The root instance of Vue is a basic object that is the parent of other children defined in a Vue object.

The root instance itself is usually denoted by this.

JSON format,

In the root instance of Vue, “data + function group option” is mainly displayed in JSON format. Data can be written either as an object or as a function (functions must be written in Vue components).

Var app = new vue({el: '#app', data:{message: 'hello World'}, data: function() {return {mess: {functionName1: function (){}, functionName2: function (){}, functionName3: function (){} function (){}, }, methonds: { functionName1: function (){}, functionName2: function (){}, functionName3: function (){}, }, mounted: { functionName1: function (){}, functionName2: function (){}, functionName3: function (){}, }, beforeDestory: { functionName1: function (){}, functionName2: function (){}, functionName3: function (){}, }, filters: { functionName1: function (){}, functionName2: function (){}, functionName3: function (){}, }, computed: { functionName1: function (){}, functionName2: function (){}, functionName3: function (){}, }, } )Copy the code

Vue Life cycle

A Vue instance has a lifecycle, as shown below:

Flexible data binding

The Vue instance is fundamental, but must be connected to the HTML node in order to be effective.

This connection process is called data binding.

In Vue technology system, technical elements related to data binding include:

  1. Instructions: v – model, v – on: click | dblclick | keyup | mousemove, v – bind, v – HTML, v – if, v – pre, etc.
  2. Interpolation: {{message}}, {{message | filter}}, etc.

This article is originally published by Websoft9.