VueJS Tutorial: Hướng dẫn sử dụng VueJS A-Z

VueJS là framework được sử dụng rất phổ biến trong lập trình Frontend bởi những tính năng tiện lợi của nó. Khi định hướng bản thân trở thành Frontend Developer hay Full-stack Developer, hãy trang bị cho mình trọn bộ bí kíp “VueJS tutorial” mà ITviec đã hướng dẫn chi tiết trong bài viết này nhé.

Đọc bài viết để hiểu rõ hơn:

• Vue là gì? Tính năng của VueJS
• VueJS có gì đặc biệt so với các framework khác?
• VueJS Tutorial – Trọn bộ bí kíp cho người mới bắt đầu
• Các câu hỏi thường gặp về VueJS tutorial

VueJS là gì? Tính năng của VueJS?

VueJS (hay Vue.js) là một trong những framework JavaScript mã nguồn mở nổi tiếng, được sử dụng để đơn giản hóa quá trình phát triển giao diện người dùng (IU). VueJS tập trung vào lớp view (view layout) nên rất dễ dàng tích hợp vào các dự án để lập trình frontend một cách dễ dàng.

Framework Vue.js có các tính năng chính sau:

• Sử dụng Virtual DOM: Thay vì trực tiếp thao tác lên DOM thực, VueJS tạo ra một bản sao của DOM dưới dạng cấu trúc dữ liệu JavaScript. Chỉ những thay đổi thực sự cần thiết mới được cập nhật lên DOM thực, giúp tối ưu hóa hiệu suất và cải thiện tốc độ render.
• Data Binding: Tính năng liên kết dữ liệu của VueJS cho phép Frontend Developer thao tác hoặc gán giá trị cho các thuộc tính HTML, thay đổi kiểu dáng, gán lớp với sự trợ giúp của chỉ thị liên kết v-bind có sẵn.
  • Components: Một trong những tính năng quan trọng của VueJS, cho phép tạo các phần tử tùy chỉnh có thể tái sử dụng trong HTML.
  • Xử lý sự kiện: v-on là thuộc tính được thêm vào các phần tử DOM để xử lý các sự kiện trong VueJS.
  • Animation / Transition: VueJS cung cấp nhiều cách chuyển đổi cho các phần tử HTML khi chúng được thêm, cập nhật hoặc xóa khỏi DOM.
• Tính toán: VueJS. có thể theo dõi thay đổi được thực hiện trên các phần tử UI và thực hiện tính toán cần thiết mà không cần code bổ sung.
• Templates: VueJS cung cấp mẫu dựa trên HTML để liên kết DOM với dữ liệu của instance Vue. Vue biên dịch các mẫu thành các hàm render Virtual DOM.
• Chỉ thị: VueJS có các chỉ thị tích hợp sẵn như v-if, v-else, v-show, v-on, v-bind và v-model,… được sử dụng để thực hiện các hành động khác nhau trên frontend.
• Watchers: Watcher đảm nhiệm quá trình xử lý tất cả thay đổi dữ liệu, làm cho code đơn giản, gãy gọn hơn.
• Routing: Điều hướng giữa các trang được thực hiện với sự trợ giúp của vue-router.
• Trọng lượng nhẹ: Script của VueJS rất nhẹ và hiệu suất cũng rất nhanh.

VueJS có gì đặc biệt so với các framework khác?

Tính năng	VueJS	ReactJS	AngularJS	Ember	Knockout	Polymer
Virtual DOM	Có	Có	Không	Không	Không	Không
Template vs JSX	Template (HTML, JS, CSS riêng)	JSX (mọi thứ là JavaScript)	Template (HTML)	Template (HTML)	Template (HTML)	Template (HTML)
Công cụ cài đặt	vue-cli / CDN / npm	create-react-app / npm	Angular CLI	ember-cli	CDN / npm / knockout	npm / polymer-cli
Phổ biến	Phát triển	Rất phổ biến	Rất phổ biến	Ít phổ biến	Ít phổ biến	Ít phổ biến
Phụ thuộc	Ít	Ít	Nhiều	Nhiều	Ít	Ít
Tính linh hoạt	Cao	Trung bình	Thấp	Trung bình	Cao	Trung bình
Hỗ trợ phiên bản cũ	Tốt	Trung bình	Kém	Trung bình	Tốt	Không rõ
Ngôn ngữ lập trình	JavaScript	JavaScript / TypeScript	TypeScript	JavaScript / TypeScript	JavaScript	JavaScript / TypeScript
Hiệu suất	Nhanh	Nhanh	Trung bình	Trung bình	Nhanh (hỗ trợ IE cũ)	Trung bình
Giống với VueJS	—	Chỉ thị	CLI	CLI, Router, Template, Component	—	—
Điểm mạnh	Dễ học, nhẹ, cộng đồng rộng	Phổ biến	Nhiều tính năng, đầy đủ	Cấu trúc rõ ràng	Hỗ trợ IE cũ	Web component

