Vue

• 2023/7/8
• 2-minute read

Core Concepts of Vue

Reactive Data: One of the core features of Vue.js is reactive data. This means that when data changes, the associated views are automatically updated. You can use a data object to define reactive data and use them in templates.

Templates: Vue.js uses HTML-based template syntax to declare views. Templates can include Vue.js directives, expressions, and filters for controlling and displaying data.

Components: Components are another important concept in Vue.js. Components encapsulate reusable code blocks, and each component can have its own template, data, and logic. By combining different components, you can build complex applications.

Directives: Directives are special attributes used to apply declarative behavior to DOM elements in templates. Vue.js provides some built-in directives, such as v-if, v-for, and v-bind. You can also create custom directives to extend Vue.js functionality.

Computed Properties: Computed properties are properties used to derive reactive data. They can calculate values based on other reactive data and are cached, only recomputed when the related data changes.

Watchers: Watchers allow you to perform custom logic when reactive data changes. You can watch one or more data properties and execute corresponding operations when changes occur.

Lifecycle Hooks: Vue.js component lifecycle hooks are functions executed at different stages of a component’s lifecycle. You can utilize these hooks to perform initialization, cleanup, or other operations.

Routing: Vue.js provides the vue-router library for client-side routing. Routing allows you to render different components based on changes in the URL, enabling navigation functionality in single-page applications.

An example of the Composition API:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};
</script>