Skip to main content
Advertisement

Vue.js Basics

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

1. Features of Vue​

  • Approachability: It is easy enough to start right away with just basic knowledge of HTML, CSS, and JS.
  • Reactivity: It has a powerful reactive system where the view updates automatically when data changes.
  • Component-based: UI can be divided into independent, reusable pieces.

2. Declarative Rendering (Composition API)​

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

const count = ref(0)
const increment = () => {
  count.value++
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

<style scoped>
button { font-weight: bold; }
</style>

3. Directives​

Vue uses special attributes with the v- prefix to add logic to templates.

  • v-if: Conditional rendering
  • v-for: List rendering
  • v-model: Two-way data binding

4. Ecosystem​

You can build large-scale applications using Pinia for state management and Vue Router for routing.

In the next section, we'll learn about Nuxt, the full-stack framework for Vue.

Advertisement
Advertisement