Cơ bản về Vue.js - Hướng dẫn lập trình

Giới thiệu về Vue.js

Vue.js là một framework tiến bộ được sử dụng rộng rãi trong phát triển ứng dụng web hiện đại. Framework này cung cấp khả năng ràng buộc dữ liệu hai chiều và quản lý trạng thái hiệu quả.

1. Cài đặt môi trường phát triển

Lý do sử dụng framework

Khi các ứng dụng web ngày càng phức tạp, việc xử lý logic nghiệp vụ phía client trở nên khó khăn hơn. Các framework như Angular, React và Vue giúp tổ chức mã nguồn tốt hơn.

Tại sao chọn Vue.js

  • Framework dạng tiến bộ (progressive)
  • Ràng buộc dữ liệu hai chiều
  • Không cần thao tác DOM thủ công
  • Dễ tích hợp vào dự án hiện có
  • Cấu hình đơn giản với vue-cli
  • Hỗ trợ phát triển theo mô-đun
  • Cộng đồng hỗ trợ mạnh mẽ

Quy trình cài đặt

Trước tiên cần cài đặt Node.js từ trang chính thức. Sau đó thực hiện các bước sau:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm install --global vue-cli

Tạo dự án mới

$ vue init webpack project-name

Sau khi tạo dự án, thực hiện các bước cấu hình cơ bản và cài đặt thư viện phụ thuộc:

$ cd project-name
$ npm install
$ npm run dev

2. Cấu trúc dự án Vue

Tệp tin khởi động chính

Tệp src/main.js đóng vai trò là điểm khởi đầu của ứng dụng:

import Vue from 'vue'
import RootComponent from './RootComponent'

Vue.config.productionTip = false

new Vue({
  el: '#root',
  components: { RootComponent },
  template: '<RootComponent/>'
})

Cú pháp mẫu (template)

  • Biến động: {{ biến }}
  • Nội dung HTML: v-html="biến"

Ví dụ minh họa:

<template>
  <div id="container">
    {{ sampleText }}
    <div v-html="sampleHtml"></div>
  </div>
</template>

<script>
export default {
  name: 'Container',
  data(){
    return { 
      sampleText: "Mẫu văn bản",
      sampleHtml: "<h2>Nội dung HTML</h2>"
    }
  }
}
</script>

Cấu trúc thành phần

<template>
    <!-- Giao diện người dùng -->
</template>

<script>
    // Logic xử lý
</script>

<style>
    /* Định dạng giao diện */
</style>

Cấu trúc thư mục

  • build/ - Cấu hình xây dựng dự án
  • config/ - Cấu hình cho các môi trường khác nhau
  • src/ - Mã nguồn ứng dụng
  • assets/ - Tài nguyên tĩnh
  • components/ - Thư mục thành phần
  • static/ - Tập tin tĩnh
  • package.json - Quản lý thư viện phụ thuộc

3. Các chỉ thị cơ bản

  • Hiển thị nội dung: {{ }}
  • Thuộc tính HTML: v-bind: hoặc :
  • Biểu thức JavaScript: {{ biểu_thức }}
  • Điều kiện hiển thị: v-if, v-else, v-show
  • Duyệt danh sách: v-for
  • Xử lý sự kiện: v-on: hoặc @

So sánh v-if và v-show: v-if thêm/xóa phần tử khỏi DOM, trong khi v-show chỉ thay đổi thuộc tính display CSS.

Ví dụ thực tế:

<template>
  <div id="example-container">
    {{ message }}
    <div v-html="contentHtml"></div>
    <div :class="currentClass" :data-value="valueId">Nội dung</div>
    {{ calculationResult }}
    <div v-if="isVisible">
      Nội dung điều kiện
    </div>
    <div v-show="isDisplayed">Hiển thị theo điều kiện</div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ index + 1 }} - {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ExampleContainer',
  data(){
    return { 
      message: "Chào mừng đến với Vue",
      contentHtml: "<p>HTML nội dung</p>",
      currentClass: "highlight",
      valueId: 42,
      isVisible: true,
      isDisplayed: false,
      items: ['một', 'hai', 'ba']
    }
  }
}
</script>

Phát hiện thay đổi mảng

Các phương thức sau sẽ kích hoạt cập nhật giao diện:

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

Ví dụ xử lý mảng:

<template>
  <div id="list-container">
    <ul>
      <li v-for="element in elements" :key="element.id">
        {{ element.name }}
      </li>
    </ul>
    <button @click="addElement">Thêm phần tử</button>
  </div>