Hướng dẫn cài đặt VueJS tutorial

Lập trình viên có thể cài đặt VueJS theo nhiều cách khác nhau, nhưng cài đặt với CDN hoặc cài đặt cục bộ bằng npm là hai cách phổ biến nhất.

Cài đặt VueJS với CDN

Thêm thẻ sau vào trang HTML của bạn:

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>

Tiếp theo, thay đổi “2.x” bằng phiên bản Vue.js mà bạn muốn sử dụng. Bây giờ, bạn đã có thể sử dụng Vue.js cho dự án của bạn.

Cài đặt cục bộ bằng npm

Đối với các dự án quy mô lớn, bạn nên cài đặt Vue cục bộ bằng npm. Nó đi kèm với Browserify và Webpack cùng các công cụ cần thiết khác, giúp cho việc lập trình ổn định hơn. Để cài đặt, bạn nhập câu lệnh sau: npm install vue.

npm init -y

npm install vue

VueJS tutorial – Trọn bộ hướng dẫn sử dụng VueJS cho người mới bắt đầu

Declarative Rendering (Kết xuất khai báo)

Tính năng cốt lõi của Vue là kết xuất khai báo. Tức là thay vì phải viết từng dòng lệnh để thao tác trực tiếp lên DOM, bạn chỉ cần mô tả giao diện HTML bạn muốn trông như thế nào dựa trên trạng thái JavaScript, Vue sẽ tự động cập nhật DOM khi dữ liệu thay đổi.

Bạn có thể khai báo trạng thái bằng API reactive() của Vue. Các đối tượng được tạo từ reactive() là các Proxy JavaScript hoạt động giống như các đối tượng bình thường. Ví dụ:

import { reactive } from 'vue'

const counter = reactive({

  count: 0

})

console.log(counter.count) // 0

counter.count++

Trong khi reactive() chỉ hoạt động trên các đối tượng (bao gồm mảng và các loại tích hợp như Map và Set) thì ref() có thể nhận bất kỳ loại giá trị nào và tạo ra một đối tượng phơi bày giá trị bên trong dưới thuộc tính .value:

import { ref } from 'vue'

const message = ref('ITviec xin chào')

console.log(message.value) // "ITviec xin chào"

message.value = 'Changed'

Trạng thái phản ứng được khai báo trong khối <script setup> của thành phần có thể được sử dụng trực tiếp trong mẫu. Đây là cách kết xuất văn bản động dựa trên giá trị của đối tượng counter và ref message, bằng cách sử dụng cú pháp:

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

<p>Count is: {{ counter.count }}</p>

Nội dung bên trong dấu ngoặc nhọn không chỉ giới hạn ở các định danh hoặc đường dẫn, bạn có thể sử dụng bất kỳ biểu thức JavaScript hợp lệ nào, ví dụ:

<h1>{{ message.split('').reverse().join('') }}</h1>

Bài tập: Hãy thử tạo một số trạng thái phản ứng và sử dụng nó để hiển thị nội dung văn bản động cho <h1>.

Đề bài:

<script setup>

import { ref } from 'vue'

// component logic

// declare some reactive state here.

</script>

<template>

  <h1>ITviec xin chào</h1>

</template>

Đáp án:

<script setup>

import { reactive, ref } from 'vue'

const counter = reactive({ count: 0 })

const message = ref('Hello World!')

</script>

<template>

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

  <p>Count is: {{ counter.count }}</p>

</template>

Attribute Bindings (Liên kết thuộc tính)

