View profile

Weekly Vue.js News - #53 - Avoid Directly DOM Manipulation

Michael Hoffmann (Mokkapps)
Michael Hoffmann (Mokkapps)
Hi 👋
I’m back from my honeymoon. First, I apologize for the layout and content problems in my last two newsletter issues. You can expect the upcoming issues to have better quality.
In this issue, I will explain why you should avoid directly manipulating the DOM in Vue and use ref instead. Additionally, it includes curated articles and tools for you.
Have a great week ☀️

Vue Tip: Avoid Directly DOM Manipulation
It is a no-go to manipulate the DOM in Vue.js directly:
Instead, you want to make use of refs. ref is a special attribute that allows us to obtain a direct reference to a specific DOM element or child component instance after it’s mounted.
Note that you can only access the ref after the component is mounted because the element doesn’t exist until after the first render.
Let’s take a look at the above example using a template ref:
Curated Vue Content
Ref vs Reactive
JavaScript Tip: Implement a builder with method chaining
We can implement a builder in JavaScript by writing a class that contains methods which return this:
After instantiating a new instance of the Builder class, we can chain the methods on the builder variable:
Curated Web Development Content
Quote of the Week
Tools & Misc
Did you enjoy this issue? Yes No
Michael Hoffmann (Mokkapps)
Michael Hoffmann (Mokkapps) @mokkapps

Hi 👋

My name is Michael Hoffmann and I'm a Senior Frontend Developer, Freelancer and Blogger.

I focus on Vue.js, JavaScript, TypeScript and Spring Boot. Occasionally I also give career & freelancer advice.

My weekly emails reflect this preference.

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter.
Holzapfelkreuther Straße 19, 81375 Munich, Germany