VueJS

-
VueJS is a progressive JavaScript framework used to develop interactive web interfaces.
Focus is more on the view part, which is the front end.
Vue is basically built for frontend development,

Features
Following are the features available with VueJS.

1) Virtual DOM
  The changes are not made to the DOM, instead a replica of the DOM is created which is present in the form of JavaScript data structures. Whenever any changes are to be made, they are made to the JavaScript data structures and the latter is compared with the original data structure. The final changes are then updated to the real DOM, which the user will see changing. This is good in terms of optimization, it is less expensive and the changes can be made at a faster rate.

2) Data Binding
  - v-bind

3) Components

4) Event Handling - v-on

5) Animation/Transition

6) Computed Properties
  Helps to listen to the changes made to the UI elements and performs the necessary calculations.
  computed :{
  },

7) Templates

8) Directives
  VueJS has built-in directives such as v-if, v-else, v-show, v-on, v-bind, and v-model, which are used to perform various actions on the frontend.

9) Watchers
  Watchers are applied to data that changes. Watcher takes care of handling any data changes making the code simple and fast.
  watch : {
  }

10) Routing
  - vue-router
  = Run the following command to install the vue-router.
     npm install vue-router

11) Lightweight

12) Vue-CLI

Installation:
  npm install vue
  npm install --global vue-cli

Following is the command to create the project using Webpack.
  vue init webpack myproject

  npm create vue@latest
  - This command will install and execute create-vue, the official Vue project scaffolding tool. 

  npm run build
  - for production build purpose.


To get started, use the following command.
  cd myproject
  npm install
  npm run dev

Directives​
Directives are special attributes with the v- prefix.
Vue provides a number of built-in directives, including v-html, v-model, v-if, v-for, and v-bind.
Directive attribute values are expected to be single JavaScript expressions.
A directive's job is to reactively apply updates to the DOM when the value of its expression changes.

What is Virtual DOM?
Virtual DOM is a JavaScript representation of Document Object Model (DOM), which is lightweight in nature.

Which directive is used for one-way data binding in Vue.js?
The v-bind directive is used for one-way data binding or one-way data flow in Vue.js.

Which inbuilt directive in Vue.js is used to establish two-way bindings?
The v-model directive is used to create the two-way bindings in Vue.js.

What is Mixin in Vue.js?
Mixins are an easier way to distribute reusable functionalities for Vue components.

Can we call the REST API from Vue.js?
Yes, we can call a REST API from Vue.js with the help of the Axios library.

How is v-show different from the v-if directive in Vue.js?
The v-show directive conditionally displays elements, whereas the v-if directive conditionally renders elements.

 What is $parent property in Vue.js?
$parent property enables the child to access parent instances. It is similar to $root Property.

What is the use of $child property in Vue.js?
Similar to the $parent property, the $child property enables the developer to access the child instance.

 Vue consists of how many components?
Vue consists of three components namely templates, styles, and JavaScript.

Why is Vue.js so fast?
Vue.js works faster than other JavaScript frameworks because it was developed with the help of lightweight virtual DOM.

What are refs in Vue.js?
These are used to indicate a reference to other HTML elements or child elements.

What is the watcher in Vue.js?
A watcher in Vue.js is a special feature with which one can observe the changes occurring to the data when we are applying certain operations to the data.

 With which inbuilt directive of Vue.js, one can assign values to HTML attributes, and change the style?
v-bind directive enables us to assign values to HTML attributes, change the style and assign classes.

What is the use of Vue-router?
Vue-router is used to establish a connection between browser URL and Vues’ Components

What are the different types of directives present in Vue.js?
There are different types of directives present in Vue.js. They are:
Empty directives
Literal directives
General directives and 
Custom directivesComponents.

Mention one advantage of using mixins in Vue.js?
One of the main advantages of using mixins in Vue.js is that they provide the flexibility to distribute reusable features. 
// Define a mixin
const myMixin = {
  data() {
    return {
      message: 'Hello from mixin!'
    }
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  }
}

// Use the mixin in a component
new Vue({
  mixins: [myMixin],
  created() {
    this.greet(); // Outputs "Hello from mixin!"
  }
})


List out all the life cycle events of a Vue instance in Vue.js.
Here are the steps or the events involved in the lifecycle of a Vue instance. 
beforeCreate event
created event 
beforeMount event
mounted event
beforeUpdate event
updated event
beforeDestroy event
destroy event

Is Vue a framework or a library?
Vue is a JavaScript framework, not a library.

Is Vue.js better than React?
Yes, Vue.js is better than React because of its performance and stability. 

What is a component in Vue.js?
Component is one of the significant features in Vue.js. These components are used to extend the basic HTML elements to reusable code. These components can be registered in two different ways as local and global components.


API Styles​
Vue components can be authored in two different API styles: Options API and Composition API.