Trong Vue, dấu ngoặc nhọn chỉ được sử dụng cho nội suy văn bản (text interpolation). Để liên kết một thuộc tính với một giá trị động, bạn sử dụng chỉ thị v-bind, ví dụ:

<div v-bind:id="dynamicId"></div>

Vì v-bind được sử dụng rất thường xuyên nên nó có cú pháp viết tắt chuyên dụng là:

<div :id="dynamicId"></div>

Một chỉ thị là một thuộc tính đặc biệt bắt đầu bằng tiền tố v-. Chúng là một phần trong cú pháp mẫu của Vue. Tương tự như nội suy văn bản, các giá trị chỉ thị là các biểu thức JavaScript có quyền truy cập vào trạng thái của thành phần. 

Phần sau dấu hai chấm (:id) là “đối số” của chỉ thị. Ở đây, thuộc tính id của phần tử sẽ được đồng bộ với thuộc tính dynamicId từ trạng thái của thành phần.

Bài tập thực hành: Hãy thử thêm một liên kết lớp động class vào <h1>, sử dụng titleClass ref làm giá trị để văn bản sẽ chuyển sang màu đỏ.

Đề bài:

<script setup>

import { ref } from 'vue'

const titleClass = ref('title')

</script>

<template>

<h1>ITviec xin chào</h1> <!-- thêm dynamic class binding ở đây -->

</template>

<style>

.title {

  color: red;

}

</style>

Đáp án:

<script setup>

import { ref } from 'vue'

const titleClass = ref('title')

</script>

<template>

<h1 :class="titleClass">ITviec xin chào</h1>

</template>

<style>

.title {

  color: red;

}

</style>

Event Listener

Bạn có thể theo dõi các sự kiện DOM bằng cách sử dụng chỉ thị v-on:

<button v-on:click="increment">{{ count }}</button>

Do được sử dụng thường xuyên, v-on cũng có cú pháp viết tắt:

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

Trong mã code trên, increment tham chiếu đến một hàm được khai báo trong <script setup>:

<script setup>

import { ref } from 'vue'

const count = ref(0)

function increment() {

  // cập nhật trạng thái thành phần

  count.value++

}

</script>

Bên trong hàm, bạn có thể cập nhật trạng thái của thành phần bằng cách đột biến các ref. Ngoài ra, các trình xử lý sự kiện cũng có thể sử dụng các biểu thức nội tuyến và có thể đơn giản hóa các tác vụ thông thường bằng các bộ sửa đổi. 

Bài tập thực hành: Hãy thử thực hiện hàm increment và liên kết nó với nút bằng v-on.

Đề bài:

<script setup>

import { ref } from 'vue'

const count = ref(0)

</script>

<template>

  <!-- make this button work -->

  <button>Count is: {{ count }}</button>

</template>

Đáp án:

<script setup>

import { ref } from 'vue'

const count = ref(0)

function increment() {

  count.value++

}

</script>

<template>

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

</template>

Form Bindings (Ràng buộc biểu mẫu)

Sử dụng v-bind và v-on đồng thời, bạn có thể tạo liên kết hai chiều các phần tử nhập liệu của biểu mẫu:

<input :value="text" @input="onInput">

- - - - - 

function onInput(e) {

  // Trình xử lý sự kiện v-on nhận sự kiện DOM gốc

  // làm đối số.

  text.value = e.target.value;

}

Hãy thử nhập vào hộp nhập (input box), bạn sẽ thấy văn bản trong <p> cập nhật khi bạn gõ.

Để đơn giản hóa liên kết hai chiều, Vue cung cấp chỉ thị v-model: <input v-model=”text”>

v-model tự động đồng bộ hóa giá trị của <input> với trạng thái được ràng buộc. Do đó, bạn không cần phải sử dụng trình xử lý sự kiện cho việc đó nữa. v-model không chỉ hoạt động trên các ô nhập văn bản mà còn hoạt động trên các loại nhập liệu khác như hộp kiểm, radio buttons và sellects dropdown. 

Bài tập thực hành: Hãy thử cấu trúc lại mã để sử dụng v-model thay thế.

Đề bài:

<script setup>

import { ref } from 'vue'

const text = ref('')

function onInput(e) {

  text.value = e.target.value

}

</script>

<template>

  <input :value="text" @input="onInput" placeholder="Type here">

  <p>{{ text }}</p>

