This article is very basic for students who want to learn VUE but have no experience with VUE. Tells you how to install vUE, and how to create an example and show the content.

One, installation method

Vue is a front-end framework, so we must install it before using it. There are three installation methods:

1.1. Use script tags to introduce

In the official vUE document, we can download the development version and the production version of two JS files, the production version is compressed, deleted comments, warnings, etc., smaller than the development version file, directly through the script tag after downloading, vUE will be registered as a global variable.

// use <script SRC ="static/js/vue.js"></script>Copy the code

1.2, the CDN

The introduction of vue.js file in CDN mode is similar to the introduction of script label above. Note the version number of the imported file when importing vUE. It is recommended to link to a clear version number and build file to avoid impact caused by the new version.

/ / use the < script SRC = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js" > < / script >Copy the code

1.3, NPM

NPM is recommended for vue when building large application projects, as NPM works well with webPack or Browserify module packers, and Vue also provides companion tools for developing single-file components.

What is scaffolding?

Vue provides an official CLI that quickly scaffolding complex single-page applications (spAs). It provides an out-of-the-box build setup for modern front-end workflows.

Before installing vUE using NPM, you need to install the Node.js environment.

NPM install vueCopy the code

1.4, Bower

$bower install vueCopy the code

Initialization

Suddenly remembered a particularly interesting words, programmers everywhere object, but I have no object. Sounds particularly the heart of a word, as the program yuan’s sister before also had this kind of distress, but I still want to tell you a, fate is not to wait for fate!

When vue is instantiated, it is the same as our object oriented instance. If you want to see Object Oriented, you can check it out.

Create a vue instance with the following code:

Var vm = new Vue({el:'#app', data(){// define data}})Copy the code

Vm stands for “ViewModel” and represents an instance of Vue.

When instantiated, an option object can be passed in, and many options can be added to the option object.

El is used to mount elements to be managed, and elements outside el are not parsed by VUE.

Data is used to define the data bound to an element.

The first VUE page

To make a simple Hello World page, we use CDN to introduce vUE. The specific example code is as follows:

<! DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> <div id="app">{{msg}}</div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ el:"#app", data(){ return{ msg:'hello world' } } }) </script> </body> </html>Copy the code

Open the web page and run normally, showing Hello World.

3.1 if we continue to add a sibling node to div, continue to display MSG data as follows:

 <div id="app">{{msg}}</div>
 <div>{{msg}}</div>
Copy the code

The running results are shown as follows:

{{MSG}} is not parsed. Because el mounts the element to be managed, and the following div is not inside the managed element, it is printed directly without parsing the content.

It is important to note that, at development time, the content that needs to be parsed is placed in the mount managed elements.