Vue2 summary is simple and easy to understand

1. Basic knowledge

1. Vue is a progressive framework for building user interfaces: you can use only part of me, instead of using all of my parts

2. The components of Vue:
   

3. At its core, Vue.js is a system that allows declarative rendering of data into the DOM using a concise template syntax

• Template syntax: Most of the tags in html have two very important things - tag attributes and tag bodies. Through the template syntax written in html, we can use js to control them responsively.

• Declarative rendering of data: Declarative rendering is the mode in which Vue operates on data. When the property of the Vue object is bound to the dom node, if the property changes, the data on the page will be displayed without any other operations on your part. Changes occur automatically.

4. The three front-end components html, script, css, and vue mainly focus on the interactive control of the former two. For HTML, the core of Vue is the template syntax; for script, the core of Vue is the Vue instance object. The bridge between the two is the selector, and generally we use the id selector for binding.
   

5. The essence of the vue framework is a js file. Any framework is a customized design of native syntax. It can be said that a framework without obvious advantages is not a good framework.

6. Directly download and <script>import with the tag, Vue will be registered as a global variable, use new Vue (option object) to create a customized Vue instance

7. A Vue application consists of a root Vue instance created via new Vue, and optionally a tree of nested, reusable components.

8. All Vue components are Vue instances and accept the same options object (except some options specific to the root instance).

9. When a Vue instance is created, it adds all the properties in the data object to Vue's reactivity system. When the values ​​of these properties change, the view will "response", that is, the matching will be updated with the new values.

10. In addition to data properties, Vue instances also expose some useful instance properties and methods. They are all prefixed with $ to distinguish them from user-defined properties.

11. Do not use arrow functions on option properties or callbacks, because arrow functions do not have this, and this will be used as a variable to search up to the upper lexical scope until it is found, which often leads to Uncaught TypeError errors

12. Instance lifecycle hook: Each Vue instance goes through a series of initialization processes when it is created - for example, it needs to set up data monitoring, compile templates, mount the instance to DOM and update DOM when data changes, etc. At the same time, some functions called life cycle hooks will also be run during this process, which gives users the opportunity to add their own code at different stages.

13. Template syntax includes interpolation syntax and instruction syntax, and the data bound to them is a value or a js expression with a return value

14. Manipulating an element's class list and inline styles is a common requirement for data binding. Because they are all attributes, we can use v-bind to handle them. When using v-bind for class and style, Vue.js has made special enhancements. The type of the expression result can be an object or an array in addition to a string.

15. If an arrow function is used in a data attribute or computed attribute, this will not point to the instance of the component, but you can still access the instance as the first parameter of the function.

16. Properties or methods can be directly proxied or mounted, while objects can only be mounted on component instances in a mixed-in manner.

17. The key in the object is the same as the value, which can be abbreviated as key

2. Template syntax in template

1. Interpolation syntax
   Function: The tag body content of the element in the binding template is the attribute of the vue instance Usage
   : { {JavaScript 表达式}}Or { {vue实例属性名}}
   note: the v-text instruction can also bind the element tag body, the difference is that v-text can only replace the tag body as a whole, which is not enough Flexible, the interpolation syntax can be bound with mixed expressions, which is more flexible

2. command syntax

• Attribute binding
  Function: Bind the attribute of the element to the expression value.
  Usage: v-bind: attribute name = "expression" abbreviation : attribute name = "value"

• Form binding
  Function: Realize two-way binding between form input and application state Usage
  : v-model="vue instance attribute name"

• Event binding
  Function: add an event listener, execute a method after listening to an event usage
  : v-on: event name = "method name to be executed after sending the event" abbreviation @event name="send the event The method name executed after'

• List rendering
  Function: to render elements multiple times based on an array, you must use a specific syntax alias in expression to provide an alias for the currently traversed element
  Usage:
  

• Conditional rendering
  Function: Conditionally render a piece of content. This content will only be rendered if the directive's expression returns a truthy value.
  Usage:
  
  Note: Both v-show and v-if can perform conditional rendering. The difference is that when v-if is false, element rendering will not be performed, and v-show will render regardless of whether it is false or not, just simply switch The CSS property display of the element. If switching frequently, use v-show, otherwise use v-if

3. Vue instance options in script

• data
  receives objects or functions, components can only receive functions, because components need to be reused, by providing the data function, we can call the data function after each creation of a new instance, thus returning a new copy of the original data object.
  After the instance is created, vm.$datathe original data object can be accessed via . The Vue instance also proxies all properties on the data object, so accessing vm.a is equivalent to accessing vm.$data.a.
  Properties starting with _ or $ will not be proxied by the Vue instance, and can be accessed using, for example, vm.$data._property.

• computed
  receives an object, the key is the property name, and the value is a function or an object with a get or set function. The result of the computed property will be cached, and will not be recalculated
  unless the dependent responsive property changes .

• methods
  receive objects, the key is the method name, and the value is the function.
  The this in the method is automatically bound to the Vue instance,
  and the arrow function should not be used to define the method function

• mounted
  receiving function, which will be called after the instance is mounted