</template>

Đáp án:

<script setup>

import { ref } from 'vue'

const text = ref('')

</script>

<template>

  <input v-model="text" placeholder="Type here">

  <p>{{ text }}</p>

</template>

Conditional Rendering (Hiển thị có điều kiện)

Bạn có thể sử dụng chỉ thị v-if để kết xuất có điều kiện một phần tử:

<h1 v-if="hữu ích">Bài viết này rất hay!</h1>

<h1> này sẽ được kết xuất chỉ khi giá trị của awesome là đúng. Nếu awesome thay đổi thành một giá trị sai, nó sẽ bị xóa khỏi DOM.

Bạn cũng có thể sử dụng v-else và v-else-if để biểu thị các nhánh khác của điều kiện:

<h1 v-if="hữu ích">Bài viết này rất hay!</h1>

<h1 v-else>Đúng là như vậy 😀</h1>

Bài tập thực hành: Hãy thử thêm các chỉ thị v-if và v-else và triển khai phương thức toggle() để có thể sử dụng nút chuyển đổi giữa chúng.

Đề bài:

<script setup>

import { ref } from 'vue'

const awesome = ref(true)

function toggle() {

  // ...

}

</script>

<template>

<button @click="toggle">Toggle</button>

<h1 v-if="awesome">Bài viết này rất hay!</h1>

<h1 v-else>Đúng là như vậy 😀</h1>

</template>

Đáp án:

<script setup>

import { ref } from 'vue'

const awesome = ref(true)

function toggle() {

  awesome.value = !awesome.value

}

</script>

<template>

<button @click="toggle">Toggle</button>

<h1 v-if="awesome">Bài viết này rất hay!</h1>

<h1 v-else>Đúng là như vậy 😀</h1>

</template>

List Rendering (Hiển thị danh sách)

Bạn có thể sử dụng chỉ thị v-for để hiển thị danh sách các phần tử dựa trên một mảng nguồn:

<ul>

  <li v-for="todo in todos" :key="todo.id">

    {{ todo.text }}

  </li>

</ul>

Trong đoạn code trên, todo là một biến cục đại diện cho phần tử của mảng đang được lặp. Biến này chỉ có thể truy cập được bên trong hoặc trên phần tử v-for, tương tự như phạm vi của một hàm.

Lưu ý: Bạn chỉ cung cấp cho mỗi đối tượng todo một id duy nhất và ràng buộc nó làm thuộc tính key đặc biệt cho mỗi thẻ <li>. Thuộc tính key cho phép Vue di chuyển chính xác từng thẻ <li> để khớp với vị trí của đối tượng tương ứng trong mảng.

Có hai cách để cập nhật danh sách:

1. Gọi các phương thức thay đổi dữ liệu trên mảng nguồn: todos.value.push(newTodo)
2. Thay thế mảng bằng một mảng mới: todos.value = todos.value.filter(/* … */)

Bài tập thực hành: Bạn đang có một danh sách việc đơn giản, hãy thử triển khai logic cho các phương thức addTodo() và removeTodo() để nó hoạt động.

Đề bài:

<script setup>

import { ref } from 'vue'

// give each todo a unique id

let id = 0

const newTodo = ref('')

const todos = ref([

  { id: id++, text: 'Learn HTML' },

  { id: id++, text: 'Learn JavaScript' },

  { id: id++, text: 'Learn Vue' }

])

function addTodo() {

  // ...

  newTodo.value = ''

}

function removeTodo(todo) {

  // ...

}

</script>

<template>

<form @submit.prevent="addTodo">

<input v-model="newTodo" required placeholder="new todo">

<button>Add Todo</button>

</form>

<ul>

<li v-for="todo in todos" :key="todo.id">

      {{ todo.text }}

<button @click="removeTodo(todo)">X</button>

    </li>

  </ul>

</template>

Đáp án:

<script setup>

import { ref } from 'vue'

// give each todo a unique id

let id = 0

const newTodo = ref('')

const todos = ref([

  { id: id++, text: 'Learn HTML' },

  { id: id++, text: 'Learn JavaScript' },

  { id: id++, text: 'Learn Vue' }

])

function addTodo() {

  todos.value.push({ id: id++, text: newTodo.value })

  newTodo.value = ''

}

