Hey how are you ! Welcome here my name is Code Oz and I will share with you some tips on VueJs (I have 2.5 years experience with this framework)
Always use validator on your props, in order to check if the value passed from parent to child is correct
props: {
toto: {
type: String,
required: true,
validator: function (val) {
return [ 'a', 'b' ].includes(val)
}
}
},
If validator detect an error, vue will trigger an Vue Warn !
Trigger Watcher on initialization
watch: {
toto: (newValue, oldValue) => {
// logic here ...
}
}
⚠️ This will be trigger when toto
will changed, but not be triggered at initialization.
If you want to trigger your watcher during the initialization phase, you can use immediate
property !
watch: {
toto: {
immediate: true,
handler(newValue, oldValue) {
// logic here ...
}
}
}
Handler is the function triggered when property is modified.
Apply class and style dynamically
<div :style="{ 'background': isActivated ? 'black' : 'white' }">
You can also apply a class/style only if the value is true !
// If isActivated is false, class will be not applied
<div :class="{ 'toto-class': isActivated }">
Never Use V-if with V-for
NEVER ! and why ?
When you are doing this 👇
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
When you are using both in the same node, the v-for
has a higher priority than v-if
, so v-if
will be trigger in EACH iteration of the v-for
!
To avoid this, you can replace your code by 👇
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
But if you want to use the v-if
for isComplete
attribute, the best way is to create a computed based on the condition.
computed: {
todosNotCompleted() {
return this.todos.filter(todo => !todo.isComplete)
},
}
<ul v-if="todos.length">
<li v-for="todo in todosNotCompleted">
{{ todo }}
</li>
</ul>
You can pass all props from parents to child
<child-component v-bind="$props"></child-component >
V-model
v-model is a directive in order to create two-way data bindings on a component !
<input v-model="message" placeholder="edit me">
This equal to
<input :value="message" @input="message = $event.target.value" placeholder="edit me">
Use it as shorthand when you need to update a value or emit a value when this value changed !
I hope you like these tips ! There are basic and I will share more tips on Vuejs (more advance) afterwards !
I hope you like this reading!
🎁 You can get my new book Underrated skills in javascript, make the difference
for FREE if you follow me on Twitter and MP me 😁
Or get it HERE
☕️ You can SUPPORT MY WORKS 🙏
🏃♂️ You can follow me on 👇
🕊 Twitter : https://twitter.com/code__oz
👨💻 Github: https://github.com/Code-Oz
And you can mark 🔖 this article!
Top comments (16)
Nice article. I wrote a similar one last year -> 8 secrets vue devs must know.
The truth is that I have other "secrets" to share. I hope I can find the time so I can publish a new article soon.
Thanks ! I will check this soon :D
Begin vue js 5 days ! perfect timing !
Nice tips !
From my point of view as a Vue developer with 4 years of experience I have two advices:
Thanks for this tips! I just don’t really understand the validator usage, but i going to make some search! ;)
Thanks Charlene ! Validator is usefull since you can check if you props is 'validate' for exemple if a child component accept only the following string => 'one' or 'two' as props value, the validator will inform you that your props have an issue if you pass another value (for exemple: 'four').
You can also use validator for type checking (if you pass a number, vue will inform you that you have an issue in your code)
For more information : vuejs.org/v2/guide/components-prop...
Thanks for this useful l’explication ;) I going to use it in my next project followings your advices ;)
Nice and Clear
Thanks Christopher !
Thank you @codeozz .
thanks tony !
Thanks
Thanks sheelss
Wow this is amazing, I didnt know about the first two and I've bee working with Vue for a couple of years now.
Happy to see your comment ;D