Vue3 Basic Syntax

Vue.js is a progressive JavaScript framework, mainly used for building user interfaces.

Vue.js is based on the concepts of componentization and reactive data, providing a simple and efficient way to build user interfaces.

Vue Single File Components

Vue Single File Component (SFC) is a file format of the Vue.js framework that allows developers to put HTML, JavaScript, and CSS code in one file, usually with.vueas the file extension.

A Single File Component is a reusable code organization form that encapsulates the HTML, CSS, and JavaScript belonging to the same component in a file using.vuethe file suffix.

The following are some common Vue.js basic syntax and concepts, including template syntax, directives, event handling, computed properties, and components, which will be explained in detail in later chapters.

1. Creating a Vue Instance

Creating a Vue instance is the first step to start using Vue.js. Usually you create a Vue instance in an HTML file and mount it to a DOM element.

Example

<div id="hello-vue" class="demo">
  {{ message }}
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>

Try it »

HTML section description:

<div id="hello-vue" class="demo">:

  • This is a<div>element, which has an id ofhello-vueand a class ofdemo。
  • In the Vue application, this<div>will be managed by the Vue instance, and its content will be updated when the data changes.

{{ message }}:

  • This is the template syntax of Vue.js, used to bind themessagedata to the page.
  • When the data in the Vue instancemessagechanges, the content on the page will update accordingly.

JavaScript section description:

Vue instance definition:

const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}
  • HelloVueAppis a plain JavaScript object containing Vue component options.
  • data()method returns an object containingmessagethe property, and the initial value of this property is'Hello Vue!!'。

Create and mount the Vue application:

  • Vue.createApp()method is used to create a Vue application instance, and the parameter is an object containing component options (here it isHelloVueApp）。
  • .mount('#hello-vue')method mounts the Vue application instance to the page element withid="hello-vue"the DOM element.

Execution Process

  • When the page loads, the browser parses HTML and JavaScript.
  • When the Vue.js script executes, it creates a Vue application instance and binds it to the<div id="hello-vue">element.
  • The Vue application instance, according to thedata()initial data in, willmessagerender the value of ... onto the page{{ message }}position.
  • WhenmessageWhen data changes (for example, through user interaction or asynchronous operations), the page will automatically update to reflect these changes.

2. Template Syntax

Interpolation

Vue.js uses double curly braces{{ }}to represent text interpolation:

Example

<div>{{ message }}</div>

Directives

Directives are special attributes with the prefixv-used to express logic in templates.

v-bind: dynamically bind one or more attributes, or a component prop.

<a v-bind:href="url.html">Link</a>

Shorthand:

<a :href="url.html">Link</a>

v-if / v-else-if / v-else: conditional rendering.

<p v-if="visible">内容可见</p>
<p v-else>内容不可见</p>

v-for: list rendering.

<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

v-model: two-way data binding.

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-on: event listener.

<button v-on:click="doSomething">Click me</button>

Shorthand:

<button @click="doSomething">Click me</button>

3. Event Handling

In Vue.js, you can use the v-on directive to listen to DOM events and execute some JavaScript code when they are triggered.

Example

<div id="app">
  <button @click="greet">Greet</button>
</div>

<script>
  createApp({
    methods: {
      greet() {
        alert('Hello!');
      }
    }
  }).mount('#app');
</script>

4. Computed Properties

Computed properties are properties cached based on their dependencies. A computed property is only recalculated when its related dependencies change.

Example

<div id="app">
  <p>{{ reversedMessage }}</p>
</div>

<script>
  createApp({
    data() {
      return {
        message: 'Hello'
      };
    },
    computed: {
      reversedMessage() {
        return this.message.split('').reverse().join('');
      }
    }
  }).mount('#app');
</script>

5. Components

Components are one of the most powerful features of Vue.js. Components allow you to build large applications using small, independent, and usually reusable components.

Example

const app = createApp({});

app.component('my-component', {
  template: '<div>A custom component!</div>'
});

Using Components

Example

<div id="app">
  <my-component></my-component>
</div>

<script>
  const app = createApp({});

  app.component('my-component', {
    template: '<div>A custom component!</div>'
  });

  app.mount('#app');
</script>

6. Props and Events

Props

Props are used to pass data between components.

Example

<div id="app">
  <blog-post title="My journey with Vue"></blog-post>
</div>

<script>
  const app = createApp({
    data() {
      return {};
    }
  });

  app.component('blog-post', {
    props: ['title'],
    template: '<h3>{{ title }}</h3>'
  });

  app.mount('#app');
</script>

Events

Child components use$emitto trigger events, and parent components can listen to these events.

Example

<div id="app">
  <button-counter @increment="incrementTotal"></button-counter>
  <p>Total clicks: {{ total }}</p>
</div>

<script>
  const app = createApp({
    data() {
      return {
        total: 0
      };
    },
    methods: {
      incrementTotal() {
        this.total++;
      }
    }
  });

  app.component('button-counter', {
    template: '<button @click="increment">You clicked me {{ count }} times.</button>',
    data() {
      return {
        count: 0
      };
    },
    methods: {
      increment() {
        this.count++;
        this.$emit('increment');
      }
    }
  });

  app.mount('#app');
</script>
Other Extensions