VueJS

What are we covering?

• What is a javascript ui framework?
• What is VueJs
• Why VueJs?
• Vue CLI
• Single Page Applications
• Life Cycle Hooks
• Components
• Communication betweeen components

What is a Javascript UI framework?

• A JavaScript framework help us to create modern applications. Modern JavaScript applications power a lot of Desktop and Mobile applications. It improves our efficiency.
• They help us maintain a more formal organization of code.
• Some of the examples of the javascript framework are
  • Angular
  • React
  • Vue Js

What is a VueJs

• It is a front-end framework for building single-page applications and server-rendered applications
• Vue is an advanced framework that uses the concept of virtual-dom to generate efficient user interface components
• It can also extend the HTML with the ability to create custom semantic html components such as <Employee/> to render an employee information
• The framework has huge adoption in the recent years, it was created by Evan You.

Why VueJs

• Vue has a more Versatile, Performant, Maintainable and Testable Codebase.
• Vue has some core libraries which help us to scale – Vue, Vuex, Vue Router.
• Vue Allows us to create Reusable components each having its own Html, Css, Javascript.
• It is simpler in terms of both API and design. So simple applications can be developed very easily.

Vue CLI

• Vue Cli is a globally installed npm package. It provides the ability to create a new project.
• Vue-CLI-Service is the binary inside our project with basic commands such as serve and build. It is a development dependency for your project.

Installation:
npm install -g @vue/cli
You can create a new project with the following command:
vue create project_name

Single Page Applications

• In the past when browsers were much less capable than today, every page was coming from a server. Every time you clicked something, a new request was made to the server and the browser subsequently loaded the new page.
• In modern day JavaScript we load the application code only once. When you interact with the application the client requests some JSON or performs some action on the server but the page that the user sees is never completely wiped away

Single Page Applications

• In the past when browsers were much less capable than today, every page was coming from a server. Every time you clicked something, a new request was made to the server and the browser subsequently loaded the new page.
• In modern day JavaScript we load the application code only once. When you interact with the application the client requests some JSON or performs some action on the server but the page that the user sees is never completely wiped away

Single Page Applications

• PROS:
  SPA is fast, as most resources (HTML+CSS+Scripts) are only loaded once throughout the lifespan of application. Only data is transmitted back and forth.
• It is easier to make mobile applications because the developer can re-use the same backend code.
• SPA can cache any local storage effectively.
  

LIfecycle Hooks

• Lifecycle hooks are an important part of any serious component. You often need to know when your component is created, added to the DOM, updated, or destroyed. Lifecycle hooks are a window into how the library you’re using works behind-the-scenes

Components

• Components are one of the most powerful features of Vue Js. Components are reusable Vue instances.
• Since components are reusable Vue instances, they accept the same options as new Vue, such as data, computed, watch, methods, and lifecycle hooks.

// Importing and registering the component
<template>
<my-component></my-component>
</template>
<script>
import MyComponent from '@/views/MyComponent'

export default {
data () {
return {
}
},
components: {
MyComponent
}
}

Components - Reuse

• Components can be reused and can be repeated in loops

<template>
<my-component
v-for="(value, index) in values"
:key="index"
:value="value">
</my-component>
</template>
<script>
import MyComponent from '@/views/MyComponent'

export default {
data () {
return {
values: ['test1', 'test2', 'test3']
}
},
components: {
MyComponent
}
}

Components - Props

• Every component instance has its own isolated scope. This means you cannot (and should not) directly reference parent data in a child component’s template. Data can be passed down to child components using props.
• A “prop” is a field on a component’s data that is expected to be passed down from its parent component. A child component needs to explicitly declare the props it expects to receive using the props option.

<template>
<my-component :value="value"></my-component>
</template>
<script>
import MyComponent from '@/views/MyComponent'

export default {
data () {
return {
value: {}
}
},
components: {
MyComponent
}
}

Components - Props

• Every component instance has its own isolated scope. This means you cannot (and should not) directly reference parent data in a child component’s template. Data can be passed down to child components using props.
• A “prop” is a field on a component’s data that is expected to be passed down from its parent component. A child component needs to explicitly declare the props it expects to receive using the props option.

<template>
<my-component :value="value"></my-component>
</template>
<script>
import MyComponent from '@/views/MyComponent'

export default {
data () {
return {
value: {}
}
},
components: {
MyComponent
}
}

Components - Props

• It is possible for a component to specify the requirements for the props it is receiving.
• The type can be one of the following native constructors:
  • String
  • Number
  • Boolean
  • Object
  • Array
  • Function

<script>
export default {
name: 'myComponent',
data () {
return {
}
},
props: {
value: { type: Object, required: true },
message: { type: Object, default: 'hello' }
}
}

</script>

Examples

Example 1 - Todos

Example 2 - Drawing Canvas

Example 3 - Temperature Converter

Thank You