Mặc dù **vue** hay còn gọi là **vuejs** là một công nghệ sinh sau đẻ muộn hơn so với react hay angularjs đời đầu. Nhưng hiện tại, nó có thể coi là một công nghệ, framework đang rất được ưa chuộng trong các dự án của nhiều công ty hiện nay. Đi kèm với **vue** là những khái niệm tương tự với **react, angular** đối với những lập trình viên đã từng làm việc với các công nghệ phát triển web hướng **Single Page Application**. Tuy nhiên, bài viết này cũng dành cho cả 2 đối tượng là người mới hoặc đã sử dụng các công nghệ tương tự. Mục đích của chúng ta sẽ tìm hiểu các sử dụng nó trong bài viết lần này. ## Tóm tắt chút về Vuejs. **Vue** là một công nghệ phát triển web theo dạng đơn trang (**Single Page Application**) được nhà sáng lập lấy cảm hứng trong quá trình phát tiển framework **angular** tại **Google**. Không giống như cách phát triển thông thường, phía máy chủ sẽ quản lý các điều hướng của trang web. Vue cho phép chúng ta quản lý mọi điều hướng của trang web tại **Vue** thông qua [**Vue-router**](https://router.vuejs.org/). Tuy nhiên, một bất lợi là mà các **SPA** như Vue mang đến là sự không thân thiên với SEO. Vì quá trình kết xuất các đoạn mã HTML được thực hiện sau quá trình tải lần đầu của một trang web mà chúng ta truy cập. Để bắt đầu tìm hiểu các khái niệm cơ bản trong Vuejs, chúng ta sẽ cần biết cách **khởi tạo một ứng dụng vue như thế nào?**. Cùng tìm hiểu xem nhé. ## Khởi tạo Vue Trước khi khởi tạo bạn cần cài đặt đoạn **CLI** để của **vue** để có thể khởi tạo dự án: ```js npm install -g @vue/cli @vue/cli-service-global # or yarn global add @vue/cli @vue/cli-service-global ``` Khởi tạo một ứng dụng vue, bạn cần một **thư mục** để chứa dự án chúng ta khởi tạo và chạy `vue create demo-app`. Quá trình này vue sẽ đặt các câu hỏi tùy chọn để giúp bạn khởi tạo ứng dụng với cấu trúc đã được cấu hinh sẵn của **Vue** Sau khi khởi tạo bạn sẽ nhận được kết quả như sau: ## Cú pháp của Vuejs Trong đoạn `demo` phí trên, bạn sẽ thấy các cú pháp bên trong tệp `src/App.vue` để tạo giao diện và các đoạn mã javascript rất giống với html và javascript ```html // src/App.vue

``` Phạm vi phát triển ứng dụng của chúng ta sẽ nằm bên trong thẻ `div` với id là `app`. Lý do là vì **Vue** sẽ cần một thẻ để làm nơi kết xuất toàn bộ nội dung cho ứng dụng. Bây giờ, thử thay đổi nội dung của nó bên trong `

` ```html

Hello world

``` Bạn sẽ thấy chữ **Hello world** được hiển thị trên màn hình theo những gì mình mong muốn. Từ đây, toàn bộ ứng dụng của chúng ta sẽ phát triển bên trong thẻ `

` này. Và nếu bạn muốn khởi tạo các `container`, `components` bắt buộc phải có cấu trúc như sau: ```jsx ``` Đây là cấu trúc mặc định của Vue: - **template**: Là nơi phụ trách hiển thị các nội dung mà chúng ta viế - **script**: Là nơi chúng ta đặt tên cho **component**, truyền các giá trị **data, props, event và life cycle** hỗ trợ cho việc phát triển các **Component**. > Chúng ta đã hoàn thành bước khỏi tạo ứng dụng Vue với CLI. Trong phần tiếp theo, mình sẽ đi sâu hơn vào các phần của **Vue** để các bạn có thể hình dung tổng thể về nó.

Vue

Framework Vuejs

Khởi tạo ứng dụng Vue