Vue instance

New a Vue instance, a program to load when there must be an entry point, the figure is from the VM the Vue instance began to load, so the vmVue instance, known as the root instance

El :’#root’ means to tell vue that this instance takes over the div with the id root. When a div with the id root is executed, it will follow vue’s methods. When a div with the id v-ON :click, it will find the corresponding function in the methods of the instance and execute it. When you see a double curly brace, you go to data and look for the value

When no template attribute is given, vue treats the entire div as a templateThe equivalent ofEach component in a VUE is a VUE instanceAnything that starts with $refers to instance properties or instance methods of vUE

The root component data and the child component Data in Vue

Data: The data of the root component (that is, the outermost VUE instance) can be defined directly through the object

When data is defined in a subcomponent, it must be a function that returns an object containing the corresponding data

Why:Because a child component is not called once like the root component, it may be called many times in different places

Such as the red box is called three times, child components of each call, or each child components, I don’t want his child components of data and other conflict, or each child components should have their own data, that is to say, the first row corresponding to the data and the second row corresponds to the data, should be a complete two sets of data, It should not be a shared set of data

The purpose of a function that returns an object from the data of a subcomponent is to make each subcomponent have a separate data store so that the data of multiple subcomponents can not affect each other

Data transfer between Vue parent and child components (parent to child, child to parent, implicit rule)

Parent to child: Passes by binding properties

Child to Parent: The child component internally passes data to the parent in the form of an event trigger

Eg: We want every time the child component is clicked, it can pass something to the parent, such as its current valueWhen the counter component is clicked, it fires the child component’s native handleClick event. HandleClick in turn fires the INC event via this.$emit and passes out a parameter (step 2).The parent component listens for the child component’s event inc and executes the handleIncrease function after listening for the eventYou can then receive the step argument from the child component and use it in the handleIncrease function

Implicit rule: The concept of one-way data flow in Vue: Do not directly modify the data passed by the parent component

Vue has a single data flow concept: a parent component can pass parameters to its children at will, but! Child components are not allowed to modify the parameters passed by the parent component

According to this? If the parent component passes a reference type of an object type, and the child component changes something, it is possible that the reference type data is also used by other children, which may affect other children

Now what if we do need to change the data that comes in?

Now this example is going to increment the incoming output by one per click, very simple

We keep a copy of the parameters from the parent component in our child component’s own data, and when we need to manipulate the parameters, we can change the parameters from the child component. As shown in the figure:

Vue component parameter verification and non-props feature

Component parameter verification (Type/Required/Default/Validator)

The parent component passes parameters to the child component, and the child component accepts parameters, and it can also impose certain constraints on the parameters that are passed. In this case, the parameters that are passed must be of type string and an error will be reported if they are passed other typesYou can also use array syntax to say that the value passed in is either a number or a stringYou can also say, require means whether or not this property must be passed in, and if it’s true, not passing this property will cause an errorIf the require property is set to false, you can give a default property, which gives the template bound content a default value when no arguments are passed. As shown in the figure, content is rendered as default valueIf the length passed is greater than 5, the verifier returns true. If it is less than 5, an error is reported

The characteristics of props

The non-props feature corresponds to the props feature. The parent component passes a value to the child component, and the child component declares an acceptance of the value passed by the parent component (which happens to declare the content in the props), so there is a mapping between the parent component and the parent component

In the first case, the parent component sends a value that the child component does not accept, and an error is reported when the value is usedIn the second case, if the passed value is not used, the value is actually displayed in the DOM properties, whereas the props property does not display the passed value in the DOM properties

Vue transfers values between non-parent and child components

The page on the left can be divided into component structures on the right. The second and third red lines are non-parent components. How should values be transmitted between them

There are generally two ways to solve the value transfer problem between non-parent components in VUE

1. Make use of Vuex, the framework of data layer provided by Vue officially (I have encountered many problems in the project, so I will talk about it later by writing a blog with the project)

