Vue Framework Complete Guide: The Elegant Way of Progressive Frontend Development

If React is the “libertarian” of frontend frameworks, then Vue is the “elegant school.” Created by Chinese developer Evan You, Vue has become one of the most popular frontend frameworks in China, thanks to its concise API and excellent Chinese documentation.

What is Vue?

#

Vue (pronounced like “view”) is a progressive JavaScript framework for building user interfaces. Released in 2014 by Evan You, its core philosophy is “progressive”—you can use just its core features or gradually introduce more advanced capabilities.

Understanding Through Analogy

#

Vue’s “progressive” approach means: you can start with a simple page, then gradually add routing, state management, and build tools, eventually building a complete large application.

Core Features

#

1. Progressive Architecture: Import as Needed

#

Vue doesn’t force you to learn everything at once. You can:

• Use just the core library: Import Vue.js and build simple pages
• Add routing: Add Vue Router for page navigation
• Add state management: Add Pinia for global state
• Add build tools: Use Vite for better development experience

<!-- Method 1: Use CDN directly, like jQuery -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- Method 2: Use build tools, professional development -->
npm create vue@latest

2. Reactive System: Data-Driven Views

#

Vue’s reactive system is its most core feature. When you modify data, the view automatically updates.

const { createApp, ref } = Vue;

createApp({
  setup() {
    const message = ref('Hello Vue!');
    const changeMessage = () => {
      message.value = 'Hello World!';  // Modify data, view automatically updates
    };
    return { message, changeMessage };
  }
}).mount('#app');

Analogy:

Reactivity is like an Excel spreadsheet—when you modify a cell, all formulas referencing that cell automatically recalculate.

3. Template Syntax: Intuitive and Readable

#

Vue uses HTML-like template syntax that feels very familiar to frontend developers:

<div id="app">
  <!-- Text interpolation -->
  <h1>{{ message }}</h1>

  <!-- Attribute binding -->
  <img :src="imageUrl" :alt="description">

  <!-- Event binding -->
  <button @click="handleClick">Click</button>

  <!-- Conditional rendering -->
  <p v-if="show">Show this text</p>

  <!-- List rendering -->
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>

4. Composition API: A New Way to Organize Logic

#

Vue 3 introduced the Composition API, allowing you to organize component logic more flexibly:

import { ref, computed, onMounted } from 'vue';

export default {
  setup() {
    // Reactive state
    const count = ref(0);
    const doubled = computed(() => count.value * 2);

    // Methods
    const increment = () => count.value++;

    // Lifecycle hooks
    onMounted(() => {
      console.log('Component mounted');
    });

    return { count, doubled, increment };
  }
};

Comparing Options API:

// Options API (Vue 2 style)
export default {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } }
}

// Composition API (Vue 3 style)
export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
}

Benefits of Composition API:

• Logic reuse: Group related code together
• Type support: Better TypeScript support
• Code organization: Large components are easier to maintain

5. Single File Components: .vue Files

#

Vue uses .vue file format to encapsulate templates, scripts, and styles in one file:

<template>
  <div class="greeting">
    <h1>{{ message }}</h1>
    <button @click="greet">Say Hello</button>
  </div>
</template>

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

const message = ref('Hello Vue!');
const greet = () => alert(message.value);
</script>

<style scoped>
.greeting h1 {
  color: #42b883;
}
</style>

Why is Vue So Popular?

#

1. Easy to Learn

#

Vue’s learning curve is much flatter than React:

• No need to learn JSX (though you can use it)
• Template syntax is intuitive, like writing HTML
• Chinese documentation is excellent
• API design is simple and consistent

2. Active Chinese Community

#

Vue has a large user base in China:

• High-quality official Chinese documentation
• Rich community tutorials
• Mature UI libraries like Element Plus, Vuetify
• Many domestic tech companies (Alibaba, Didi, ByteDance) use Vue

3. Excellent Performance

#

Vue 3 rewrote the reactive system using Proxy, significantly improving performance compared to Vue 2:

4. Flexibility from Progressive Architecture

#

You can choose how much Vue to use based on your project needs:

• Small projects: Use CDN directly
• Medium projects: Add Vue Router
• Large projects: Add Pinia + Vue Router + TypeScript

Use Cases

#

Learning Path

#

Beginner (1 week)

#

1. Understand Vue’s reactive system
2. Master template syntax (interpolation, directives, events)
3. Learn to use ref and reactive
4. Understand basic component usage

Intermediate (2-3 weeks)

#

1. Master Composition API
2. Learn Vue Router
3. Learn Pinia state management
4. Understand component communication (props, emit, provide/inject)

Advanced (continuous learning)

#

1. TypeScript + Vue
2. Vue 3 underlying principles
3. Performance optimization
4. SSR (Nuxt.js)

Vue 3 Composition API Common Functions

#

Comparison with React

#

Simply put:

• Vue: Convention over configuration, easy to start, Chinese-friendly
• React: Flexible and free, largest ecosystem, slightly steeper learning curve

Summary

#

Vue’s “progressive” philosophy allows developers at all levels to find their preferred way of using it:

1. Concise API—Makes code readable and writable
2. Reactive system—Data-driven views, goodbye to manual DOM manipulation
3. Progressive architecture—From simple pages to complex applications
4. Chinese community—Complete documentation, easy to find answers

Whether you’re a frontend beginner or an experienced developer looking to try a different framework, Vue is an excellent choice.

Next up: When React meets server-side rendering, what kind of sparks fly? Next.js extends React from frontend to full-stack. Let’s dive into this “React full-stack framework” in the next article.