6 essentials tips for VueJs from 2.5 years experience #1
Tags: vue, javascript, webdev, codenewbie
Published: 2021-06-17 14:25:43

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

```javascript
    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

```javascript
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 !

```javascript
watch: {
    toto: {
      immediate: true,
      handler(newValue, oldValue) {
        // logic here ...
      }
    }
}
```

Handler is the function triggered when property is modified.

### Apply class and style dynamically

```javascript
<div :style="{ 'background': isActivated ? 'black' : 'white' }">
```

You can also apply a class/style only if the value is true !

```javascript
// 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 👇

```javascript
<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 👇

```javascript
<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.

```javascript
computed: {
    todosNotCompleted() {
        return this.todos.filter(todo => !todo.isComplete)
    },
}
```

```javascript
<ul v-if="todos.length">
    <li v-for="todo in todosNotCompleted">
    {{ todo }}
    </li>
</ul>
```

### You can pass all props from parents to child

```javascript
<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 !

```javascript
<input v-model="message" placeholder="edit me">
```

This equal to 

```javascript
<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](https://twitter.com/code__oz) and MP me 😁

Or get it [HERE](https://codeoz.gumroad.com/l/RXLYp)

🎁 [MY NEWSLETTER](https://www.getrevue.co/profile/code__oz)

☕️ You can [SUPPORT MY WORKS](https://www.buymeacoffee.com/CodeoZ) 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : [https://twitter.com/code__oz](https://twitter.com/code__oz)

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!