Basic introduction and overview of Vue

1. What is VueJS?

Simple and compact, progressive and powerful technology stack;

2. Why learn VueJS?

Smooth learning curve, easy to use, powerful, lightweight; One of the three most popular frameworks, widely used; Promotion and salary increase;

3. VueJS pattern

The MVVM pattern, the bidirectional binding of the view layer and the data layer, allows us to focus less on DOM manipulation and more on data and business logic.

4.VueJS environment construction

Vue scaffolding tool VUE-CLI

5.Vue example rehearsal

1) Environment setup (i.e. add a link to vue.js in the body)

Create an index.html file with a vue. Js link copied from the official website and downloaded from the BootcDN website.

The < body > < div id = "app" > {{MSG}} < / div > < script SRC = "https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js" > < / script > < / body >Copy the code
2) Entrance to VueJS: EL
  • Operate within another script tag to create an instance of Vue.
  • This new Vue is the startup entry for the entire program;
  • Which Dom node will the Vue instance be mounted on?
  • So use EL to specify which Dom node to mount to, can be a label, can be CSS, commonly used to distinguish id;
<script> var app = new Vue(el:"#app", data: {MSG :" Vue "}) </script>Copy the code
3) Usage of data content data

Data can declare that the contents of the data written in the two-way binding within the application have been mounted to

In div, just type the property name of the previous name data, and the value of data will be rendered to the page. All subsequent data will be declared in data.

4) How to access the content in VUE

Log (app.el)console.log(app.el)console.log(app.el)console.log(app.data) Access properties in data console.log(app.msg)vu

Vue life cycle

<script> var app = new Vue(el:"#app", data: {MSG: }, ***created:function(){alert(' id ', 'id', 'id ')}, mounted: Function () {alert(' I'm a vue instance, already mounted to DOM') *}***}); * </script>Copy the code