Giới thiệu Vue
Vue là một khung JavaScript . Nó có thể được thêm vào trang HTML bằng thẻ <script>.
Vue mở rộng các thuộc tính HTML bằng Chỉ thị và liên kết dữ liệu với HTML bằng Biểu thức .
Vue là một khung JavaScript
Vue là một framework JavaScript front-end được viết bằng JavaScript.
Các framework tương tự với Vue là React và Angular, nhưng Vue nhẹ hơn và dễ bắt đầu hơn.
Vue được phân phối dưới dạng tệp JavaScript và có thể được thêm vào trang web bằng thẻ script:
<script
src="https://unpkg.com/vue@3/dist/vue.global.js">
</script>
Tại sao nên học Vue?
- Nó rất đơn giản và dễ sử dụng.
- Nó có thể xử lý cả các dự án đơn giản và phức tạp.
- Sự phổ biến ngày càng tăng của nó và sự hỗ trợ của cộng đồng nguồn mở.
- Trong JavaScript thông thường, chúng ta cần viết CÁCH HTML và JavaScript được kết nối, nhưng trong Vue, chúng ta chỉ cần đảm bảo rằng có kết nối và để Vue lo phần còn lại.
- Nó cho phép quá trình phát triển hiệu quả hơn với cú pháp dựa trên mẫu, liên kết dữ liệu hai chiều và quản lý trạng thái tập trung.
Nếu một số điểm trong số này khó hiểu, đừng lo lắng, bạn sẽ hiểu ở cuối phần hướng dẫn.
API tùy chọn
Có hai cách khác nhau để viết mã trong Vue: API tùy chọn và API thành phần.
Các khái niệm cơ bản giống nhau đối với cả API tùy chọn và API sáng tác, vì vậy sau khi tìm hiểu một khái niệm này, bạn có thể dễ dàng chuyển sang khái niệm kia.
API Tùy chọn là những gì được viết trong hướng dẫn này vì nó được coi là thân thiện với người mới bắt đầu hơn, với cấu trúc dễ nhận biết hơn.
Hãy xem trang này ở cuối hướng dẫn này để tìm hiểu thêm về sự khác biệt giữa API tùy chọn và API sáng tác.
Trang đầu tiên của tôi
Bây giờ chúng ta sẽ tìm hiểu cách tạo trang web Vue đầu tiên của mình theo 5 bước cơ bản:
- Bắt đầu với một tệp HTML cơ bản.
- Thêm thẻ
<div>cóid="app"để Vue kết nối. - Cho trình duyệt biết cách xử lý mã Vue bằng cách thêm thẻ
<script>có liên kết đến Vue. - Thêm thẻ
<script>có phiên bản Vue bên trong. - Kết nối phiên bản Vue với thẻ
<div id="app">.
Các bước này được mô tả chi tiết bên dưới, với mã đầy đủ trong ví dụ 'Hãy tự mình thử' ở cuối.
Bước 1: Trang HTML
Bắt đầu với một trang HTML đơn giản:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My first Vue page</title>
</head>
<body>
</body>
</html>
Bước 2: Thêm <div>
Vue cần một phần tử HTML trên trang của bạn để kết nối.
Đặt thẻ <div> bên trong thẻ <body> và đặt id cho nó:
<body>
<div id="app"></div>
</body>
Bước 3: Thêm liên kết vào Vue
Để giúp trình duyệt diễn giải mã Vue của chúng tôi, hãy thêm thẻ <script> này:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
Bước 4: Thêm phiên bản Vue
Bây giờ chúng ta cần thêm mã Vue của mình.
Đây được gọi là phiên bản Vue và có thể chứa dữ liệu, phương thức cũng như những thứ khác, nhưng bây giờ nó chỉ chứa một thông báo.
Ở dòng cuối cùng trong thẻ <script> phiên bản Vue của chúng tôi được kết nối với thẻ <div id="app"> :
<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>
Bước 5: Hiển thị “tin nhắn” bằng Text Interpolation
Cuối cùng, chúng ta có thể sử dụng phép nội suy văn bản , cú pháp Vue với dấu ngoặc nhọn đôi {{ }} làm phần giữ chỗ cho dữ liệu.
<div id="app"> {{ message }} </div>
Trình duyệt sẽ trao đổi {{ message }} với văn bản được lưu trữ trong thuộc tính 'message' bên trong phiên bản Vue.
Đây là trang Vue đầu tiên của chúng tôi:
Ví dụ: Trang Vue đầu tiên của tôi!
Kiểm tra mã này bằng nút 'Tự mình thử' bên dưới.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My first Vue page</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>
</body>
</html>
Hãy tự mình thử »Nội suy văn bản
Nội suy văn bản là khi văn bản được lấy từ phiên bản Vue để hiển thị trên trang web.
Trình duyệt nhận được trang có mã này bên trong:
<div id="app"> {{ message }} </div>
Sau đó, trình duyệt tìm thấy văn bản bên trong thuộc tính 'message' của phiên bản Vue và dịch mã Vue sang dạng này:
<div id="app">Hello World!</div>
JavaScript trong nội suy văn bản
Các biểu thức JavaScript đơn giản cũng có thể được viết bên trong dấu ngoặc nhọn đôi {{ }} .
Ví dụ
Sử dụng cú pháp JavaScript để thêm số ngẫu nhiên vào tin nhắn bên trong phần tử div:
<div id="app">
{{ message }} <br>
{{'Random number: ' + Math.ceil(Math.random()*6) }}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>
Hãy tự mình thử »Bắt đầu
Hướng dẫn này sẽ dạy cho bạn những điều cơ bản về Vue.
Bạn cần có kinh nghiệm cơ bản về HTML , CSS và JavaScript để làm theo hướng dẫn này.
Nhấp vào nút 'Tiếp theo' để tiếp tục với hướng dẫn này.
