The Essentials of VueJS

Vue is a progressive JavaScript framework that focuses on building user interfaces. The library is focused on the view layer only and it is suitable for building single page applications.

In this article, I will take you through some of the fundamental features. If you’re familiar with React or Angular2, some of these features won’t be new to you. Even if you’re not, it is not a problem! Vue is easy to pick up and integrate with other libraries or existing projects.

Vue Instance

The Vue constructor allows you to create Vue instances. When you instantiate a Vue instance, it compiles the DOM element it is assigned to and creates data bindings that keep the DOM and the data in sync. Creating a Vue instance is simple:

var myVm = new Vue({

//options

});

This instance takes the option object which includes options such as DOM element, data object, Lifecycle hooks and so on. See the complete list of options here.

Template

Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. Internally, Vue compiles the templates into Virtual DOM render functions.

Here’s how the template in Vue can be written:

< div id="test" >

{{ message }}

< /div >

The data binding is done using double curly braces which is called Mustache syntax.

Reactivity

We just saw how to define templates. We will see how to keep the state object in sync with the view and the DOM representation.

Let’s define an object:

var sample = {

message: 'Welcome to VueJS!'

};

Now, we will bind the previously defined template and data together with Vue.

new Vue({

el: "#test",

data: sample

});

The output will be:

Screen Shot 2017-03-25 at 17.00.12

Vue has converted the object and made it “reactive”. Any changes you make to the sample.message will be instantly visible in the rendered HTML.

Computed Properties

Vue offers computed properties for more complicated logic. Let’s look at an example.

new Vue({

el: "#test",

data: {

text: 'Welcome to VueJS!'

},

computed: {

slicedText: function () {

return this.text.slice(11, 17)

}

}

});

The output will be:

Screen Shot 2017-03-25 at 17.00.02

Here, the computed property is slicedText. The property slicedText tracks text as a dependency, and is automatically kept in sync. This property will only present a getter by default.

Class and Style Bindings

A common need for data binding is manipulating an element’s class list and its inline styles. This can be done by using directives v-bind:class and v-bind:style to handle them.

Using v-bind:class

We can pass an object to v-bind:class to dynamically toggle classes. This v-bind:class directive can co-exist with the traditional class attribute. For example:

< div class="fixed" v-bind:class="{ visible: isEnabled }" >< /div>

In the above syntax, the presence of class “visible” is determined by the value of the property “isEnabled”. And the data would be:

data: {

isEnabled: true

}

This will render

< div class="fixed visible">< /div>

Using v-bind:style

The object syntax for v-bind:style is quite straightforward. We can use either camelCase or kebab-case (use quotes with kebab-case) for the CSS property names.

< div v-bind:style="{ color: dynamicColor }" >< /div>

And the data would be:

data: {

dynamicColor: “#e91e63”

}

Event Handling

For handling events, we can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered.

For example:

< button v-on:click="index += 1">Click 1< /button>
< div>You have clicked "{{ index }}" times.< /div>

and data would be:

data: {

index: 0

}

Not only objects, v-on accepts even method names.

For example, provide methods option within Vue instance.

methods: {

foo: function (event) {

// `this` inside methods points to the Vue instance

alert(event.target.tagName);

}

}

and a button in HTML

< button v-on:click="foo">Click 2< /button>

This will render

< div style="color: rgb(233, 30, 99);">< /div>

Components

Components are one of the powerful features, which can be used for structuring complex interfaces. They help you to encapsulate reusable code.

To register a global component, we can use Vue.component(tagName, options).

Once registered, a component can be used in an instance’s template as a custom element. Make sure the component is registered before root Vue instance is instantiated.

Let’s look at an example:

< div id="sample">

< test-component>

< /div>

//register component

Vue.component('test-component', {

template: 'Hello Component!'

});

new Vue({

el: "#sample"

});

This will render as:

< div id="sample" >

< Label>Hello Component! < /Label>

< /div>

For the complete demo, check out my Pen here.

Wrapping Up

This article has just scratched the surface of Vue’s capabilities. It has a lot more powerful features. If you are interested in learning Vue in depth, check out their official site for a detailed documentation and API reference. I hope you will enjoy learning VueJS.

One thought on “The Essentials of VueJS

Comments are closed.