Hack Frontend Community

What is Vue.js?

Vue.js is a progressive JavaScript framework for creating user interfaces. It's simple to learn, yet powerful and flexible, making it excellent choice for both small projects and large web applications.

Main Vue.js Advantages

  • Simplicity and convenience

    Vue.js is designed with focus on ease of use. Its syntax is intuitive, and documentation thoroughly describes all capabilities.

Note:

Vue is often compared with React and Angular: it's lighter and easier to learn than Angular, but provides more structured approach than React.

  • High performance

    Vue.js size (~20KB) is smaller than React or Angular, and its virtual DOM ensures fast rendering.

  • Reactivity

    Vue uses reactive data system. If data changes, Vue automatically updates interface without need to manually manipulate DOM.

  • Component approach

    Vue uses reactive data system. If data changes, Vue automatically updates interface without need to manually manipulate DOM.

<template>
  <button @click="sayHello">Click me</button>
</template>

<script setup>
  const sayHello = () => {
    alert('Hello!');
  };
</script>

  • Two-way data binding

    Unlike React, Vue supports two-way data binding (v-model), simplifying form work.

<template>
  <input v-model="name" placeholder="Enter name" />
  <p>Hello, {{ name }}</p>
</template>

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

const name = ref('');
</script>

  • Modularity and ecosystem

    Vue easily integrates with other technologies and offers powerful tools:

    • Vue Router — route (page) management.
    • Vuex / Pinia — global state management.
    • Vue CLI & Vite — fast setup and development.

  • SSR and PWA Vue supports server-side rendering (SSR) with Nuxt.js and allows creating progressive web applications (PWA).

  • Good documentation and community support Vue documentation is simple and clear, and large community actively helps beginners.

How Does Vue.js Work?

Important to remember:

Vue.js is a reactive framework that works on "Data-Driven View" principle. This means interface (UI) automatically updates when data changes.

Main Vue.js Work Mechanisms

  1. Creating Vue instance
  2. Reactivity and DOM updates
  3. Component approach
  4. Two-way binding (v-model)
  5. Virtual DOM
1

Creating Vue Instance

Every Vue application starts with creating Vue.createApp() instance.

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

const message = ref('Hello, Vue!');
</script>

<template>
    <h1>{{ message }}</h1>
</template>

What happens here?

  • ref('Hello, Vue!') makes message variable reactive.
  • Inside <template> {{ message }} is used, and Vue will automatically update DOM when message changes.
2

Reactivity and DOM Updates

Vue uses reactive system to track data changes.

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

const count = ref(0);

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

<template>
  <p>Counter: {{ count }}</p>
  <button @click="increment">+</button>
</template>

How does it work?

  • count is reactive state created via ref.
  • When count changes (count.value++), Vue automatically updates HTML {{ count }} in template.
3

Component Approach

Vue application is built from reusable components.

▶ Parent Component (App.vue)

<template>
<Counter />
</template>

<script setup>
import Counter from './Counter.vue';
</script>

▶ Child Component (Counter.vue)

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

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

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

Vue breaks application into small blocks (components) that can be reused.

4

Two-way Binding (v-model)

Vue supports two-way data and interface binding.

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

const name = ref('');
</script>

<template>
  <input v-model="name" placeholder="Enter name" />
  <p>Hello, {{ name }}!</p>
</template>

How does it work?

  • When user enters text in <input>, name updates.
  • Since name is reactive, Vue automatically updates <p>Hello, ...</p>.
5

Virtual DOM

Vue uses virtual DOM for fast interface updates.

How does it work?

  • Vue doesn't update entire DOM, only changed parts.
  • Vue creates virtual DOM copy, compares it with current state and updates only changed elements.
  • This makes Vue work faster than standard DOM manipulation.