Creating a Vue app | Vue Instance and Template Syntax Tutorial

Vue Instance and Template Syntax: Creating a Vue App

Vue.js is a progressive framework for building user interfaces. At its core, Vue allows you to declaratively bind data to the DOM, making it easy to manage and update your application's view. This section will cover creating a basic Vue app, understanding the Vue instance, and exploring fundamental template syntax.

1. Creating a Vue App - The Basics

To start, you'll need to include Vue.js in your HTML. You can do this in a few ways:

CDN: The simplest way for quick prototyping.

<!DOCTYPE html>
<html>
<head>
  <title>My Vue App</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

NPM/Yarn (with a build tool like Webpack/Vite): Recommended for larger projects. This involves installing Vue as a dependency and bundling your code. (Details beyond the scope of this basic introduction).

2. The Vue Instance

The heart of a Vue application is the Vue instance. You create one using createApp(). The createApp() function takes an options object that defines the data, methods, and other properties of your application.

Key Options:

data(): A function that returns an object containing the data that your component will use. This data is reactive, meaning that when it changes, the view automatically updates. Must be a function returning an object.
methods: An object containing functions that can be called from your template. These functions can modify the data and trigger updates.
computed: An object containing computed properties. These are derived from the reactive data and are cached, only re-evaluating when their dependencies change.
watch: An object containing watchers. These allow you to react to changes in specific data properties.
el (Deprecated in Vue 3 - use mount()): Specifies the DOM element to which the Vue instance will be attached.
template: Specifies the HTML template that will be used to render the component.

Example:

const { createApp } = Vue;

createApp({
  data() {
    return {
      name: 'John Doe',
      age: 30,
      counter: 0
    }
  },
  methods: {
    increment() {
      this.counter++;
    },
    greet() {
      alert('Hello, ' + this.name + '!');
    }
  },
  computed: {
    isAdult() {
      return this.age >= 18;
    }
  }
}).mount('#app');

3. Template Syntax

Vue uses a template syntax that allows you to declaratively bind data to the DOM. Here are some fundamental concepts:

Mustache Syntax ({{ }}): Used to display data from the Vue instance.
```
<p>Name: {{ name }}</p>
<p>Age: {{ age }}</p>
```
Directives (v-): Special attributes that instruct Vue to do something with the DOM.
- v-bind (or :): Dynamically binds an attribute to an expression.
```
<img :src="imageSrc" :alt="imageAlt">
```
- v-model: Creates a two-way data binding between a form input element and a data property.
```
<input type="text" v-model="message">
<p>You typed: {{ message }}</p>
```
- v-if: Conditionally renders an element.
```
<div v-if="isAdult">You are an adult.</div>
```
- v-for: Renders a list of items.
```
<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>
```
- v-on (or @): Listens for DOM events and executes a method.
```
<button @click="increment">Increment</button>
```
Expressions: JavaScript expressions can be used within template syntax.
```
<p>Counter: {{ counter + 1 }}</p>
```
String Concatenation: Use the + operator to concatenate strings and data.
```
<p>Hello, {{ name }}! You are {{ age }} years old.</p>
```

4. Putting it all together - A simple counter example

<!DOCTYPE html>
<html>
<head>
  <title>Vue Counter</title>
</head>
<body>
  <div id="app">
    <p>Counter: {{ counter }}</p>
    <button @click="increment">Increment</button>
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          counter: 0
        }
      },
      methods: {
        increment() {
          this.counter++;
        }
      }
    }).mount('#app');
  </script>
</body>
</html>

This example demonstrates a basic Vue app with a counter that can be incremented by clicking a button. It showcases the use of data(), methods, {{ }} (mustache syntax), and @click (event binding). This is a foundational example to build upon as you learn more about Vue.js.