2. Bus mechanism using publish-subscribe mode (we will cover this method here

We combine specific examples. For example, when clicking on the upper Dell, the lower Lee will also become Dell, and when clicking on lee, the upper Dell will also become Lee New an instance of vue and assign it to vue.prototype. bus

Vue prototype has a bus attribute that points to the vue instance of new. In the future, vue components of new will have a bus attribute, because each component is created from the vue class. The vue class has the bus attribute mounted on the prototype of the Vue class. Every instance created through this class will have the bus attribute, pointing to the same vUE instance

Next, how do I pass sibling values to sibling components

This instance has a bus attribute, which in turn is a vue instance, so it has a $emit method. It fires a change event and sends out the content of the current child component. Now that the event is emitted, other components have to listen for the event

Each component has a hook, lifecycle function, and MountedMounted specifies the mounted function to listen on. This. Bus is mounted on the vue prototype property, so it has a bus property on the sibling component, and since bus is an instance of vue, it has a $on method that listens for functions. It listens on a function called change and executes a function at the same time. The received parameter alert (so we get the parameter from the sibling component)

The code completes as follows

Vue: Evaluate properties vs methods vs listeners

1. Compute attributes computed

Computed properties are cached based on their reactive dependencies, and they are reevaluated only when the associated reactive dependencies change.

Example:First, when the page is rendered for the first time, fullName evaluates the value and stores the value in the cache. From then on, as long as the value of its responsive dependency doesn’t change, that is, firstName and lastName, it won’t evaluate again. Every time it uses fullNaem, Both call the fullName value in the cache directly used.

2. Method the methods

Method can also realize the function of displaying fullName. First, a pair of parentheses should be added to indicate the call. However, there is no caching mechanism in Methods, and fullName will be executed again whenever the data on the page (i.e. M layer) changes. Even if I change the value of age, the fullName will be executed again, and I’ll get the same fullName as last time.

By contrast, the calling method will always execute the function again whenever a rerender is triggered.

Why do we need caching? Suppose we have A computationally expensive property, A, that iterates through A large array and does A lot of computations. And then we might have other computational properties that depend on A. Without caching, we would inevitably execute A’s getter multiple times! If you don’t want caching, use methods instead. Therefore, if both Method and computed can perform a certain function, computed provides better performance

3. The listener

A listener, like a computed property, has a cache and uses previously cached values, except when dependent variables change, without recalculation

But the watch listener’s syntax is much more complex and has much more code than that of computed attributes

If Watch, computed, and Methods can all do a thing, computed attributes win in terms of performance and code simplicity!

Vue computes properties for computed get and set functions

Code explanation:

There is a get function for calculating the fullName of the attribute:

When using the fullName value, the get function is used to get the fullName value. Of course, if the reactive dependency is not changed (i.e., firstName and lastName are not changed), the fullName value in the cache is used

There is a set function to evaluate the fullName of the attribute:

When the fullName value is set, it is passed to the set function as a value. As shown in the figure, when the value is passed in, the value is divided into an array marked by a space and assigned to the ARR. So it becomes an array with the first item being gao and the second item being jiahui, and then assigns the first item to firstName and the second item to lastName, respectively. The main function of set is to operate on the value passed in

Vue ref (reference) : Dom nodes can be obtained by ref

(Refs is all references,.hello is one of the references we defined.)

When ref is written to a div, the dom element is retrieved via this.$refs.refname

This example implements a click-counting counter

When ref is written to a component, this.$refs.refname is the reference to the component

Refs. refname (); this.$refs.refname (); this.$refs.refname ()

Style binding calss/style in Vue (divided into object binding and array binding)

Achieve red click black click again

Bind class (array) where you have a bunch of variables, whatever the variables are, what does class look like

ActivatedOne is displayed on the div

Bind class (object)

Bind style (object)

Bind style (Array) : The style displayed by this div is determined by the objects in the array