Options API​
With Options API, we define a component's logic using an object of options such as data, methods, and mounted. 
Properties defined by options are exposed on this inside functions, which points to the component instance:
<script>
export default {
  // Properties returned from data() become reactive state
  // and will be exposed on `this`.
  data() {
    return {
      count: 0
    }
  },
  // Methods are functions that mutate state and trigger updates.
  // They can be bound as event handlers in templates.
  methods: {
    increment() {
      this.count++
    }
  },
  // Lifecycle hooks are called at different stages
  // of a component's lifecycle.
  // This function will be called when the component is mounted.
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>
<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

Composition API​
With Composition API, we define a component's logic using imported API functions. 
In SFCs, Composition API is typically used with <script setup>. 
The setup attribute is a hint that makes Vue perform compile-time transforms that allow us to use Composition API with less boilerplate. For example, imports and top-level variables / functions declared in <script setup> are directly usable in the template.
<script setup>
import { ref, onMounted } from 'vue'
// reactive state
const count = ref(0)
// functions that mutate state and trigger updates
function increment() {
  count.value++
}
// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>


Arguments​
Some directives can take an "argument", denoted by a colon after the directive name.
<a v-bind:href="url"> ... </a>
<!-- shorthand -->
<a :href="url"> ... </a>

v-on has a corresponding shorthand, namely the @ character.
<a v-on:click="doSomething"> ... </a>
<!-- shorthand -->
<a @click="doSomething"> ... </a>

Dynamic Arguments​
It is also possible to use a JavaScript expression in a directive argument by wrapping it with square brackets:
<a v-bind:[attributeName]="url"> ... </a>
<!-- shorthand -->
<a :[attributeName]="url"> ... </a>
- component instance has a data property, attributeName, whose value is "href", then this binding will be equivalent to v-bind:href.

<a v-on:[eventName]="doSomething"> ... </a>
<!-- shorthand -->
<a @[eventName]="doSomething"> ... </a>
- when eventName's value is "focus", v-on:[eventName] will be equivalent to v-on:focus.

Modifiers​
Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way.
For example, the .prevent modifier tells the v-on directive to call event.preventDefault() on the triggered event:
<form @submit.prevent="onSubmit">...</form>


Vue3 Notable New Features:
Composition API*
SFC Composition API Syntax Sugar (<script setup>)*
Teleport
Fragments
Emits Component Option**
createRenderer API from @vue/runtime-core to create custom renderers
SFC State-driven CSS Variables (v-bind in <style>)*
SFC <style scoped> can now include global rules or rules that target only slotted content
Suspense (experimental)
(* Now also supported in Vue 2.7
** Supported in Vue 2.7, but only for type inference)

Comments

Post a Comment

Popular posts from this blog

PL/SQL

-
PL/SQL PL/SQL stands for Procedural Language extensions to the Structured Query Language (SQL). PL/SQL can execute a number of queries in one block using single command. One can create a PL/SQL unit such as procedures, functions, packages, triggers, and types, which are stored in the database for reuse by applications. The PL/SQL engine resides in the Oracle engine. The Oracle engine can process not only single SQL statement but also block of many statements. Structure of PL/SQL Block: DECLARE     declaration statements; BEGIN     executable statements EXCEPTIONS     exception handling statements END; / Example : SET SERVEROUTPUT ON; SQL> DECLARE        var varchar2(40) := 'I love GeeksForGeeks' ;      BEGIN        dbms_output.put_line(var);      END;      / PL/SQL Functions PL/SQL functions are reusable blocks of code that can be used to perform specific tasks. They are...
Read more

JAVA8 Features

-
Java8 Features 1) Lambda Expressions : Concise functional code using ->. Lambda Expression basically expresses an instance of the functional interface, Lambda Expression provides a clear and concise way to represent a method of the functional interface using an expression. 2) Functional Interfaces : Single-method interfaces. An interface that contains only one abstract method is known as a functional interface. There is no restriction, that can have n number of default and static methods inside a functional interface. A functional interface is an interface that contains only one abstract method.  @FunctionalInterface annotation is used to ensure that the functional interface can’t have more than one abstract method. Runnable, ActionListener, and Comparable are some of the examples of functional interfaces.   Runnable –> This interface only contains the run() method.   Comparable –> This interface only contains the compareTo() method.   ActionListener –> ...
Read more

Build Automation

-
ANT: Ant was the first build tool released in 2000. Ant was developed on procedural programming idea. Ant was improved with an ability to accept plug-ins and dependency management over the network, with the help on Apache-IVY. Drawbacks: 1) XML is used as a format to write the build scripts. 2) Being hierarchical is not good for procedural programming, and 3) XML is relatively unmanageable.   MAVEN: Maven was introduced in 2004. Maven relied on the conventions and was able to download the dependencies over the network. Benefits : Life cycle of Maven, while following the same life cycle for multiple projects continuously. Problems: 1) Maven does not handle the conflicts between versions of the same library. 2) Complex customised build scripts are difficult to write in Maven, as compared to writing the build scripts in ANT. GRADLE : Gradle came into picture in 2012 Features  Declarative builds and build-by-convention 1) Gradle is available with separate Domain Specific Language ...
Read more