Shulou(Shulou.com)06/01 Report--

This article introduces how to use ref in Vue, the content is very detailed, interested friends can refer to, hope to be helpful to you.

1. Virtual DOM

When we use JS/Jquery to manipulate the DOM element directly, whether it's a change to the element style (the background color changes from red to blue) or the dynamic adjustment of some layouts in the page (by clicking the button to add a new line of data in the list), this will cause the page to re-render, thus affecting the performance of our website. In Vue, by generating the data structure corresponding to the real DOM in memory (virtual DOM), when the page changes, through the comparison between the new virtual DOM tree and the old virtual DOM tree, we can quickly find out the differences and get the changes that should be applied to the real DOM.

Second, use ref to get DOM elements of the page

When we use JS/Jquery to get the DOM elements of a page, we usually get the DOM elements on the page according to other identities such as id, class, tags, attributes, and so on. Well, it can be said that one of the major reasons why it is difficult to abandon Jquery is that when we need to get the DOM element on the page, the API using Jquery is extremely simple compared to the native JS code.

one

Document.getElementById ('id'). Value = > $(' # id'). Val ()

So, are we still getting DOM elements in Vue in this way?

Of course, the answer is no, this way of directly manipulating the DOM element is not consistent with the original intention of using Vue, although it can achieve results, but it is not advocated, here we can use ref to get the DOM element on the page.

In the following code, I add a ref property to the input, and then we can get the value of the input input box in the Vue instance. Here, I try to get the value of this input input box in the lifecycle hook functions in beforeMount and mounted, and in the click event of a button.

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

twenty-four

Get element value

Var vm = new Vue ({

El: "# app"

Data: {

Msg: 'Hello ref'

}

BeforeMount () {

Console.log ('beforeMount:' + this.$refs.msgText.value)

}

Mounted () {

Console.log ('mounted:' + this.$refs.msgText.value)

}

Methods: {

GetElement () {

Console.log (this.$refs.msgText.value)

}

}

});

Running the code, we can see that we cannot get the value of this DOM element in the beforeMount hook function. Combined with the knowledge about the Vue life cycle learned before, when the beforeMount hook function is executed, the Vue has compiled the template, but it has not yet been mounted to the page DOM element, so we can conclude that the ref is created after the page rendering is completed.

You can see that when we add the ref attribute to the input input box, the current input box object is mounted on the $. Refs of the current Vue instance.

Third, use ref to obtain sub-component objects

Similar to using ref to get the DOM element of a page, when we need to get a subcomponent, we only need to add the ref attribute where it is used on the subcomponent. In the following sample code, I add a subcomponent that when we click the button on the Vue instance, we first call the method of the subcomponent, and then get the data of the subcomponent.

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

twenty-four

twenty-five

twenty-six

twenty-seven

twenty-eight

twenty-nine

thirty

thirty-one

thirty-two

thirty-three

thirty-four

thirty-five

thirty-six

thirty-seven

thirty-eight

thirty-nine

forty

forty-one

forty-two

forty-three

forty-four

forty-five

forty-six

forty-seven

forty-eight

forty-nine

fifty

Get element value

Get the current time

Var vm = new Vue ({

El: "# app"

Data: {

Msg: 'Hello ref'

}

Mounted () {

Console.log ('mounted:' + this.$refs.msgText.value)

}

Methods: {

GetElement () {

Console.log (the value of the 'input input box is:' + this.$refs.msgText.value)

This.$refs.childComponent.getLocalData ()

Console.log ('the value of the subcomponent input input box is:' + this.$refs.childComponent.local)

}

}

Components: {

'child': {

Template:'# child'

Data () {

Return {

Local:''

}

}

Methods: {

GetLocalData () {

Var date = new Date ()

This.local = date.toLocaleString ()

}

}

}

}

});

As you can see, when we add ref to the subcomponent, we can get the registered component reference on the Vue instance, and like the registered DOM element, we can all use the added ref attribute value as the key to get the registered object. At this point, we can get the data and methods options on this subcomponent.

Summary

Because Vue uses the method of Virtual DOM to render web pages, if we directly manipulate DOM, it is easy to cause the problem that the actual web page is out of sync with the Virtual DOM generated by Vue, and after using the ref attribute, in some cases where we need to get DOM elements, we can easily get DOM elements. Of course, when we decide to use Vue in our project, we still need to change our thinking from operating DOM to operational data. Similarly, by adding the ref attribute to the child component, we can easily get the information about the child component, which undoubtedly provides a new idea for the parent component to obtain the child component data and invoke the child component.

On how to use ref in Vue to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.