Giới thiệu
Vue.js là một framework JavaScript tiến bộ được sử dụng để xây dựng giao diện người dùng. Vue 2 ra mắt năm 2016 và trở thành một trong những lựa chọn phổ biến nhờ cú pháp đơn giản, dễ học và dễ tích hợp.
1. Cài đặt Vue 2
Cách 1: Dùng CDN (dễ thử nghiệm nhanh)
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
📌 Giải thích: Đây là cách nhanh nhất để thử Vue 2 mà không cần cài đặt gì. Chỉ cần thêm đoạn <script> này vào file HTML là bạn đã có thể dùng Vue.
Cách 2: Dùng Vue CLI (dự án lớn)
npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve
📌 Giải thích: Vue CLI là công cụ dòng lệnh giúp bạn tạo và quản lý các project Vue chuyên nghiệp. Nó sẽ tạo sẵn cấu trúc dự án, Webpack, Babel,...
2. Khởi tạo Vue Instance
<div id="app"> <h1>{{ message }}</h1>
</div> <script>
new Vue({ el: '#app', data: { message: 'Hello Vue 2!' }
})
</script>
📌 Giải thích:
el: '#app': Vue sẽ điều khiển vùngDOMcó id là app.data: Khai báo dữ liệu mà bạn có thể hiển thị trên giao diện.{{ message }}: Dùng để hiển thị dữ liệumessagetừdata.
3. Data Binding – Ràng buộc dữ liệu
Ràng buộc thuộc tính
<img v-bind:src="imageUrl">
📌 Giải thích:
v-binddùng để ràng buộc thuộc tính HTML với dữ liệu trong Vue.- Ví dụ:
imageUrl = "logo.png"thì hình ảnh sẽ hiển thị từ đường dẫn đó. - Viết tắt:
:src="imageUrl"
4. Event Handling – Xử lý sự kiện
<button v-on:click="count++">Bạn đã click {{ count }} lần</button> <script>
new Vue({ el: '#app', data: { count: 0 }
})
</script>
📌 Giải thích:
v-on:clicklắng nghe sự kiện click.count++tăng biến count mỗi khi click.{{ count }}để hiển thị số lần đã click.- Viết tắt:
@click="count++"
5. v-if / v-else / v-show – Hiển thị có điều kiện
<p v-if="isVisible">Hiển thị</p>
<p v-else>Ẩn</p>
📌 Giải thích:
- Nếu isVisible = true thì dòng "Hiển thị" sẽ hiện.
- Nếu isVisible = false thì dòng "Ẩn" sẽ hiện.
Khác biệt:
v-ifsẽ gỡ phần tử khỏi DOM khi điều kiện sai.v-showchỉ ẩn bằngCSS (display: none)– nhanh hơn khi thay đổi thường xuyên.
6. v-for – Lặp qua danh sách
<ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
📌 Giải thích:
v-for="item in items"dùng để lặp qua mảng items.:key="item.id"giúp Vue theo dõi từng phần tử tốt hơn (tối ưu hiệu năng).{{ item.name }}hiển thị tên từng mục trong danh sách.
7. Computed vs Methods
computed: { reversedMessage() { return this.message.split('').reverse().join(''); }
}
📌 Giải thích:
- computed là hàm tính toán dựa trên dữ liệu.
- Chỉ tính lại khi dữ liệu thay đổi (giống như cache).
- methods thì luôn chạy lại mỗi lần gọi.
8. Component – Thành phần tái sử dụng
Vue.component('hello', { template: '<h2>Component</h2>'
});
📌 Giải thích:
- Component giúp chia nhỏ ứng dụng thành các phần có thể tái sử dụng (giống như module).
- Vue.component() khai báo một component toàn cục tên là hello.
Component toàn cục (Global Component)
<!DOCTYPE html>
<html>
<head> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body> <div id="app"> <hello-world></hello-world> <hello-world></hello-world> </div> <script> // Khai báo component toàn cục Vue.component('hello-world', { template: `<div> <h2>Chào mừng đến với Vue Component!</h2> </div>` }); // Khởi tạo Vue Instance new Vue({ el: '#app' }); </script>
</body>
</html>
📌 Giải thích:
Vue.component('hello-world', {...}): Tạo một component tên làhello-worldcó thể dùng ở bất kỳ đâu trong ứng dụng.<hello-world></hello-world>: Sử dụng component như một thẻ HTML.- Dù bạn dùng bao nhiêu lần, nội dung bên trong vẫn được tái sử dụng.
Component cục bộ (Local Component)
<div id="app"> <my-card></my-card>
</div> <script> // Tạo component const MyCard = { template: `<div class="card"> <h3>Đây là một component cục bộ</h3> </div>` }; // Khởi tạo Vue với component cục bộ new Vue({ el: '#app', components: { 'my-card': MyCard } });
</script>
📌 Giải thích:
Componentnày chỉ có thể dùng bên trong Vue instance hiện tại.- Dùng
components: { 'my-card': MyCard }để đăng ký cục bộ.
Component với Props – Truyền dữ liệu vào component
<div id="app"> <user-card name="Văn A" age="20"></user-card> <user-card name="Văn B" age="21"></user-card>
</div> <script> Vue.component('user-card', { props: ['name', 'age'], template: `<div class="user"> <p>Tên: {{ name }}</p> <p>Tuổi: {{ age }}</p> </div>` }); new Vue({ el: '#app' });
</script>
📌 Giải thích:
propscho phép truyền dữ liệu từ bên ngoài vàocomponent.- Khi dùng
<user-card name="..." age="...">, component sẽ nhận và hiển thị giá trị tương ứng.
Component có sự kiện (emit event)
<div id="app"> <counter @increase="handleIncrease"></counter> <p>Số lần nhấn: {{ total }}</p>
</div> <script> Vue.component('counter', { data() { return { count: 0 } }, template: `<button @click="increase">Nhấn {{ count }}</button>`, methods: { increase() { this.count++ this.$emit('increase') // gửi sự kiện ra ngoài } } }); new Vue({ el: '#app', data: { total: 0 }, methods: { handleIncrease() { this.total++ } } });
</script>
📌 Giải thích:
- Component
countercó nút bấm, mỗi lầnclicksẽ tăngcountvà phát ra sự kiệnincrease. - Bên ngoài,
@increase="handleIncrease"sẽ lắng nghe sự kiện đó và tăng biếntotal.