Vue Js – Introduction

Vue Js – Introduction

Different ways of utilizing Vue.

Vue can be used to control parts of HTML pages or entire pages .

  • Widget approach on a multi-page application.

Vue can also be used to control the entire frontend of a web application.

  • SPA approach – Server only sends one HTML page, thereafter, Vue takes over and controls the UI.

{{ }} -> interpolation syntax

Vue renders the data using the interpolation syntax, it can render Strings, Numbers, Booleans, Arrays, Objects etc.

Interpolation syntax can also render JavaScript expressions.

<body>
    <header>
      <h1>Vue Course Goals</h1>
    </header>
    <section id="user-goal">
      <h2>My Course Goal</h2>
      <p>{{courseGoal}}</p>
      <p>{{stringVar}}</p>
      <p>{{numberVar}}</p>
      <p>{{boolVar}}</p>
      <p>{{arrayVar}}</p>
      <p>{{objectVar}}</p>
      <p>{{3+4}}</p>
    </section>
  </body>

const app = Vue.createApp({
  data() {
    return {
      courseGoal: "Finish Vue!!!",
      stringVar: "Hello World",
      numberVar: 123,
      boolVar: true,
      arrayVar: [99, 100, 100],
      objectVar: { name: "John" },
    };
  },
});

app.mount("#user-goal");

Vue – interpolation

createApp creates a Vue instance which is mount on a certain part of the html page (some div) or the entire page (body), denoted by a CSS selector.

createApp takes in an object – which has a data functionthat further returns an object. This data function name can not be altered, under the hood Vue sees the data function and does the necessary stuffs.

Vue.createApp({ // createApp takes in an object
  data() { // data function
    return {}; // returns an object
  },
});

v-bind directive:

v-bind directive helps to bind to html attributes, ex: href, src etc.

<body>
    <header>
      <h1>Vue Course Goals</h1>
    </header>
    <section id="user-goal">
      <h2>My Course Goal</h2>
      <p>Click <a v-bind:href="link">here</a> to go to TechnCode</p>
    </section>
  </body>

const app = Vue.createApp({
  data() {
    return {
      courseGoal: "Finish Vue!!!",
      link: "http://techncode.xyz/",
    };
  },
});

app.mount("#user-goal");

v-bindv-bind directiveinspect-element

https://github.com/anurag1302/to-do-list-vue

https://github.com/anurag1302/vue-basics-1

Did you find this article valuable?

Support TechnCode by becoming a sponsor. Any amount is appreciated!