VueJS -渲染 (Rendering)

Xin chào các siêu sao Vue.js tương lai! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình đầy.exciting này vào thế giới của Vue.js rendering. Như một ai đó đã dạy lập trình trong nhiều năm, tôi có thể đảm bảo với bạn rằng việc thành thạo rendering giống như học cách vẽ tranh - đó là cách chúng ta làm sống động các bảng vẽ kỹ thuật số của mình! Hãy cuộn lên áo và nhảy vào!

Render có điều kiện (Conditional Rendering)

Hãy tưởng tượng bạn là một phù thủy, và bạn muốn làm cho các vật xuất hiện hoặc biến mất trên trang web của bạn chỉ với một cái挥手. Đó chính là điều mà render có điều kiện trong Vue.js cho phép bạn làm! Nó liên quan đến việc hiển thị hoặc ẩn các phần tử dựa trên các điều kiện nhất định.

Directive v-if

Directive v-if là tuyệt chiêu đầu tiên trong túi của chúng ta. Nó giống như một bảo vệ trong câu lạc bộ, quyết định ai được vào và ai không được vào.

<div id="app">
  <h1 v-if="isVisible">Now you see me!</h1>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isVisible: true
  }
})
</script>

Trong ví dụ này, phần tử <h1> chỉ xuất hiện nếu isVisible là true. Nếu nó là false, uff! Phần tử biến mất khỏi DOM hoàn toàn. Nó không chỉ bị ẩn - nó đã biến mất, như thể nó chưa từng tồn tại!

Directive v-else và v-else-if

Bây giờ, hãy thêm một chút魔法 vào chương trình của chúng ta với v-else và v-else-if:

<div id="app">
  <div v-if="temperature < 0">It's freezing!</div>
  <div v-else-if="temperature < 20">It's cool.</div>
  <div v-else>It's warm!</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    temperature: 25
  }
})
</script>

Ở đây, chúng ta đang tạo một bản tin thời tiết nhỏ. Dựa trên giá trị của temperature, các thông điệp khác nhau sẽ xuất hiện. Nó giống như có nhiều cửa陷阱 trên sân khấu - chỉ một cái có thể mở một lúc!

Directive v-show

Đôi khi, chúng ta muốn một chút bí mật. Đó là lúc v-show xuất hiện:

<div id="app">
  <h1 v-show="isVisible">I'm always here, just sometimes invisible!</h1>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isVisible: true
  }
})
</script>

Khác với v-if, v-show không loại bỏ phần tử khỏi DOM. Nó chỉ ẩn nó bằng CSS. Hãy tưởng tượng nó như던 một chiếc áo invisibility cloak lên phần tử của bạn thay vì làm nó biến mất hoàn toàn.

Render danh sách (List Rendering)

Bây giờ chúng ta đã thành thạo việc làm cho các vật xuất hiện và biến mất, hãy học cách tạo ra nhiều phần tử từ một mẫu duy nhất. Đây là lúc render danh sách phát huy tác dụng!

Directive v-for

Directive v-for giống như một máy sao chép ma thuật. Nó lấy một mẫu và sao chép nó cho mỗi mục trong một mảng hoặc đối tượng.

<div id="app">
  <ul>
    <li v-for="fruit in fruits">{{ fruit }}</li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    fruits: ['Apple', 'Banana', 'Cherry', 'Date']
  }
})
</script>

Trong ví dụ này, chúng ta đang tạo một danh sách mua sắm trái cây. Directive v-for đi qua mỗi quả trong mảng fruits và tạo một phần tử <li> mới cho nó. Nó giống như có một đội nhỏ của các精灵, mỗi精灵 viết tên của một quả trên một mảnh giấy mới!

Sử dụng v-for với một Đối tượng

v-for không chỉ hoạt động với mảng - nó cũng hoạt động với đối tượng!

<div id="app">
  <ul>
    <li v-for="(value, key) in person">{{ key }}: {{ value }}</li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    person: {
      name: 'Alice',
      age: 28,
      job: 'Developer'
    }
  }
})
</script>

Ở đây, chúng ta đang hiển thị thông tin về một người. Directive v-for đi qua mỗi thuộc tính của đối tượng person, tạo một phần tử <li> mới cho mỗi cặp key-value.

v-for với một Khoảng

Muốn tạo một số lượng phần tử cụ thể? v-for cũng có thể làm điều đó!

<div id="app">
  <span v-for="n in 5">{{ n }} </span>
</div>

Điều này sẽ hiển thị các số từ 1 đến 5. Nó giống như yêu cầu Vue đếm cho bạn!

Thuộc tính Key

Khi sử dụng v-for, rất quan trọng là phải cấp một key duy nhất cho mỗi phần tử được render. Điều này giúp Vue theo dõi các mục đã thay đổi, được thêm vào hoặc bị xóa.

<div id="app">
  <ul>
    <li v-for="fruit in fruits" :key="fruit.id">
      {{ fruit.name }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    fruits: [
      { id: 1, name: 'Apple' },
      { id: 2, name: 'Banana' },
      { id: 3, name: 'Cherry' }
    ]
  }
})
</script>

Hãy tưởng tượng key như một thẻ tên cho mỗi phần tử. Nó giúp Vue nhận dạng ai là ai khi danh sách thay đổi.

Bảng phương thức (Methods Table)

Dưới đây là bảng tóm tắt các phương thức chúng ta đã học:

Directive	Mục đích	Ví dụ
v-if	Render có điều kiện một phần tử	<div v-if="isVisible">Hello</div>
v-else	Cung cấp một lựa chọn khi v-if là false	<div v-else>Goodbye</div>
v-else-if	Cung cấp các điều kiện bổ sung	<div v-else-if="isSpecial">Special</div>
v-show	Chuyển đổi khả năng hiển thị của một phần tử	<div v-show="isVisible">Always in DOM</div>
v-for	Render một danh sách các mục	<li v-for="item in items">{{ item }}</li>

Và thế là xong, các học viên nhiệt tình của tôi! Chúng ta đã bao gồm các nguyên tắc cơ bản của render trong Vue.js. Nhớ rằng, thực hành làm nên完美, vì vậy đừng ngại thử nghiệm với các khái niệm này. Nhanh chóng, bạn sẽ render các thành phần Vue.js như một chuyên gia, tạo ra các trang web động và tương tác làm nổi bật người dùng của bạn. Tiếp tục lập trình, tiếp tục học hỏi, và quan trọng nhất, tiếp tục vui vẻ!

Credits: Image by storyset