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