Wandering in Vue.js Garden

Vue.js is a framework that lets you extend HTML with HTML attributes called directives. Vue.js provides built-in directives and user defined directives.So let’s start wondering!!

Vue.js Directives

Vue.js uses double braces {{ }} as place-holders for data.

Vue.js directives are HTML attributes with the prefix v-

Declarative Rendering

Vue.js enables us to declaratively render data to the DOM using straightforward template syntax:

<div id=”app”> {{ message }} </div>(html file)

var app = new Vue({ el: ‘#app’, data: { message: ‘Hello Vue!’ } })(jS file)

Interpolations

Interpolation means putting or rendering your data which is possible very easily using Vue’s double-mustache syntax. By using double-mustache syntax you can render your data:

<span>My name is: {{ myName }}</span>

Ternary operator expression interpolation

<span>I'm a {{ myAge > 50 ? 'kinda old' : 'young' }}!</span>

Binding

Binding means using your data inside your tag’s attributes.

<span v-bind:class="myClass"></span>

There is a shorter way of binding which is by omitting v-bind directive, like below:<span :class="myClass"></span>

Two-way data binding

By using the v-model directive you can create a two-way data binding. Which means the user can change the data using an input and see the result simultaneously if needed.The v-model directive can work on almost every input type.

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>let

app = new Vue({
el: '#app',
data: {
message: ''
}
});

Events

Events are called when a specific action is performed on an element.
Events are declared with v-on directive.

<div id="app">
    <button v-on:click="myfunction"></button>
</div>
let app = new Vue({
    el: '#app',
    methods: {
        myfunction() {
            alert('This is it!');
        }
    }
});

There is shorthand for events as well:<button @click="() => alert('Hello my friend')"></button>

Computed properties

Computed properties are a way of cleaning your code and use them instead of expressions inside of your double-mustaches or other places.

<p>
The best programming languages are: {{ programmingLanguages }}<br>
But the worst are: {{ programmingLanguages.split(', ').reverse().join(', ') }}
</p>

Instead of this above code

<p>
The best programming languages are: {{ programmingLanguages }}<br>
But the worst are: {{ worstProgrammingLanguages }}
</p>
let app = new Vue({
    el: '#app',
    data: {
        programmingLangauges: 'JavaScript, C#, PHP, Python, LALALA, HOHOHO'
    }
    computed: {
        worstProgrammingLanguages() {
            return this.programmingLangauges.split(', ').reverse().join(', ');
        }
    }
});

Conditional rendering

A conditional rendering is used when you want to display parts of your UI according to some condition(s).

<span v-if="isUserLoggedIn">Hello user</span>
<span v-else>Hi guest!</span>

That’s all for today!!