1. The Timeless “Hello World”
Introduction of VUE
(1) CDN
The significant disadvantage of this approach is slow loading
NPM I vue(I is short for install)
Vue creation and output
Create a VUE instance and mount it to a DOM node
There are many apis in the whole VUE object, among which the apis starting with $are public apis, which VUE expects users to use, while the apis starting with _ are private apis, which VUE does not want to open to the public. The public apis can be found in the official vUE documents
Output variable values in vue’s view with an inline curly brace {{}}
Vue works as a link between the view layer and the data layer, binding views to data and letting the DOM listen for data
2. Text interpolation
The {{}} syntax in vue is text interpolation. Curly braces can be variable values or expressions. For attributes in dom, data binding requires v-bind(short 🙂
3. Event handling
Vue uses v-ON: syntax to bind events, abbreviated as @. The event drivers of the binding can be expressions, functions, and function calls. Function calls are mainly used to distinguish event categories
Now the first time I click on the button the count is going to be +1, and then no matter what I click on it, the count is going to be the same, okay
4. Calculate attributes
Computed attributes in VUE are declared in the form of functions for computed attributes in options, which are used when an attribute needs to depend on other attributes, the same as variables declared in data
The advantage of calculating attributes is that they are cacheable. When the dependent attributes remain unchanged, the browser will cache the value of the current calculated attribute and call the cached value in subsequent calls, so as to achieve optimization purposes and improve the readability of the program. The calculated attributes can depend on multiple attributes, so it is a many-to-one relationship
5. Listen
The monitor in vUE is declared in Watch in Options. When a value changes, we need to use the watch function to do something
The method in Watch is lazy loading, that is, the call is not automatically executed when it is first run. If it needs to be executed immediately, set the immediate attribute to true
An object can also be observed in Watch, but by default, function calls are not penalized when any property in the object changes. Function calls are triggered only when all properties change. If you want to trigger function calls when any property changes, you need to set the deep property to true
Watch is a one-to-many relationship, that is, observing a point can change multiple values or do asynchronous operations
Conditional rendering
Vue’s conditional rendering is v-show and V-if. The difference between the two is that when hiding the DOM, v-show adds display: None to the DOM to hide it, whereas V-if comments out the entire DOM element
V-if is needed when a module is not loaded (lazy loading) at the first step, so as to achieve optimization purposes. V-show is used for explicit and implicit control when it is necessary to frequently switch between explicit and implicit. It is necessary to consider browser redrawing and backflow, and V-show is better at this time
7. List rendering
Vue loop syntax when v-for… in… Can loop through an array or object
8.class&style
Vue class works the same way as V-bind, which uses the :class form to accept objects, arrays, or expressions
The use of style is basically the same as style
9.v-model
There is a requirement that the value displayed is the same as the value of the input box, and when the content of the input box changes, the displayed value will change, using the original JS logic to achieve the following
