VueJs: The basics in 4 mins
The simplicity of Vue.Js and its light weight make it an indispensable framework for frontend development.
Vue 2.0 was released in 2016 and has been contending in a race with ReactJS. It is proved to be faster and leaner, comparing to ReactJs and Angular 2.0. In addition, Its learning curve is relatively shorter than ReactJs and has one of the most outstanding documentation out there; you could end up falling in love with it before you finish reading the documentation.
It allows structural flexibility and makes reuse of components easy in your application. In short, it does not get on your way. You have the power to write and structure your application however you want it. This freakish feature makes it suitable for building big and highly scalable web applications.
In this post, I put up some basics to ace you down the path.
Vue Instance
One of the most important things you need to know about VueJs before building your first VueJs app is the Vue Instance.
Every Vue application has a root instance called Vue. Vue instance follows a Model-view -ViewModel (MVVM patterns) and I prefer to define Vue instance as the link between your data and view.
A Vue instance can be created by issuing new Vue() with optional objects which can contain template, data, methods and life hook callbacks and event.
In another word, we can see Vue instance as an intermediary between your data and view.
If we have a data object containing details of “user A” and an HTML view, we can define our user object as this:
//User Object
var userA={
name: "Samuel James",
post: "VueJs: The basics in 4 mins"
}and view template as:
<!----view --->
<div id="app">
<h1>Name</h1>
<p>Post title </p>
</div><!---Includes VueJs-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<script src="app.js"></script>
To create a Vue instance, we supply our data, that is userA and the id of a section in our view we want Vue instance to bind to. In this example, our id is ‘app’
var vm = new Vue({
el:"#app", //id
data:userA, //userA object
created: function () {
console.log('Vue instance was created');
},
methods: {
exampleFunction: function () {
console.log('This is an example function')
},
},
destroyed: function () {
console.log('Vue instance was destroyed')
}
})Data binding in VueJs
There are two ways to bind data to view in VueJs: One-way data binding and two-way data binding.
One-way data binding binds data directly from your javascript code to DOM. A good example of this is displaying a friendly thank you message to customers after submitting a feedback form.
<!---One-way data binding--->
<!----feedback.html-->
<div class="container">
<div id="app">
<h1>Feed back form </h1>
<div class="server-message">{{msg}}</div>
<form>
<input type="name" placeholder="Your name"/>
<input type="email" placeholder="your email">
<textarea name="message" rows="2" cols="3"></textarea>
<button type="button" class="btn btn-primary">Send feedback</button>
</form>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<script src="app.js"></script></html>
To bind our message to view, we need to create a Vue instance with a message object and the id of a view template we are binding to as parameters.
<!---app.js---->var data= {
msg: "Thank you for the feedback :)"
}
new Vue({
data:data, //message object
el:'#app'
})
Two-way data binding binds data from your Javascript code to view and from view back to the code such that a change to the data in either of the two sides results in a global change.
For two-way data binding, Vue provides a v-model directive for this purpose. Let’s get back to our feedback form and make some few changes.
<!---feedback.html-->
<div class="container">
<div id="app">
<h1>Feed back form </h1>
<form>
<input type="name" placeholder="Your name" v-model="name"/>
<input type="email" placeholder="your email" v-model="email"> <textarea name="message" rows="2" cols="3" v-model="message"></textarea>
<button type="button" class="btn btn-primary">Send feedback</button>
</form>
</div>
</div>
</body><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<script src="app.js"></script></html><!----app.js--->
var data={
name: " Samuel James",
email: "example@mail.com",
message: "Hello there",
}
var vm = new Vue({
data: data,
el:'#app'
})//watch name as it changes reactively during modificationvm.$watch('name', function (newName, oldName) {
console.log(newName); //new name
console.log(oldName); //old name
})
At the console, You can watch name field changing reactively as you modify the field in your browser.
Directives
Directives are powerful features in Vue, they are binding expressions with v- attribute. In previous examples, we made use of v-model directive to reactively bind data to DOM and view. Directives make working with the view and repetitive tasks a breeze. Besides this, you also get to define your custom directives with few lines of code.
The next thing is to handle how the feedback form is submitted and also a logic to prevent double submission using Vue directives.
Here come Vue directives and methods. We add v-on:click and v-bind:disabled directives to submit button in feedback.html as shown below.
<!----feedback.html--->
<input type="name" placeholder="Your name" v-model="name"/>
<input type="email" placeholder="your email" v-model="email"> <textarea name="message" rows="2" cols="3" v-model="message"></textarea>
<button type="button" v-on:click="submit" v-bind:disabled="isSubmitted" class="btn btn-primary">Send feedback</button>
app.js becomes:
<!----app.js --->var data={
name: " Samuel James",
email: "example@mail.com",
message: "Hello there",
isSubmitted:false //we initially set to false to enable submit button
}new Vue({
data:data,
el:"#app",
methods:{
submit: function () {
//Now submit feed back via ajax
this.isSubmitted=true; //set submitted to true to disable submit button},
}
})
v-bind:disabled directive disables submit button when isSubmitted is set to true while v-on:click listens to a click event and executes submit() method defined in the Vue instance.
Now that we have covered 3 fundamentals of VueJs, you can head on to VueJs official documentation and start building your next web applications with VueJs.
