new Vue({
  ...
  ...
  ...
});

new Vue({
  el: "#app",
});

new Vue({
  el: "#app",
  data: {
    title: "Hello World!",
  },
});

<div id="app">
  <p>{{title}}p>
div>

<input type="text" v-on:input="changeTitle" />

new Vue({
  el: "#app",
  data: {
    title: "Hello World!",
  },
  methods: {
    changeTitle: function (event) {
      this.title = event.target.value;
    },
  },
});

<p v-if="show">Do you also see me?p>

new Vue({
  el: "#app",
  data: {
    show: true,
  },
});

<p v-else>Do you also see me?p>

<div v-if="type === 'A'">Adiv>
<div v-else-if="type === 'B'">Bdiv>
<div v-else-if="type === 'C'">Cdiv>
<div v-else>Not A/B/Cdiv>

Suppose we want to render multiple elements based on the conditions, instead of attaching v-if for all the elements, wrap all those elements in a tag which is an HTML5 tag which doesn't gets rendered in the DOM, instead the child elements or the content inside the gets added to the DOM.

<template v-if="show">
  <p>Hello there!p>
  <h1>Heading 1h1>
template>

If we have more complex data like an array or group of objects to render, it can be done by v-for directive

Suppose we have the following data

ingredients: ["chicken", "fruits", "cookies"];

We can simple use v-for in this way to render a list

<ul>
  <li v-for="ing in ingredients">{{ ing }}li>
ul>

We can use paranthesis and give 2 arguments (The following order is important)

1. The array property or value
2. Index

<ul>
  <li v-for="(ing, i) in ingredients">{{ ing }} ({{ i }})li>
ul>

Similar to v-if, v-for can also be used on the template tag to output the data into different elements. For Ex: data into an element and index into another element. Here unline v-if alternative, v-for is used in the template tag itself.

<template v-for="(ing, i) in ingredients">
  <h1>{{ ing }}h1>
  <h2>{{ i }}h2>
template>

We can loop through the array of objects in the following way

<ul>
  <li v-for="person in persons">
    <div v-for="(value, key, index) in person">
      {{ key }}:{{ value }} ({{ index }})
    div>
  li>
ul>

Firstly looping through every object and then looping through the keys and values of that object

Suppose you want to output all the numbers from 1 to 10, it is pretty easy in Vue JS

<ul v-for="n in 10">
  <li>{{ n }}li>
ul>

10 above represents not just the number 10 but the range or the outbound value starting from 1

Moving to a more real-time workflow, creating the vue applications is pretty easy using the CLI tool of the VUE. Here we are the Vue CLI 2 using the webpack-simple template to generate a new project.

npm install -g vue-cli

Third and fourth arguments are template and name of the project

vue init webpack-simple vue-cli

Go to that newly created project folder and run the following command to install all the required dependencies

npm install

This Vue Cli used the webpack for bundling and loading and also serving on the local by spinning up a webpack developement server

npm run dev

Components are the re-usable pieces of code which can be used any number of times. Suppose we want to render something to template by adding the element in the el property of the Vue instance, but el property is like document.querySelector() of javascript which selects the first element of such element in the DOM. Components come to save us in these situations

It accepts two arguments

1. Name of the tag or element to be selected
2. Object similar to the object we give inside the Vue instance

Vue.component("my-cmp", {
  data() {
    return {
      status: "Critical",
    };
  },
  template: "
Server status: {{ status }}
",
});

There are some considerations while creating the components

1. The element which we pass into the first argument can be any HTML element or a custom element but it's advised to use the custom element.
2. Data property that we pass inside the object is little different from that we pass in the Vue instance. Here we need to pass a function return the object of properties that we need inside the data property to not interfere with the data properties of the Root instance.
3. Using a local data and passing that data to return from the data function of the component causes the problem of the shared data, hence we should return a new object directly from the function instead of using it from locally.

const comp = {
  data() {
    return {
      status: "Critical",
    };
  },
  template:
    "
Server status: {{ status }} Change
",
  methods: {
    changeStatus() {
      this.status = "Normal";
    },
  },
};

Using the above component in our vue instance

new Vue({
  el: "#app1",
  components: {
    "my-cmp": comp,
  },
});

Vue.component() registers the component globally

• Go to src folder and create your file ending with .vue extension
• A Single file template or more formally known as template consists of 3 things

1. Template tag (One important point is inside template tag only one root element needs to be present i.e. If you have multiple elements wrap all the elements into a div and put that div onto this template)
2. Script tag with exported object
3. Style tag (Optional) for CSS stylings

Home.vue

<template>
  <div>
    <p>Server status: {{ status }}p>
    <hr />
    <button @click="changeStatus">Change Statusbutton>
  div>
template>

<script>
  export default {
    data: () => {
      return {
        status: "Critical",
      };
    },
    methods: {
      changeStatus() {
        this.status = "Normal";
      },
    },
  };
script>

• Import the file in the main.js as the following

import Home from "./Home.vue";

• Using the above import as a component and binding it to a tag

Vue.component("app-server-status", Home);

• Render the above created tag onto the root App.vue

<app-server-status>app-server-status>

We can use multiple folders for better maintenance of code

1. For small, medium sized applications we can use Components folder and place all our Vue files into that
2. For large scale enterprise applications we can nest folders inside Components folder based on shared or feature specific component

If we apply the below style on any component, it by default applies it globally instead of applying it to only the current component

<style>
  div {
    border: 1px solid greenyellow;
  }
style>

We should scope the style in the following manner to apply styles locally to only that particular component