Day 1 of Vue.js

This is the diary that I’m trying to keep while learning Vue.js, how sure how long am I going to do this or how consistent I’m gonna be, but anyways here it is.

Two-Way Binding and Reactivity

Vue.js has something called 2-way binding. When there are any data changes happened to the model, it would update any matching views immediately(reactivity).

<div id="app">
    <h1>
        {{ message }}
    </h1>   
    <input v-model="message" type="text">
</div>
<script>

        new Vue({
            el: '#app',
            data : {
                message: 'Hell World'
            }
        });
</script>

When you change the value in the input, the text in the h1 tag should also change because they are both bound to the model.

Change display of an HTML element

Vue.js lets you sorta write javascript inside html.
If you bind an element with directive v-model to a model like:
<textarea v-model="message"></textarea>
You can add an v-show or v-if attribute to your html element to specify whether they should be rendered or not. The difference between v-show and v-if is that v-show only hides the value while v-if would hide the entire element.
And you can write basic expressions in the v-show or v-if attributes like:

<span class="error" v-show="!message">
            You must enter some text
</span>
<button type="submit" v-if="message">
            Send
</button>

Jeffrey recommends using v-show if we just want to toggle the display of something, guess it is safer than v-if?

Leave a Reply

Your email address will not be published. Required fields are marked *