Giới Thiệu ​

Vue là gì? ​

Vue (phát âm là /vjuː/, giống như view) là một framework JavaScript được sử dụng để xây dựng giao diện người dùng. Nó xây dựng trên nền HTML, CSS và JavaScript tiêu chuẩn, cung cấp một mô hình lập trình khai báo và dựa trên component giúp bạn phát triển giao diện người dùng một cách hiệu quả, cho dù đó là giao diện đơn giản hay phức tạp.

Dưới đây là một ví dụ tối thiểu:

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Số lần nhấn: {{ count }}
  </button>
</div>

Kết quả

Ví dụ trên thể hiện hai tính năng chính của Vue:

• Khai Báo Render: Vue mở rộng HTML tiêu chuẩn với cú pháp mẫu, cho phép chúng ta mô tả một cách khai báo đầu ra HTML dựa trên trạng thái JavaScript.

• Reactivity (Phản ứng): Vue tự động theo dõi thay đổi trong trạng thái JavaScript và cập nhật DOM một cách hiệu quả khi có sự thay đổi.

Bạn có thể đã có những câu hỏi - đừng lo lắng. Chúng ta sẽ bao quát từng chi tiết nhỏ trong phần còn lại của tài liệu. Bây giờ, hãy đọc để bạn có cái nhìn tổng quan về những gì Vue mang lại.

Framework Tiến Tiến (Progressive Framework) ​

Vue là một framework và hệ sinh thái mô phỏng hầu hết các tính năng phổ biến cần thiết trong phát triển frontend. Tuy nhiên, web rất đa dạng - những thứ chúng ta xây dựng trên web có thể biến động đáng kể về hình thức và quy mô. Với điều đó trong tâm trí, Vue được thiết kế để linh hoạt và có thể áp dụng theo từng phần.

• Cải thiện HTML tĩnh mà không cần bước xây dựng
• Nhúng như Web Components trên bất kỳ trang nào
• Ứng dụng một trang (SPA)
• Fullstack / Rendering ở Phía Server (SSR)
• Jamstack / Tạo Trang Tĩnh (SSG)
• Hướng đến máy tính để bàn, di động, WebGL, và thậm chí cả terminal

Nếu bạn thấy những khái niệm này làm bạn nản lòng, đừng lo! Bài hướng dẫn và hướng dẫn chỉ đòi hỏi sự quen thuộc cơ bản với HTML, CSS và JavaScript. Nếu bạn là một nhà phát triển kinh nghiệm quan tâm đến cách tích hợp Vue một cách tốt nhất vào bộ công cụ của mình, hoặc bạn tò mò về những ý này là gì, chúng tôi sẽ thảo luận chúng chi tiết hơn trong Cách Sử Dụng Vue.

Mặc dù có tính linh hoạt, kiến thức cơ bản về cách Vue hoạt động được chia sẻ qua tất cả các trường hợp sử dụng này. Ngay cả nếu bạn chỉ là người mới học, kiến thức tích lũy được sẽ hữu ích khi bạn tiến triển để giải quyết những mục tiêu đầy tham vọng trong tương lai. Nếu bạn là một người có kinh nghiệm, bạn có thể chọn cách tối ưu để tận dụng Vue dựa trên vấn đề bạn đang cố gắng giải quyết, trong khi vẫn giữ nguyên năng suất. Đây là lý do chúng tôi gọi Vue là "Framework Tiến Tiến": đó là một framework có thể phát triển theo bạn và thích ứng với nhu cầu của bạn.

Single-File Components ​

Trong hầu hết các dự án Vue sử dụng các công cụ xây dựng, chúng ta sẽ viết các component Vue bằng cách sử dụng một định dạng tệp giống như HTML được gọi là Single-File Component (còn được biết đến là tệp *.vue, viết tắt là SFC). Một SFC Vue, như tên gọi, đóng gói logic của component (JavaScript), template (HTML), và styles (CSS) trong một tệp duy nhất. Dưới đây là ví dụ trước đó, viết theo định dạng SFC:

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Số lần nhấp: {{ count }}</button>
</template>

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

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Số lần nhấp: {{ count }}</button>
</template>

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

SFC là một tính năng quan trọng của Vue và là cách khuyến khích để viết các component Vue nếu trường hợp sử dụng của bạn đòi hỏi một cài đặt xây dựng. Bạn có thể tìm hiểu thêm về cách và lý do của SFC trong phần được dành riêng cho nó - nhưng bây giờ, chỉ cần biết rằng Vue sẽ xử lý tất cả các cài đặt công cụ xây dựng cho bạn.

API Styles ​

Có hai kiểu API khác nhau để viết component Vue: Options API và Composition API.

Options API ​

