Vue.js is a progressive JavaScript framework for building user interfaces that is approachable, performant, and versatile. This post covers the core fundamentals of Vue including reactive data binding, essential directives like v-if and v-for, computed properties, methods, and how to build your first Vue components.
Working with Data
Data is an integral part of any application. Data can be rendered onto the page like a username or profile picture. You can use the data to affect how the content gets rendered on the page. For example, we can restrict access to areas based on the data in our application. Adding data to a vue application is simple. Inside the script, we can add a property to the object we passed into the Vue.createApp() called data(). In data() function we can return any object like strings, numbers, boolean,s objects, and arrays. These object data can render into our document. We can call data property name by using javascript expression.
Javascript Expressions
An expression is a single line of code that evaluates to a value. The value may be a number, string or a logical value.
In Vue template, we can use expression by using two curly brackets.
{{ 2 + 2 }}
Vue Instances
In vue instance, can only be mounted to one element. We can allowed to have children elements, but there can only be one root element per instance. If multiple elements match the value we pass into the mount() function, Vue will assign itself to the first element it finds.
Methods
methods property is where we can define functions for our application, it works similarly to the data object. Functions you find outside to the Vue instance will be ignored. You won't be able to call them from your template if you will only use the functions defined inside. If we want to access method in Vue instance we can use like below:
index.html
app.js
Directives
Directives are attributes that change the behavior of the element it's applied to. They are very simple to use. Vue comes with a few built-in directives. You even have the option to create your own. For example, if your connection is very slow, then our application can only show javascript expressions only on document. In that kind of situation, users might think our application is broken. To prevent that kind of thing Vue already has directive called v-clock.
index.html
main.css
Data Binding
One of the more interesting feature of Vue is Two Way Data Binding. Two way data binding is the ability to update data through the HTML document or Javascript file. In Vue, we can use v-model directive to get the value from an element or we can bind the value into an element like below:
index.html
app.js
In this example, we bind the firstName property with v-model reactive. Whatever we type in firstname input field, that input value will reflect in fullName also. Because firstName is already used in fullName method. This automation is what's called reactivity.
Reactivity
Reactivity is the process of updating the document whenever the data changes. Once a change happens, Vue will look at the template it'll identify any expressions that need to get evaluated again. The template then gets updated with the new values. Vue does a good job of keeping track of everything for you.
Any changes in the document will be reflected in the instance. Any changes in the javascript Vue instance will be reflected in the document. This is called two-way data binding. All we had to do was to find the data property and attach the v-model directive to the input field.
Binding attributes
In some cases, you may want to have dynamic attributes. We can use v-bind attribute to dynamic HTML elements. We also can use shorthand : for v-bind
v-bind:href=url
to
:href=url
index.html
app.js
Outputting Raw HTML
Before we go about Output Raw HTML, let's go about Cross Site Scripting (XSS) first. XSS occurs when malicious or harmful HTML is injected into the Web page, causing unintended behavior in the application. This usually happens when you output HTML from an external data source. Unfortunately, there's not much you can do to prevent cross site scripting on the frontend. Vue already does a good job of keeping us covered by only outputting raw text from expressions. However, that can't solve every scenario. Nowadays, there are browser extensions that modify the HTML on a page. Users may have these extensions installed. There's not much we can do about it. There are two things we can do, though. A lot of the responsibility falls on the backend developer as they have full control over what gets inserted into the database as long as they're securing their side and makes our job so much easier. If you're developing on the backend, make sure you're sanitizing and escaping any HTML that goes in and out. Our duty as frontend developers is to escape characters. Vue helps us with that. Secondly, make sure you trust the source of your data.
For outputting raw HTML in Vue, we can use v-html directive.
<p v-html="raw_html"></p>
Listening to Events
Vue supports native browser events such as clicks, key inputs, hovers, etc. We can listen for these events to run a function whenever an event occurs. We can listen for events by using directives like below:
index.html
app.js
By using the v-on directive, we can listen for events on our elements. By using shorthand, we can use @ character like @click instead of v-on:click.
To listen input changes whatever you type, you can use @input like below:
index.html
app.js
Computed Properties
Computed means to calculate something. This can be any sort of calculation from basic math to concatenating strings to form a full word, phrase or sentence. Anytime you have to perform calculations on a value or multiple values, you are performing a computation. Computed properties are properties that are calculated in some sort of manner.
How computed properties are used in terms of how we write it. The first question is are computed properties, data or methods? The answer is a combination of both. The data property is used to store single values. You can store objects and arrays as well. It's not the kind of object where you would store functions. If you want to store functions, you would use the methods property. If you have a function that calculates a value, you would use a computed property.
Let's discuss the differences between methods and computed properties for a moment. With methods, you are allowed to calculate values. We can use them in expressions if we ant to. In fact, you could use methods exclusively. However, you would lose out on the performance game that computed properties provide. methods provide a lot of flexibility. You can make requests, update elements, etc. with computed properties they serve one purpose or at least they should, and that is to calculate a value. Unlike methods, you are always expected to return a value. You're free to take other actions, but you must always return a value. This is because the value is what's stored in Vue.
Watchers
Watchers watch your data for changes. Whenever a change occurs, you can run a function to execute additional logic. In a sense, It's a way to hook into the process of when a value is updated. Watchers are pretty easy to implement on the same level as the data and methods properties.
The value of the property will be the function we want to execute when a change occurs. There are two arguments we can use in the function, new and old values, respectively. We can do whatever we want in the function, we're not obligated to return a value, regardless of what Vue does inside the function, Vue will still update the value. Developers use watchers to perform additional actions whenever a value changes. Computed properties are similar to watchers and they watch our data for changes. They can be confusing as to what the differences are between computed properties and watchers. Computed properties can never be asynchronous, or at least they shouldn't be. You expect the value to be returned from the computed properties function.
Conditional Rendering
Conditional rendering is when elements are added or removed from the document based on a condition. If a condition is a Truthy, the element is added to the page. Otherwise, the element is removed. We can use v-if for conditional rendering:
index.html
app.js
We can use else statement also:
v-show Directives
Vue provides an alternative solution to conditional rendering. Sometimes you'll want the element to stay exactly where it is, but hide it with CSS. It's possible to perform this task by binding styles and classes. However, Vue provides a solution out of the box for this specific task.
<p v-show="mode==1">v-show directive</p>
Unlike the v-if directive, the element does not get removed if the condition turns out to be false. Instead, the element will remain in the document. The display CSS property will be set to none.
Frequently Asked Questions
What is Vue.js?
Vue.js is a progressive JavaScript framework for building user interfaces that focuses on the view layer, featuring a reactive data system, a component-based architecture, and an approachable API that integrates well with other libraries.
What are Vue directives?
Vue directives are special HTML attributes prefixed with v- that apply reactive behavior to the DOM, including v-bind for binding data to attributes, v-if/v-show for conditional rendering, v-for for list rendering, and v-on for event handling.