vue study notes (2)--vue introduction

This article shares some of the introduction to Vue with you. Friends who are interested can take a look

This study mainly comes from the tutorials on the official website https://cn.vuejs.org/v2/ guide

一Vue instance

The vue application starts with a root Vue instance. Vue will bind data to data. When the data data changes, it will also cause the view to change [observer mode], which can realize two-way binding of data [responsiveness]. The attributes in the vue instance can be obtained through $+attribute name. Enter $data

vue binds data during initialization. If elements are added again after initialization, the view will not change.

二Vue life cycle

The vue instance initialization process includes a series of processes, which include setting up data monitoring, compiling templates, mounting the instance to the DOM, and updating the DOM when the data is updated. wait. There will be some lifecycle hook functions during this process, and you can add your own code during this process to implement various functions.
The Vue life cycle diagram is as follows:

三Vue templates

vue templates are all legal html, which is based on html syntax of. Vue will render the template into a virtual DOM.
Vue can implement DOM rendering through the render function through JSX syntax.
vue uses {{}} for interpolation, that is, placeholders. Similar to freemaker. {{}} inserts a text string. If you use v-html, the actual html code will be inserted [this will cause xss, use with caution].
Vue common instructions:

• v-bind: can bind html attributes, which can be abbreviated as: xx

• v-on: Binding event, which can be abbreviated as @xxxx

• ##v-model: two-way binding data

• v-if: judgment statement, v- if must be used with elements. If there are multiple elements, you can use