Với Options API, chúng ta định nghĩa logic của một component bằng cách sử dụng một đối tượng các tùy chọn như data, methods, và mounted. Các thuộc tính được định nghĩa thông qua tùy chọn sẽ được hiển thị trên this bên trong các hàm, mà trỏ đến thể hiện của component:

<script>
export default {
  // Các thuộc tính trả về từ data() trở thành trạng thái có thể reactivity
  // và sẽ được hiển thị trên `this`.
  data() {
    return {
      count: 0
    }
  },

  // Các phương thức là các hàm thay đổi trạng thái và gây ra cập nhật.
  // Chúng có thể được kết nối như các bộ xử lý sự kiện trong template.
  methods: {
    tăng() {
      this.count++
    }
  },

  // Các hooks vòng đời được gọi ở các giai đoạn khác nhau
  // trong vòng đời của một component.
  // Hàm này sẽ được gọi khi component được gắn kết.
  mounted() {
    console.log(`Số lần nhấp ban đầu là ${this.count}.`)
  }
}
</script>

<template>
  <button @click="tăng;">Số lần nhấp: {{ count }}</button>
</template>

Thử nghiệm ở Playground

Composition API ​

Với Composition API, chúng ta định nghĩa logic của một component bằng cách sử dụng các hàm API được nhập. Trong SFC, Composition API thường được sử dụng với <script setup>. Thuộc tính setup là một gợi ý giúp Vue thực hiện các biến đổi thời gian biên dịch để cho phép chúng ta sử dụng Composition API mà không cần nhiều mẫu mã lặp lại. Ví dụ, các import và biến / hàm cấp độ cao được khai báo trong <script setup> có thể sử dụng trực tiếp trong template.

Dưới đây là cùng một component, với cùng một template, nhưng sử dụng Composition API và <script setup> thay vì:

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

// Trạng thái có thể reactivity
const count = ref(0)

// Các hàm thay đổi trạng thái và gây ra cập nhật
function increase() {
  count.value++
}

// Các hooks vòng đời
onMounted(() => {
  console.log(`Số lần nhấp ban đầu là ${count.value}.`)
})
</script>

<template>
  <button @click="increase">Số lần nhấp: {{ count }}</button>
</template>

Thử nghiệm ở Playground

Chọn Kiểu Nào? ​

Cả hai kiểu API đều hoàn toàn có thể đáp ứng các trường hợp sử dụng phổ biến. Chúng là các giao diện khác nhau được cung cấp bởi cùng một hệ thống cơ bản. Trên thực tế, Options API được triển khai trên cơ sở của Composition API! Các khái niệm cơ bản và kiến thức về Vue được chia sẻ giữa hai kiểu API này.

Options API tập trung vào khái niệm về "thể hiện của component" (this như trong ví dụ), điều này thường phù hợp hơn với mô hình tư duy dựa trên lớp cho những người dùng đến từ các ngôn ngữ lập trình hướng đối tượng. Nó cũng thân thiện với người mới bằng cách trừu tượng hóa chi tiết về reactivity và đặt ra tổ chức mã thông qua các nhóm tùy chọn.

Composition API tập trung vào việc khai báo biến trạng thái có thể reactivity trực tiếp trong phạm vi của một hàm và gộp trạng thái từ nhiều hàm cùng nhau để xử lý sự phức tạp. Nó tự do hơn và đòi hỏi người sử dụng hiểu rõ về cách reactivity hoạt động trong Vue để sử dụng hiệu quả. Trong khi đó, tính linh hoạt của nó mang lại những mô hình mạnh mẽ hơn để tổ chức và tái sử dụng logic.

Bạn có thể tìm hiểu thêm về sự so sánh giữa hai kiểu API và những lợi ích tiềm năng của Composition API trong Composition API FAQ.

Nếu bạn mới làm quen với Vue, đây là khuyến nghị chung của chúng tôi:

• Với mục đích học, hãy chọn kiểu mà bạn cảm thấy dễ hiểu nhất. Một lần nữa, hầu hết các khái niệm cơ bản được chia sẻ giữa hai kiểu này. Bạn luôn có thể học kiểu khác sau này.

• Đối với việc sử dụng trong sản xuất:

• Sử dụng API tùy chọn nếu bạn không sử dụng công cụ xây dựng hoặc dự định sử dụng Vue chủ yếu trong các tình huống có độ phức tạp thấp, ví dụ: tăng cường tiến bộ.

  • Sử dụng Composition API + component tệp đơn nếu bạn dự định xây dựng các ứng dụng đầy đủ bằng Vue.

Bạn không cần phải cam kết chỉ theo một phong cách trong giai đoạn học tập. Phần còn lại của tài liệu sẽ cung cấp các mẫu mã theo cả hai kiểu nếu có và bạn có thể chuyển đổi giữa chúng bất kỳ lúc nào bằng cách sử dụng công tắc Tùy chọn API ở đầu thanh bên trái.