How to understand Vue
Vue is a set of progressive frameworks for building user interfaces. The core functionality of “progressive” Vue is a view template engine that can build a complete framework by adding component systems, client routing, and large-scale state management. These functions are independent of each other, and you can choose any other component based on the core function. Incremental is how Vue is used.
How do you build the user interface
Almost any type of application interface can be abstracted into a component tree. A Vue application consists of a root Vue instance created through the new Vue() function, and an optional nested, reusable tree of components.
Vue instance
Create a Vue instance
- Specified directly
el
attribute
var vm = new Vue({
'el':"#root",
'template':"<div>hello world</div>"
});
Copy the code
- through
$mount
Method to mount
var vm = new Vue({
'template':"<div>hello world</div>"
})
vm.$mount('#root');
Copy the code
Create a configuration object for the Vue instance
When a Vue instance is created, a configuration object can be passed in. This configuration object is divided into several categories: data, DOM, lifecycle hooks, resources, etc.
data
Data => Data object of the Vue instance
- Root instance/component data attribute difference, arrow function problem.
- When a component is defined, data must be declared as a function that returns a data object (a function whose return value is an object). Because components can be used to create multiple instances, if data remains a pure object, all instances will share references to the same data object.
- The data function can be called each time a new instance is created, returning a new copy of the original data as a data object.
- If the value of data is an arrow function, this does not point to an instance of the component, but you can still access the instance as the first argument to the function
data: (vm) = >{{a: vm.MyProp }}
Copy the code
- The relationship between the data attribute and $data
– After the instance is created, the original data object can be accessed using vm.$data
- Vue instances also proxy all properties of data objects, so accessing vm.a is equivalent to accessing vM. $data.a
- Properties that start with _ or are not proxied by Vue instances (i.e. cannot be accessed through vM. a) because they may conflict with Vue built-in property and API methods, such as VM. The properties of the initial property are not proxied by the Vue instance (i.e. cannot be accessed through vM. a) because they may conflict with the built-in property and API methods of Vue, such as VM. Properties of the initial property are not proppable by Vue instances (i.e. cannot be accessed via vM. a), as they may conflict with the built-in Vue property API methods, which can be accessed using methods such as vM.data._property.
- Special point
- Objects must be pure objects with zero or more key/value pairs. Data should only be data, and it is not recommended to observe objects with stateful behavior. (How to understand?)
props
=> Receive data from the parent component
Props can be arrays or objects.
- when
props
When is an array, the usage is as follows
Vue.component('test', {
props: ['prop1'.'prop2']}Copy the code
- when
props
Is used to configure advanced options, such as type detection, default values, and custom validation.
- Type can be one of the following constructors:
String
.Number
.Boolean
.Array
.Object
.Date
.Function
.Symbol
, any custom constructor or array of the above. Will check oneprop
Is of a given type, otherwise a warning is thrown. Default: any
For theprop
Specify a default value. If theprop
If it is not passed in, use this value instead. The default value of an object or array must be returned from a factory function.The require: Boolean
Define theprop
In a non-production environment, if the value istruthy
And that theprop
If not passed, the console warning will be thrown. (Non-production environment? Is there a warning in the development environment?validator: Function
Custom validation functions willprop
As the only argument. In a non-production environment, if the function returns onefalsy
That is, validation failed. A console warning will be thrown.
Note: When setting a default value, the default value of an object or array must be returned from a factory function.
Methods => Custom methods on instances
Methods will be mixed into the Vue instance and can be accessed directly from the instance or used in the instruction expression sheet, where this is custom bound to the Vue instance. Arrow functions should not be used to define methods functions (the arrow function this missing problem).
Computed properties
- It is equivalent to mounting an additional attribute on the Vue instance, except that this attribute is calculated from one or more attributes in the data object
- That is, the calculation properties are mixed into the Vue instance, and the This context of all getters and setters is automatically bound to the Vue instance
- The result of the evaluated property is cached, except for recalculation of dependent responsive property changes.
- Usage: both = functions or objects (get /set)
var vm = new Vue({
data: {a:1},
computed: {aDouble:function() {
return this.a * 2
},
// Read and set
aPlus: {
get:function(){
return this.a + 1
},
set: function(){
this.a = v - 1}}}})Copy the code
watch
=> Listener object
- An object whose key name is the expression to observe and whose value is the corresponding callback function. The value can also be a method name, or an object that contains options. (Key name: expression; Key values: functions, objects, arrays)
- When to add listener:
Vue
Called when instantiated$watch
To traverse thewatch
Objectproperty
.
var vm = new Vue({
data: {
a:1.b:2.c:3.d:4.e: {f: {g:5}}},watch: {
a:function(newValue,oldValue){
console.log('newValue',newValue);
console.log('oldValue',oldValue);
},
// Method name:
b:'someMethod'.c: {// This callback is called when the property of any listening object changes, no matter how deeply nested it is
handler:function(newValue,oldValue){}deep:true
},
d: {handler:'someMethod'.immediate:true // This callback will be invoked immediately after the listening starts
},
e: [// We can pass in an array of handlers that will be called one by one when the value of e changes
'handle1'.function handle2(newValue,oldValue){}, {handler:function handler3(newValue,oldValue){}}]}})Copy the code
- Note: Configure the object’s
immediate
Properties,deep
The meaning of the attribute.