What is Vue.js?
Vue.js is yet another JavaScript framework getting popular considering its simplicity praised a lot these days. There are a lot of JavaScript frameworks among which React and Angular are popular among web developers. Vue.js pronounced as “view.js” is a much flexible and less opinionated framework than Angular. It’s similar to React but much simpler. Vue.js gives you more freedom in designing your app, unlike Angular. So that you are not forced to do everything in their way. It can be adapted very easily to your existing application. You don’t need to know JSX, unlike React. All you have to do is to drop the link into your HTML page header and you are up and ready.Overview
This is the basic folder structure.
– index.html
This is the main HTML template for your application. You can link your static assets inside the head tag while your processed assets will be auto injected in the body.<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" type="image/png" href="/assets/images/favicon.png"/>
</head>
<body>
<div id="app"></div>
</body>
</html>
– src/router/index.js
This is the file which initiates vue-router with the given components.import Vue from 'vue';
import VueRouter from 'vue-router';
import Hello from '@/components/Hello';
Vue.use(VueRouter);
const routes = [
{ path: '/', name: 'Hello', component: Hello },
];
/* eslint-disable no-new */
export default new VueRouter({
routes,
mode: 'history',
});
– src/App.vue
This is the application’s main Vue.js component which is basically just a wrapper for vue-router.<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {};
</script>
– src/main.js
This is the application entry file where you initiate your Vue.js application with a router, store and the main App.vue component.import Vue from 'vue';
import router from '@/router';
import store from '@/store';
import App from '@/App';
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
render: h => h(App),
});
– src/components/Hello.vue
This file represents a sample Vue.js component which will be used by the vue-router. Please note that Hello module’s state is being used in here.<template>
<div class="hello">
<h1>{{ message }}</h1>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
data() {
return {};
},
computed: mapState({
message: state => state.Hello.message,
}),
};
</script>
Getting Started
The simplest way is to include this in your file.<script src="https://unpkg.com/vue"></script>You can also download the Vue file and add it in a script tag, or else install it with NPM. It also provides an official CLI called the Vue-cli. You can find more details in the Vue.js Installation Guide. Let’s compare simple JavaScript with a VueJS instance.
function printText () {
return 'Hello World!'
}
// Set some text in jQuery
$('.element').text(printText())
This is what we do when we want to manipulate the text for some element. For the last couple of years, I was writing code like this for a living. But what if the ‘.element’ get renamed. Your whole JS will break. The binding is broken. We can overcome this in Vue.
<div class="app">
<span class=".element">
{{ msg }}
</span>
</div>
new Vue({
el: '.app',
data: {
msg: 'Hello World!'
}
})
The Vue instance referenced to an element ‘.app’. This is the entry point. Even if the class of the span object is changed it won’t affect the message being displayed.Vue.js also supports Loops, Two-way binding, Components, Event Listeners like React. If you want to learnVue.js there’s no better document than the Vue.js Guide. You can see a demo Here.
Why Vue.js?
Let’s talk about why we can use Vue.js. Both React and Vue.js use Virtual DOM and the use of components. But in React if a component’s state is changed. It re-renders the entire component sub-tree. In Vue.js, the component’s dependencies are automatically tracked during render, so the system knows which component needs to be changed when the state is changed. Unlike React you don’t need to write everything in JavaScript. Vue.js supports the use of both JSX and Template rendering. If the HTML is valid, then it is a valid Vue template. We can give access to CSS within a single-file-component by adding a ‘scoped’ attribute to the style tag which scopes CSS only for that particular component. Comparing Vue with AngularJS, both have similar syntax. But Vue is much simpler in terms of API and design. There are many opinions to structure an Angular application but Vue is a more flexible, modular solution by setting up web pack template. In Vue, we use one-way data-flow between components that make the flow of data easier but in angular, it’s two-way binding between scopes. There are a lot of confusions between directives and components in Angular but in Vue, components are self-contained units with own view and data logic and directives are used for DOM manipulations only. Vue doesn’t use dirty checking so it’s much easier to optimize and has better performance. Since there are a lot of watchers in Angular, when anything in scope changes, all the watchers should re-evaluate again. So Angular becomes slow. Vue.js performs better than EmberJs since it automatically batches updates but in Ember, we need to manually manage run loops. For computed properties in Ember, we have to declare it manually and need to wrap everything in Ember Objects. But in Vue, it’s in Javascript Objects and fully automatic.Advantages
1. Simplicity
Vue has a good combination of structure and simplicity. Adding Vue.js to your web project can be very simple. It needs external libraries, but tend to use it with or without jQuery.<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
The code is easily understandable about the working of Vue code.
2. Reactivity
The variables in Vue.js are reactive. At each point, when the variables change, it will automatically inform their peers.var app = new Vue({
el: '#app',
data: {
message: "<h1>Hello World</h1>"
}
});
setTimeout(function() {
app.message = "<small>Goodbye World</small>";
}, 2000)
<div id="app">
<!--Renders as "Hello World" with <h1> tag-->
<!--Then after 2 seconds re-renders as "Goodbye World" with <small> tag-->
<p v-html="message">{{ message }}<p>
</div>
Data properties, like message in this example, are reactive, that is they will trigger a re-render if changed. The v-html attribute will render HTML templates. You can see the demo here.
3. Focus
Vue.js is mainly used for building user interfaces and this is achieved by a library that does not have any influence from the frameworks out there already. Supporting libraries are integrated with Vue.4. Flexibility
Vue.js comes with perfect balance to write quickly and run straight from the browser. With that said, it is extremely good if you would like to create any practical app using with ES6, separate component files, JSX, building, routing etc. For example, if you have a preferred method for writing your templates, Vue lets you do it in any of these ways:- Write your template in an HTML file
- Write your template in a string in a Javascript file
- Use JSX in a Javascript file
- Make your template in pure Javascript using virtual nodes
5. Components
Actually, this is where Vue’s flexibility system is built, so that components can be small and are reusable parts of UI. This isn’t any special because the of JavaScript frameworks are built with this concept.<div id="example"> <my-component></my-component> </div>
// register
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
// create a root instance
new Vue({
el: '#example'
})
Which will render,
<div id="example"> <div>A custom component!</div> </div>So, the components can be used in templates as elements.
