Mar 14, 2020
Vue JS General Knowledge (Part1)
Today I will discuss the basics of the Vue JS and how it works, how its feature works and how we can apply different features at development.
What is Vue JS?
Vue Js is the frontend framework, which is used to create the javascript drive web application, it runs on the browser, its a modern frontend application development framework. it supports the one-page application, no need to call to multiple server requests to load the page.
What is Vue CLI?
Its a tool for generating and managing the development Vue js application. it comes with some great feature such as project-wide es6 support, support to install different plugins related to Vue JS, it supports the compilation of Vue js code, it minifies the js into 1 file, it also helps to use the single file templates, compile everything on our machine and not in the browser, it also supports Live Reload Dev Server using WebPack.
Install the Vue CLI, Go to Terminal and run this command
> npm install -g @vue-cliThen we can create the project with Vue JS by following command below
> vue create vue-exampleFor Example, purpose remove all the code from app.vue file
<template>
<div id="app"></div>
</template><script>
export default {
name: 'App',
}
</script><style></style>
What are the Plugins?
Plugins provide global functionality to Vue. there is no specific scope to define for plugins. The plugin-based architecture makes Vue CLI flexible and extensible.
We can add the plugins by the following command
> vue add <plugin name>such as
> vue add vuex
Install the packages or plugins by npm command
> npm install --save axios Create the Store with Vuex and axios to handle the management of the Vue Project. vue add vuex the command automatically creates the folder named store and store the folder has a file named index.js , we can configure the store with following below code.
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(vuex)export default new Vuex.Store({
state: {
test: 'test 123....'
}
})
Plugins add command automatically add the store to app.vue file. if the store is not added to app.vue file, follow the below code instruction
import Vue from 'vue'
import App from './App.vue'
import store from './store'Vue.config.productionTip = falsenew Vue({
store,
render: h => h(App)
}).$mount('#app')
What is Vue Instance?
Vue Instance is the Main object to initiate the Vue in your project. We can create multiple instances the same projects, assign it to different dom elements of the HTML.
For Example in public/index.html are auto-generated by Vue JS, there is a dom element, which has app id, so we can have to tag the app dom element with Vue instance by following code instructions.
<div id="app"></div>To Script Section we can create the Vue Instance by the following code
new Vue({
el: ‘#app’,
data: {},
method: {
greet: function () {}
}
})-------------------------------------------------------------------
el: is used for which element of the html page will control by Vue
data: In this object we will store all data related to the Vue Instance
method: is object which is used for add the event and method for instance.
What is the component?
The component is the most powerful feature of Vue JS. By this, we can reuse the code for the frontend . We also encapsulate the code by reusable components. We also customized the element of our website by Component.
Create Component
If we use CDN version of Vue js or using in HTML version of Vue js we need use below code to create the Vue Component in script the section of the HTML file
Vue.Component('my-component', {
data: function () {
return {
name: 'abc'
}
},
template: '<p>this is my name{{name}}.</p>'})
Components get two arguments, One is the name of the component, the other is an object with contains all the information about that component, such as data, props, method, computed, component life cycle methods, templates.
data: it contains all the data or info related to a component, then we can use it to render it to the template and manipulate in component and using is to events of the component changing the state of the component also. In Component data works as function
method: we can add the function of the different event to the method object, as like as javascript function and methods.
computed: we can also declare the different event functions and methods in this object. we can not pass the parameter to the computed method, it just used to compute the props data and changing the state of the component and it also creates the getter and setter option of the pops.
component lifecycle method: its a most important feature. we can run different methods and actions in life cycle methods. We also control the state of the component by the component lifecycle method.
Props: Props are using for sending the data from parent component to child component. later of the article, we will see.
Register the Component to Vue Instance
Add this to Vue where the Vue instance is initialized in Html file
Vue.component('my-component-name', { /* ... */ })Using VUE CLI to handle the Vue JS projects
Create the PostList.vue file to in the to src/components folder which is generated by VUE CLI project, add this following codes
<template>
<h2>{{wellcomemsg}}</h2>
</template><script>export default {
name: 'PostList',
data: function () {
return {
wellcomemsg: 'wellcome to product list'
}
}
}
</script>
In this code, I add the wellcomemsg to data Object of Vue JS and then to show it in the browser using the template section to call it by {{wellcomemsg}} Vue syntax.
To add the PostList chield component to any parent component, we can follow the below code syntax
<template>
<div id="app">
<PostList />
</div>
</template><script>
import PostList from './components/PostList.vue'export default {
name: 'App',
components: {
PostList
}
}
</script>
<style></style>
In Code First we import the component from components the directory. then add it tocomponents object of Vue Component or Instance. then add the to template section.
What is Props?
Props are a component property that is used to send data from the parent component to the child component.
To pass the Props in Parent Component to Child Component You can follow the below procedure
I add the array of data in App.vue file in data object
.....data: function () {
return {
listOfPosts: [
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" },
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
}
]
}}
............
Add the Props To PostList.vue component to get them from App.vue component
There is two way to assign the props
props: ['listOfProps']Other is, we can validate the types and add validator function on it
props: {
listOfProps: { type: Array }
}I use the second option to load the props
export default {
name: 'PostList',
props: {
listOfPosts: {
type: Array,
}
},
data: function () {
return {
wellcomemsg: 'wellcome to post list'
}
}
}Using the v-bind directive to the component to pass the data from the parent component to the child component.
<PostList v-bind:listOfPosts="listOfPosts" />For Vue3 we can use this syntax also
<PostList :listOfPosts="listOfPosts" />To check the props is passed successfully we using temporary JSON.stringfy() function in template to show in the browser
<template>
<div>
<h2>{{wellcomemsg}}</h2>
<div>{{JSON.stringify(listOfPosts)}}</div>
</div>
</template>Output in browser
We can also validate the props by validate function in props attribute such as
listOfPosts: {
type: Array,
validator: value => value.length >=1
}I use the arrow function to check the listOfProps length is greater than one. if it is not one it returns an empty array to the component.
Conditional Rendering
v-if conditional rendering which is used for toggle the elements
Add the showParagraph variable in data object and makes it false
data: function () {
return {
showParagraph: false
}
}Then add the code in template the section in that component
<div>
<button v-on:click="showParagraph = !showParagraph">Toggle Paragraph</button><p v-if="showParagraph">
The school fair is right around the corner, and tickets have just gone on sale.Even though you may be busy, you will still want to reserve just one day out ofan entire year to relax and have fun with us.
</p></div>
Simple List Rending in Vue JS
v-for loop to show the data in the table structure for array
<template>
<div>
<h2>{{wellcomemsg}}</h2>
<table>
<tr>
<th>Title</th>
<th>UserID</th>
</tr>
<tr v-for="item in listOfPosts" v-bind:key="item.id">
<td>{{item.title}}</td>
<td>{{item.userId}}</td>
</tr>
</table>
</div>
</template>v-for loop for show data for object named book in data attribute
data: function () {
return {
wellcomemsg: 'wellcome to post list',
book: {
title: 'How to do',
author: 'Anthony',
publishAt: '2016-04-02'
}
}
}Then add the following line of code in template
<div v-for="(value, key) in book" v-bind:key="key">
{{key}}: {{value}}
</div>Working with Event and Method and computed
Method and Computed are associate with VUE Instance and VUE Component. we can process the data and information of the component by using methods or computed attributed to Vue Component.
“A method is just a function bound to the Vue instance or Component. It will only be evaluated when developer explicitly call it. Like all javascript functions, it accepts parameters and will be re-evaluated every time it’s called. Methods are useful in the same situations any function is useful.” [1]
For Example purpose, I add some attributes with a value in the data object. showed in an alert box when clicking on the button.
data: {
return {
.......
warningMsg: "this is warning msg"
}
}To enable the method in React Vue Instance and Vue Component, we have to use methods the object in Vue Instance or Object. Such as
methods: {
showWarningMsg: function () {
console.log('method Executed')
alert(`Warning! ${this.warningMsg}`)
}
}so we can execute the showWarningMsg by adding the on click in button in template
<button v-on:click="showWarningMsg()">Show Alert</button>
“A more appropriate name for a computed value is a computed property. In fact, when the Vue is instantiated, computed properties are converted into a property of the Vue with a getter and sometimes a setter. Basically you can think of a computed value as a derived value that will be automatically updated whenever one of the underlying values used to calculate it is updated. You don’t call a computed and it doesn’t accept any parameters. You reference a computed property just like you would a data property.”[1]
I add the two more action to method and computed both, then test it
data: {
return {
.......
buttonOneMsg: "this is button one msg",
buttonTwoMsg: "this is button two msg"
}
}Add the Two Method in methods object in Vue Instance or component
methods: {
logButtonOneMsg: function () {
console.log(`${this.buttonOneMsg}`)
},
logButtonTwoMsg: function () {
console.log(`${this.buttonTwoMsg}`)
}
}Add the two-button in tempate section of the Vue instance or Component
<button v-on:click="logButtonOneMsg()">Button one</button>
<button v-on:click="logButtonTwoMsg()">Button Two</button>Final output show below
You can find the sample code in following Github link
