Mẫu Vue
Mẫu trong Vue là cái mà chúng tôi gọi là phần HTML của ứng dụng Vue.
Thẻ <template> sau này sẽ được sử dụng trong các tệp *.vue để cấu trúc mã của chúng ta theo cách tốt hơn.
Có thể sử dụng mẫu làm tùy chọn cấu hình trong phiên bản Vue và đặt mã HTML vào bên trong.
Mẫu Vue
Hãy xem một ví dụ trong đó chúng tôi sử dụng 'mẫu' làm tùy chọn cấu hình. Đây là một ví dụ đơn giản trong đó chúng tôi vừa chuyển phần HTML vào tùy chọn cấu hình 'mẫu':
Ví dụ
Nội dung HTML từ bên trong <div id="app"> được chuyển sang tùy chọn cấu hình 'template', được gói gọn trong dấu ngoặc kép `...` . Chúng ta có thể viết nhiều dòng HTML bên trong một trích dẫn backtick.
<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
template:
`<h1>{{ message }}</h1>
<p>This is a second line of HTML code, inside backtick quotes</p>`,
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>
Hãy tự mình thử »Thành phần tệp đơn (SFC)
Như bạn có thể thấy trong ví dụ về mã ở trên, phần HTML của ứng dụng Vue của chúng tôi cũng có thể được tập hợp bên trong phiên bản Vue, nhưng điều này không giúp bạn có được cái nhìn tổng quan trong tệp HTML dễ dàng hơn.
Để có cái nhìn tổng quan hơn, giúp xử lý các dự án lớn hơn dễ dàng hơn và có được môi trường phát triển tốt hơn, giờ đây chúng tôi sẽ chuyển sang viết mã Vue trong tệp SFC hoặc *.vue.
Tất cả các tệp *.vue chỉ bao gồm ba phần:
<template>nơi chứa nội dung HTML.<script>cho mã Vue của chúng tôi.<style>nơi chúng tôi viết kiểu CSS.
Nhưng trước khi có thể sử dụng các tệp *.vue trong dự án của mình, chúng ta cần thiết lập máy tính của mình theo một cách khác. Các trang tiếp theo trong hướng dẫn này sẽ giải thích điều này.