function removeTodo(todo) {

  todos.value = todos.value.filter((t) => t !== todo)

}

</script>

<template>

  <form @submit.prevent="addTodo">

    <input v-model="newTodo" required placeholder="new todo">

    <button>Add Todo</button>

  </form>

  <ul>

    <li v-for="todo in todos" :key="todo.id">

      {{ todo.text }}

      <button @click="removeTodo(todo)">X</button>

    </li>

  </ul>

</template>

Computed Property (Thuộc tính được tính toán)

Hãy tiếp tục xây dựng trên danh sách việc cần làm ở ví dụ bên trên. Giả sử, bạn đã thêm một chức năng chuyển đổi cho mỗi việc cần làm, bằng cách thêm thuộc tính done cho mỗi đối tượng việc cần làm và sử dụng v-model để liên kết nó với một hộp kiểm:

<li v-for="todo in todos">

<input type="checkbox" v-model="todo.done">

…

</li>

Cập nhật tiếp theo cho ví dụ bên trên là khả năng ẩn các việc cần làm đã hoàn thành với nút chuyển đổi trạng thái hideCompleted. Khi này, bạn có thể dùng computed() để tạo một ref tính toán .value dựa trên các nguồn dữ liệu phản ứng khác:

import { ref, computed } from 'vue'

const hideCompleted = ref(false)

const todos = ref([

  /* ... */

])

const filteredTodos = computed(() => {

  // return filtered todos based on

  // `todos.value` & `hideCompleted.value`

})

- - - - -

- <li v-for="todo in todos">

+ <li v-for="todo in filteredTodos">

Một thuộc tính tính toán theo dõi các trạng thái phản ứng khác được sử dụng trong phép tính của nó dưới dạng phụ thuộc. Nó lưu trữ kết quả và tự động cập nhật khi các phụ thuộc của nó thay đổi.

Bài tập thực hành: Hãy thêm thuộc tính tính toán filteredTodos và triển khai logic tính toán để chọn một việc cần làm khi ẩn các mục đã hoàn thành sẽ ngay lập tức ẩn nó.

Đề bài:

<script setup>

import { ref } from 'vue'

let id = 0

const newTodo = ref('')

const hideCompleted = ref(false)

const todos = ref([

  { id: id++, text: 'Learn HTML', done: true },

  { id: id++, text: 'Learn JavaScript', done: true },

  { id: id++, text: 'Learn Vue', done: false }

])

function addTodo() {

  todos.value.push({ id: id++, text: newTodo.value, done: false })

  newTodo.value = ''

}

function removeTodo(todo) {

  todos.value = todos.value.filter((t) => t !== todo)

}

</script>

<template>

  <form @submit.prevent="addTodo">

    <input v-model="newTodo" required placeholder="new todo">

    <button>Add Todo</button>

  </form>

  <ul>

    <li v-for="todo in todos" :key="todo.id">

<input type="checkbox" v-model="todo.done">

<span :class="{ done: todo.done }">{{ todo.text }}</span>

<button @click="removeTodo(todo)">X</button>

    </li>

  </ul>

  <button @click="hideCompleted = !hideCompleted">

    {{ hideCompleted ? 'Show all' : 'Hide completed' }}

  </button>

</template>

<style>

.done {

  text-decoration: line-through;

}

</style>

Đáp án:

<script setup>

import { ref, computed } from 'vue'

let id = 0

const newTodo = ref('')

const hideCompleted = ref(false)

const todos = ref([

  { id: id++, text: 'Learn HTML', done: true },

  { id: id++, text: 'Learn JavaScript', done: true },

  { id: id++, text: 'Learn Vue', done: false }

])

const filteredTodos = computed(() => {

  return hideCompleted.value

    ? todos.value.filter((t) => !t.done)

    : todos.value

})

function addTodo() {

  todos.value.push({ id: id++, text: newTodo.value, done: false })

  newTodo.value = ''

}

function removeTodo(todo) {

  todos.value = todos.value.filter((t) => t !== todo)

}

</script>

