Vue.js : Answering the Why and How !
There can be multiple reasons for choosing a frontend framework for your application. It might be the type or size of application or the budget, resources and time factors. So here comes the question Why use Vue.js ?
Vue.js is a library and thus the size is around 20Kb. It is very flexible and uses easy JavaScript (TypeScript can also be used) and Html to design attractive UI. It provides great performance and memory allocation due to it’s well built model-view-model structure. The framework is majorly used for creating SPA’s(Single Page Applications).Vue.js offers a separation of concern and has a small learning curve, thus making it a good choice for beginners. I saw it as combination of features from both Angular and React.
However, there is a misconception that Vue.js can’t be used for large scale applications. The concern is addressed by Evan You (creator of Vue.js) in the below link.
How to use Vue.js ?
Vue.js can be injected directly into a static HTML page.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Data and DOM are linked in the <script> tag and the data is displayed using {{data}}.
<body>
<div id="app">{{msg}}</div>
<script>
const App = new Vue({
el: '#app',
data: {
msg: 'Hello World!',
},
})
</script>
</body>To perform a similar task using Vue CLI using npm we need these commands:
npm install -g @vue/cli
vue create test-app
cd test-app
npm run serve
How does a Vue Component look like ?
Any Vue component will have a <template>, <script> and <style> tags in a single file.
<template> tag has all the HTML code
<style> tag has an option to define the language (css, scss etc.) and also has a property “scoped” so that the style applies only to the component and not globally.
<script> tag has all the data and logic for the component. It also needs a name for identification.
<template><div id="app">
<div id="nav"><router-link to="/">Home</router-link>
<router-link to="/about">About</router-link></div>
</div><router-view/></template><script>
export default {name: 'App',
components: {},props:{}data(){
return{}
},
computed:{}
methods:{}};
</script><style lang="scss" scoped>
</style>
Props: They are like custom attributes in a component. When a value is passed as a prop it becomes a property for that component’s instance
Data: It is a function so instance can have an independent copy of returned data object. It consists of variables local to the component which can be sent to child components as props.
Methods: These are standard non reactive functions called on need basis. {Eg: display()}. They can be called explicitly by using Watchers.
Computed: These are like reactive functions which return derived values based on other reactive properties. They are not invoked as methods but as variables “{{display}}”. They also cache the values based on dependency.
I will explain the usage with an Autocomplete.vue component which I have used in one of my applications. This component gives a suggestion of city names as you enter letters in the input box.
Autocomplete component is used in another component from which we are sending cities and value. These will be accessed by props suggestions and selection which are in Autocomplete component. The ‘:’ sign is a short-hand for v-bind which we commonly refer to as “one-way data binding”.
The screenshot is of the <script> tag of Autocomplete component.
In our Autocomplete component we have ‘suggestions’ and ‘selection’ which were sent as props. These can now be used locally in this component. Any update in parent component will be reflected in here too.
As we can see the functions under computed are accessed in methods as data variables and not functions.[“this.userSelection and this.matches” ]
These computed properties work reactively as and when the data variables change
Since we are using vue-cli for the application, vue-router will be installed by default (if the preset had router feature). To make use of it we need to go to index.js under router folder and edit the same. <router-link> tag helps to route on click and follows the path in “to”.
Each route has 3 basic parts (name of component, path to component and the component itself).
There a 2 routes shown and 2 different ways to get the components. The Home component is imported and used directly whereas the About Component is loaded lazily when we go to that path.
A new instance of VueRouter (router) is then exported which include routes array.
Lifecycle Hooks in Vue.js
- beforeCreate: This hook is run while the component initializes. Data is not reactive and events are not ready yet.
- created: The component is ready with it’s reactive data and events accessible.
- beforeMount: This is one of the most used hooks in vue.js. It runs just before the initial rendering and can be used to access or modify the DOM elements beforehand. vm.$el has not been created yet.
- mounted: Here, we have full access to the rendered DOM elements which are accessed using this.$el.
- beforeUpdate: This hook runs after data changes on your component and the update cycle begins, right before the DOM is patched and re-rendered.
- updated: This is used to access the DOM after a property change.
- beforeDestroy: This is fired right before teardown. Your component will still be fully present and functional.
- destroyed: This is the final clean-up after component is removed from DOM, if we need to remove events or some reactive subscriptions.
Conclusion
I shared a basic idea of Vue.js as I was fascinated with the flexibility and the ease it offered while coding. This article will help create a skeleton and assist to begin designing your own Vue.js Application.