</template>

<script>
export default {
  name: 'ListContainer',
  data(){
    return { 
      elements: [
        { id: 1, name: "phần tử 1" },
        { id: 2, name: "phần tử 2" }
      ]
    }
  },
  methods: {
    addElement(){
      const newElement = {
        id: this.elements.length + 1,
        name: "phần tử mới"
      };
      this.elements.push(newElement);
    }
  }
}
</script>

Liên kết lớp và kiểu dáng

  • Liên kết lớp: :class="{ tên_lớp: điều_kiện }"
  • Liên kết kiểu dáng: :style="đối_tượng_kiểu_dáng"

Ví dụ:

<template>
  <div id="styling-example">
    <p :class="{ active: isActive }">Nội dung văn bản</p>
    <p :class="[classOne, classTwo]">Kết hợp nhiều lớp</p>
    <p :style="styleObject">Áp dụng kiểu dáng</p>
  </div>
</template>

<script>
export default {
  name: 'StylingExample',
  data(){
    return { 
      isActive: true,
      classOne: 'first-class',
      classTwo: 'second-class',
      styleObject: { 
        color: 'blue', 
        fontSize: "24px"
      }
    }
  }
}
</script>

Thuộc tính tính toán và quan sát

Đối với các phép tính phức tạp, nên sử dụng thuộc tính tính toán để tối ưu hiệu suất:

<template>
  <div id="computed-example">
    <p>Nội dung gốc: {{ originalText }}</p>
    <p>Nội dung đảo ngược: {{ reversedText }}</p>
  </div>
</template>

<script>
export default {
  name: 'ComputedExample',
  data(){
    return { 
      originalText: "xin chào thế giới"
    }
  },
  computed: {
    reversedText(){
      return this.originalText.split('').reverse().join('');
    }
  }
}
</script>

4. Xử lý sự kiện trong Vue

  • Nghe sự kiện: @click="count++"
  • Gọi hàm xử lý: @click="handleClick"
  • Truyền tham số: @click="handleWithParam('giá_trị')"

Trình sửa đổi sự kiện

  • .stop - Ngăn chặn bong bóng sự kiện
  • .prevent - Ngăn hành vi mặc định
  • .capture - Bắt sự kiện theo chế độ capture
  • .self - Chỉ xử lý khi đích là phần tử hiện tại
  • .once - Chỉ kích hoạt một lần

Trình sửa đổi phím

  • .enter, .tab, .delete
  • .esc, .space
  • .up, .down, .left, .right

Ví dụ xử lý sự kiện:

<template>
  <div id="event-example">
    <button @click="incrementCounter">Tăng giá trị: {{ counter }}</button>
    <button @click="processEvent" :title="tooltipText">Xử lý sự kiện</button>
    <input @keyup.enter="handleEnterKey"/>
  </div>
</template>

<script>
export default {
  name: 'EventExample',
  data(){
    return { 
      counter: 0,
      tooltipText: "Di chuột vào đây"
    }
  },
  methods: {
    incrementCounter(){
      this.counter++;
    },
    processEvent(event){
      console.log("Sự kiện đã được xử lý");
    },
    handleEnterKey(){
      console.log("Phím Enter đã được nhấn");
    }
  }
}
</script>

5. Ràng buộc dữ liệu hai chiều

Sử dụng v-model để tạo liên kết hai chiều giữa input và dữ liệu:

  • Trường văn bản: <input v-model="textValue"/>
  • Hộp chọn: Sử dụng cùng một biến cho nhiều tùy chọn
  • Dropdown: <select v-model="selectedOption"></select>

Trình sửa đổi ràng buộc

  • .lazy - Cập nhật sau khi mất tiêu điểm
  • .number - Chuyển đổi sang số
  • .trim - Loại bỏ khoảng trắng đầu cuối

Ví dụ:

<template>
  <div id="binding-example">
    <input v-model.trim="userInput" type="text" placeholder="Nhập văn bản"/>
    <p>Giá trị đã nhập: {{ userInput }}</p>
  </div>
</template>

<script>
export default {
  name: 'BindingExample',
  data(){
    return { 
      userInput: ""
    }
  }
}
</script>

Thẻ: vuejs JavaScript frontend web-development framework

Đăng vào ngày 9 tháng 7 lúc 20:23

Thẻ Phổ Biến

©2026 Thành phố Cuồng loạn