<template>

  <form @submit.prevent="addTodo">

    <input v-model="newTodo" required placeholder="new todo">

    <button>Add Todo</button>

  </form>

  <ul>

    <li v-for="todo in filteredTodos" :key="todo.id">

      <input type="checkbox" v-model="todo.done">

      <span :class="{ done: todo.done }">{{ todo.text }}</span>

      <button @click="removeTodo(todo)">X</button>

    </li>

  </ul>

  <button @click="hideCompleted = !hideCompleted">

    {{ hideCompleted ? 'Show all' : 'Hide completed' }}

  </button>

</template>

<style>

.done {

  text-decoration: line-through;

}

</style>

Lifecycle and Template Refs (Vòng đời và tham chiếu mẫu)

Cho đến nay, Vue đã xử lý tất cả cập nhật DOM, nhờ vào tính phản ứng và kết xuất khai báo. Tuy nhiên, vẫn sẽ có những trường hợp bạn cần phải thao tác thủ công với DOM. Bạn có thể yêu cầu một ref mẫu – tức là một tham chiếu đến phần tử trong mẫu bằng cách sử dụng thuộc tính đặc biệt ref:

<p ref="pElementRef">hello</p>

Để truy cập ref, bạn cần khai báo một ref có tên trùng khớp: const pElementRef = ref(null)

Lưu ý: ref được khởi tạo với giá trị null. Điều này là do phần tử chưa tồn tại khi <script setup> được thực thi. Ref mẫu chỉ có thể truy cập được sau khi thành phần được gắn kết.

Để chạy mã sau khi gắn kết, bạn có thể sử dụng hàm onMounted():

import { onMounted } from 'vue'

onMounted(() => {

  // component is now mounted.

})

Điều này được gọi là một hook vòng đời (lifecycle hook), nó cho phép  bạn đăng ký một hàm gọi lại để được gọi vào những thời điểm nhất định của vòng đời thành phần. Có các hook khác như onUpdated và onUnmounted. 

Bài tập thực hành: Hãy thêm một onMounted hook, truy cập <p> thông qua pElementRef.value và thực hiện một số thao tác DOM trực tiếp trên nó (ví dụ: thay đổi textContent).

Đề bài:

<script setup>

import { ref } from 'vue'

const pElementRef = ref(null)

</script>

<template>

  <p ref="pElementRef">Hello</p>

</template>

Đáp án:

<script setup>

import { ref, onMounted } from 'vue'

const pElementRef = ref(null)

onMounted(() => {

  pElementRef.value.textContent = 'mounted!'

})

</script>

<template>

  <p ref="pElementRef">Hello</p>

</template>

Watcher (Người theo dõi)

Thỉnh thoảng, bạn có thể cần thực hiện các phản ứng “side effects”. Ví dụ, ghi một số vào bảng điều khiển khi nó thay đổi bằng cách sử dụng watchers:

import { ref, watch } from 'vue'

const count = ref(0)

watch(count, (newCount) => {

  // yes, console.log() is a side effect

  console.log(`new count is: ${newCount}`)

})

watch() có thể trực tiếp theo dõi một ref và hàm gọi lại được kích hoạt bất cứ khi nào giá trị của count thay đổi. 

Một ví dụ khác về watcher là lấy dữ liệu mới khi ID thay đổi. Đoạn code mà bạn có đang lấy dữ liệu việc cần làm từ một API mô phỏng khi thành phần được gắn kết. Ngoài ra còn có một nút tăng ID việc cần làm cần được lấy. 

Bài tập thực hành: Hãy thử triển khai một watcher để lấy việc cần làm mới khi nút được nhấp.

Đề bài:

<script setup>

import { ref } from 'vue'

const todoId = ref(1)

const todoData = ref(null)

async function fetchData() {

  todoData.value = null

const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`

  )

  todoData.value = await res.json()

}

fetchData()

</script>

<template>

  <p>Todo id: {{ todoId }}</p>

  <button @click="todoId++" :disabled="!todoData">Fetch next todo</button>

  <p v-if="!todoData">Loading...</p>

  <pre v-else>{{ todoData }}</pre>

</template>

Đáp án:

<script setup>

import { ref, watch } from 'vue'

const todoId = ref(1)

const todoData = ref(null)

async function fetchData() {

  todoData.value = null

  const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`

  )

  todoData.value = await res.json()

}

fetchData()

watch(todoId, fetchData)

</script>

