Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

The Essentials of VueJS

DZone's Guide to

The Essentials of VueJS

There are a lot of JavaScript frameworks out there, but VueJS has become one of the more popular. Let's take a look at some VueJS basics.

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

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 Angular, 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 options object which includes options such as the 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:

Image title

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:

Image title

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 as

<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”
}

This will render as:

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

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

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 the root Vue instance is instantiated.

Let’s look at an example:

<div id="sample">
<test-component></test-component>
</div>

//register component
Vue.component('test-component', {
  template: '<Label>Hello Component!</Label>'
});

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.

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:
vuejs ,web dev ,javascript

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}