Hello everyone , I’ll come back and continue the lesson. Some tips on VueJS (P1) , this article will be part 2.
Passing Multiple Props
I don’t know what is the frontend part you use the manual code or what library. But I’m personally a backend guy, I’m very lazy to code “css” =))) And the most convenient is that I often use Vue UI Library to solve. I have used some guys like Vuetify, Vue Framework7, Vuesax, I noticed that they have the type of components that come with many props (the purpose is probably to reuse the component comfortably. ) Like vuetify about a button
1 2 3 4 5 6 7 8 9 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> v-btn</span> <span class="token attr-name">color</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> primary <span class="token punctuation">'</span></span> <span class="token attr-name">small</span> <span class="token attr-name">outline</span> <span class="token attr-name">block</span> <span class="token punctuation">></span></span> Something <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> v-btn</span> <span class="token punctuation">></span></span> |
Ok above you may notice that it has 4 props [color, small, outline, block] I look like it is very convenient and custom comfortable, but =))) how will you use the button There are so many places on your system, are props going to be repeated like that: -? Not to mention, if I fix a props, the remaining guys have to fix it if they want to sync. And this is just a button if you use UI library guys, it has many other components with many other options. This is how I usually do it, I will create a js file type buttonProps.js
1 2 3 4 5 6 7 | <span class="token keyword">export</span> <span class="token keyword">const</span> props <span class="token operator">=</span> <span class="token punctuation">{</span> color <span class="token punctuation">:</span> <span class="token string">'primary'</span> small <span class="token punctuation">:</span> <span class="token boolean">true</span> outline <span class="token punctuation">:</span> <span class="token boolean">true</span> block <span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> |
Then on the Vue Component file use the type
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> template</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> v-btn</span> <span class="token attr-name">v-bind</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">'</span> props <span class="token punctuation">'</span></span> <span class="token punctuation">></span></span> someThing <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> v-btn</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> template</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> script</span> <span class="token punctuation">></span></span> <span class="token script language-javascript"> <span class="token keyword">import</span> <span class="token punctuation">{</span> props <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./buttonProps.js'</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> data <span class="token punctuation">:</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> props <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> </span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> script</span> <span class="token punctuation">></span></span> |
As you can see that I use v-bind, it will support bind many props up: -? Now I want to change the properties of a button, just fix it in one place only. For Render
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token comment">// Render</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> props <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./buttonProps.js'</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> render <span class="token punctuation">:</span> h <span class="token operator">=></span> <span class="token function">h</span> <span class="token punctuation">(</span> <span class="token string">'v-btn'</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> props <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token string">'someThing'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
Do something on page load
Often times I will encounter cases like doing something when loading a page, such as fetching data is a typical one. And often we use Vue mounted hook
, right. In this section, I will talk more about its lifecycle. In Vue, its lifecycle consists of 4 main parts as follows in a component
- Created
- Mounted
- Updated
- Destroyed
According to my understanding, the first guy created
is created now, on the page I have everything like data, computed, watcher, all but missing DOM =))))))
mounted
, it started to assign its component to the DOM that simple. And the updated
guy supports reactive data changes with destroyed
then destroy everything when not needed =)) So to use these hooks to solve the first problem, I can simply choose created or mounted. To use it, just add the hook name to type like
1 2 3 4 5 6 7 8 9 | <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token function">created</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Component created!'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token function">mounted</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Component mounted!'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
However, I will say that which two guys should use it and which one is better: -? In most cases, I often use mounted () because now the component is mounted on the dom, then you can arbitrarily manipulate something before it renders even manipulating the DOM (rather than just fetching the data). Please ) . Like you want to manipulate the DOM but write in created, the error is right =)) OK, saying that is like saying that the created
guy is broken ??
?
NO
In case you do not manipulate the DOM at all, you just want to fetch the data about the update into the data, I recommend using created because it is the guy running before mounted so the fetch data on it is done before: -? means you will receive the returned data a bit earlier. That’s my advice, but no one says that using mounted for fetch data is wrong: v
Dynamic directive arguments
If I remember correctly, Vue 2.6 supports my directive arguments. By the way, we can dynamically use events like clicking dblclick hover and ….. all events that are applied in a component. For example, I have 1 button
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> button</span> <span class="token attr-name">@click</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> show <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Test <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> button</span> <span class="token punctuation">></span></span> |
Here you can see I have a button 1 event click and click on it will run the function show.However, for example, suppose I want to have another dblclick type on that button also run the function show. And depending on a certain condition, the button will enable either @click
or @dblclick
. So how to solve it: -?
So as I said above Vue 2.6 it supports my directive arguments ie we can write the following style
1 2 3 4 5 6 7 8 9 | data <span class="token punctuation">:</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> something <span class="token punctuation">:</span> <span class="token string">"click"</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span> methods <span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token function">show</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
At the button, it will look like the following
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> button</span> <span class="token attr-name">@[something]</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> show <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Test <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> button</span> <span class="token punctuation">></span></span> |
That’s it =)) You can use something as a computed to validate under certain conditions or now just need to change
1 2 | <span class="token keyword">this</span> <span class="token punctuation">.</span> something <span class="token operator">=</span> <span class="token string">'dblclick'</span> |
The event in the input button only dblclick
only
Functional Component
There are times when I work, there will be a few components just for the purpose of displaying data only, in this case to improve render speed as well as memory performance, I recommend using functional components basically. As a stateless component it will not have a script tag, it will only receive props
to display data.
1 2 3 4 5 6 | // User.vue <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> template</span> <span class="token attr-name">functional</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> h1</span> <span class="token punctuation">></span></span> {{ props.name }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> h1</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> p</span> <span class="token punctuation">></span></span> {{ props.email }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> p</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> template</span> <span class="token punctuation">></span></span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // index.vue <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> template</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> user</span> <span class="token attr-name">v-bind</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> { name: <span class="token punctuation">'</span> Duong Trung Hieu <span class="token punctuation">'</span> , email: <span class="token punctuation">'</span> <a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a> <span class="token punctuation">'</span> } <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> template</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> script</span> <span class="token punctuation">></span></span> <span class="token script language-javascript"> <span class="token keyword">import</span> User <span class="token keyword">from</span> <span class="token string">'./user'</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> components <span class="token punctuation">:</span> <span class="token punctuation">{</span> User <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> script</span> <span class="token punctuation">></span></span> |
Provider / Consumer
As I said above Functional Component, it will only display data based on this I can use in combination with another component running js (that means I will separate the logic from not writing both markup and markup logic on 1 component, this I encountered a lot of it is sometimes easy to clam because maybe only one component file is more than a thousand lines). If you want to split, use Provider / Consumer pattern
. Consumer will be functional component, I’ll throw logic at Provider. example to deploy
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | // Provider.vue <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> template</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> slot</span> <span class="token attr-name">v-bind</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> { state, actions } <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> template</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> script</span> <span class="token punctuation">></span></span> <span class="token script language-javascript"> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> computed <span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token function">state</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> label <span class="token punctuation">:</span> <span class="token string">'button'</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token function">actions</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> click <span class="token punctuation">:</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> click <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> methods <span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token function">click</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Clicked'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> </span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> script</span> <span class="token punctuation">></span></span> |
1 2 3 4 5 6 7 8 9 | // Consumer.vue <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> template</span> <span class="token attr-name">functional</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> p</span> <span class="token punctuation">></span></span> {{ props.state.label }} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> p</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> button</span> <span class="token attr-name">@click</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> props.actions.click <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> CLICK <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> button</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> template</span> <span class="token punctuation">></span></span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // App.vue <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> template</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> provider</span> <span class="token attr-name">v-slot</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> { state, actions } <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> consumer</span> <span class="token attr-name">v-bind</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> { state, actions } <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> provider</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> template</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> script</span> <span class="token punctuation">></span></span> <span class="token script language-javascript"> <span class="token keyword">import</span> Provider <span class="token keyword">from</span> <span class="token string">'./Provider.vue'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Consumer <span class="token keyword">from</span> <span class="token string">'./Consumer.vue'</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> components <span class="token punctuation">:</span> <span class="token punctuation">{</span> Provider <span class="token punctuation">,</span> Consumer <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> </span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> script</span> <span class="token punctuation">></span></span> |