<template>

  <p>Todo id: {{ todoId }}</p>

  <button @click="todoId++" :disabled="!todoData">Fetch next todo</button>

  <p v-if="!todoData">Loading...</p>

  <pre v-else>{{ todoData }}</pre>

</template>

Component (Thành phần)

Từ những ví dụ trước, bạn mới chỉ làm việc với một thành phần duy nhất. Trong khi đó, các ứng dụng Vue thực tế thường được tạo ra với nhiều thành phần lồng vào nhau. 

Một thành phần cha có thể kết xuất một thành phần khác trong mẫu của nó dưới dạng thành phần con. Để sử dụng một thành phần con, trước tiên bạn cần nhập nó:

import ChildComp from './ChildComp.vue'

Sau đó, bạn có thể sử dụng thành phần trong mẫu như: <ChildComp />

Bài tập thực hành: Hãy thử nhập thành phần con và kết xuất nó trong mẫu.

Đề bài:

<script setup>

</script>

<template>

  <!-- render child component -->

</template>

Đáp án:

<script setup>

import ChildComp from './ChildComp.vue'

</script>

<template>

  <ChildComp />

</template>

Props (Đạo cụ)

Một thành phần con có thể nhận dữ liệu đầu vào từ thành phần cha thông qua props. Đầu tiên, nó cần khai báo các props mà nó chấp nhận:

<script setup>

const props = defineProps({

  msg: String

})

</script>

Lưu ý: defineProps() là một macro thời gian biên dịch và không cần phải được nhập. Sau khi được khai báo, prop msg có thể được sử dụng trong mẫu của thành phần con. Nó cũng có thể được truy cập trong JavaScript thông qua đối tượng được trả về của defineProps().

Thành phần cha có thể truyền prop cho thành phần con giống như các thuộc tính. Để truyền một giá trị động, bạn cũng có thể sử dụng cú pháp v-bind:

<ChildComp :msg="greeting" />

Bài tập thực hành: Hãy thử nó trong trình chỉnh sửa.

Đề bài:

<script setup>

import { ref } from 'vue'

import ChildComp from './ChildComp.vue'

const greeting = ref('Hello from parent')

</script>

<template>

  <ChildComp />

</template>

Đáp án:

<script setup>

import { ref } from 'vue'

import ChildComp from './ChildComp.vue'

const greeting = ref('Hello from parent')

</script>

<template>

  <ChildComp :msg="greeting" />

</template>

Emits

Ngoài việc nhận props, một thành phần con cũng có thể phát ra sự kiện tới thành phần cha:

<script setup>

// declare emitted events

const emit = defineEmits(['response'])

// emit with argument

emit('response', 'hello from child')

</script>

Đối số đầu tiên của emit() là tên sự kiện. Bất kỳ đối số bổ sung nào cũng được truyền cho trình Event Listener. 

Thành phần cha có thể lắng nghe các sự kiện được phát ra của con bằng v-on, có nghĩa là trình xử lý nhận đối số bổ sung từ cuộc gọi phát ra từ con và gán nó cho trạng thái cục bộ:

<ChildComp @response="(msg) => childMsg = msg" />

Bài tập thực hành: Hãy thử nó trong trình chỉnh sửa.

Đề bài:

<script setup>

import { ref } from 'vue'

import ChildComp from './ChildComp.vue'

const childMsg = ref('No child msg yet')

</script>

<template>

  <ChildComp />

  <p>{{ childMsg }}</p>

</template>

Đáp án:

<script setup>

import { ref } from 'vue'

import ChildComp from './ChildComp.vue'

const childMsg = ref('No child msg yet')

</script>

<template>

  <ChildComp @response="(msg) => childMsg = msg" />

  <p>{{ childMsg }}</p>

</template>

Slots

Ngoài việc truyền dữ liệu qua props, thành phần cha cũng có thể truyền các đoạn mã mẫu xuống cho con thông qua slots:

<ChildComp>

  This is some slot content!

</ChildComp>

Trong thành phần con, nó có thể kết xuất nội dung slot từ thành phần cha bằng cách sử dụng phần tử <slot> làm cửa khẩu:

<!-- in child template -->

<slot/>

Nội dung bên trong cửa khẩu <slot> sẽ được coi là nội dung “dự phòng”, nó sẽ được hiển thị nếu thành phần cha không truyền bất kỳ nội dung slot nào:

