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

This article mainly introduces "how to understand the components in Vue". In daily operation, I believe many people have doubts about how to understand the components in Vue. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to understand the components in Vue". Next, please follow the editor to study!

This is a powerful simplification, and if you have studied the complexity of the Vue code base, you will know that this is actually not true. But basically, that's what Vue does for us.

Take a look at this component:

{{title}}

Some words that describe this thing

Clickity click!

Here is the implementation in Javascript, which does the same thing:

Function component (title) {let html ='; html + =''; html + = `$ {title} `; html + ='

Some words that describe this thing

'; html + =' Clickity clickbacks; html + =''; return html;}

This code is basically the same as the way Vue components construct HTML. Of course, there is no responsiveness, event handling, or a range of other functions, but getting the output HTML is the same thing.

If you never want to think about components in this way, that's normal, and many people don't either.

When you start learning Vue, you'll see new grammars and all these amazing things that look different from anything we've ever come into contact with before.

Rely on the basis of programming

Once we really realize that Vue components are really just functions, then we can find some hidden knowledge points.

What we learn from learning Javascript or any other programming language can be applied to Vue.

For example, suppose we want to learn how to write elegant and concise Vue components. We can apply what we have learned to write clean Javascript to Vue components. Such as keeping functions short, using descriptive names, and so on.

Even learning similar frameworks, such as React or Angular, is a very useful exercise.

Now let's look at a more detailed example.

Reconstruct from a new perspective

Suppose you have one of the following components:

{{title}} {{item.title}} {{item.description}}

To simplify, we changed the content inside v-for into a new component, as follows:

{{item.title}} {{item.description}}

When this is done, we replace it with the parent component, which frees us of redundant nesting:

{{title}}

If we were writing Javascript, we would do this in almost exactly the same way.

Here is an example of using a loop

Function goingLoopy () {const elements = document.querySelectorAll ('.item'); for (const el of elements) {const {width} = el.getBoundingClientRect (); if (width > 500) {el.classList.add ('item);}

Here, we use the DOM method to get all the elements whose class is item, and if they are greater than 500px, add the large class to it.

This is good, but what should I do if I want to optimize the code?

My guess is that you might bring the contents of for..of into a new function:

Function updateElement (el) {const {width} = el.getBoundingClientRect (); if (width > 500) {el.classList.add ('large');}} function goingLoopy () {const elements = document.querySelectorAll (' .item'); for (const el of elements) {updateElement (el);}}

If you think of a component as a function, you will have a better understanding of our optimization.

They're in your head all the time, you just don't realize it.

At this point, the study on "how to understand the components in Vue" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.