<slot>Fallback content</slot>

Bài tập thực hành: Hiện tại bạn không truyền bất kỳ nội dung slot nào cho <ChildComp> nên bạn sẽ thấy nội dung dự phòng. Hãy cung cấp một số nội dung slot cho thành phần con trong khi sử dụng trạng thái msg của thành phần cha.

Đề bài:

<script setup>

import { ref } from 'vue'

import ChildComp from './ChildComp.vue'

const msg = ref('from parent')

</script>

<template>

  <ChildComp></ChildComp>

</template>

Đáp án:

<script setup>

import { ref } from 'vue'

import ChildComp from './ChildComp.vue'

const msg = ref('from parent')

</script>

<template>

  <ChildComp>Message: {{ msg }}</ChildComp>

</template>

Các câu hỏi thường gặp về VueJS tutorial

Các ứng dụng của Vue.js là gì?

• Ứng dụng đơn trang (SPAs): Vue.js là một lựa chọn tuyệt vời để xây dựng các SPAs động và tương tác. Tính chất nhẹ và phản ứng nhanh của nó rất lý tưởng để xử lý của UI phức tạp.
• Giao diện người dùng (UI): Vue.js được sử dụng phổ biến để tạo ra các UI hấp dẫn và phản hồi nhanh. Cách tiếp cận dựa trên thành phần của nó giúp đơn giản hóa việc phát triển UI.
• Cập nhật thời gian thực: Vue.js hỗ trợ cập nhật dữ liệu thời gian thực, làm cho nó phù hợp với các ứng dụng yêu cầu đồng bộ hóa dữ liệu trực tiếp.
• Nguyên mẫu: Do tính đơn giản và linh hoạt, Vue.js hoàn hảo để tạo nguyên mẫu nhanh chóng của các ứng dụng web.
• Phát triển đa nền tảng: Cho dù bạn đang xây dựng ứng dụng web, di động hay máy tính để bàn, Vue.js có thể thích nghi với các nền tảng khác nhau một cách liền mạch.

Các khái niệm cốt lõi của Vue.js

Khi bạn đã hiểu cơ bản về cách thiết lập Vue.js, hãy tìm hiểu thêm một số khái niệm cần thiết để xây dựng các ứng dụng web tương tác:

• Templates: Vue.js sử dụng các templates giống HTML để xác định cấu trúc của giao diện người dùng. Các templates này bao gồm các biểu thức động được đánh giá dựa trên dữ liệu của bạn.
• Dữ liệu: Dữ liệu trong ứng dụng Vue.js thường là một đối tượng chứa các thuộc tính đại diện cho trạng thái của ứng dụng. Thay đổi đối với dữ liệu này sẽ tự động kích hoạt cập nhật giao diện người dùng.
• Reactivity: Vue.js sử dụng một hệ thống phản ứng theo dõi các thay đổi đối với dữ liệu. Bất cứ khi nào một thuộc tính dữ liệu được sửa đổi, Vue.js sẽ cập nhật các phần tương ứng của giao diện người dùng, đảm bảo trải nghiệm người dùng nhất quán và phản hồi nhanh.
• Computed Properties: Là các giá trị được suy ra dựa trên dữ liệu. Chúng lý tưởng cho các phép tính hoặc chuyển đổi mà bạn không muốn thực hiện trong templates chính.
• Phương thức: Phương thức là các hàm mà bạn có thể định nghĩa trong thành phần Vue.js để xử lý tương tác của người dùng hoặc thực hiện các nhiệm vụ cụ thể. Chúng là các phần logic có thể tái sử dụng có thể được gọi trong toàn bộ ứng dụng.
• Components: Là các khối xây dựng có thể tái sử dụng một phần cụ thể của giao diện người dùng và các chức năng của nó. Tăng hiệu quả tổ chức code, khả năng bảo trì và khả năng tái sử dụng.

Tổng kết VueJS tutorial

Như vậy trong bài viết VueJS tutorial này, ITviec đã hướng dẫn chi tiết cách sử dụng các tính năng đặc biệt hữu ích của VueJS – Framework nổi bật của JavaScript. Ngoài các bài tập thực hành trong bài viết, bạn có thể tìm hiểu nhiều bài tập từ các nguồn khác để sớm thành thạo những tính năng này nhé.