VueJS - Template: Hướng dẫn dành cho người mới bắt đầu

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 thú vị vào thế giới các mẫu template của Vue.js. Là một người đã dạy khoa học máy tính trong nhiều năm, tôi có thể đảm bảo với bạn rằng Vue.js là một trong những khung công tác thân thiện nhất với người mới bắt đầu. Vậy, hãy thắt dây an toàn và cùng lặn sâu vào nhé!

VueJS - Template

Mẫu template là gì trong Vue.js?

Trước khi bắt đầu mã hóa, hãy hiểu mẫu template là gì trong Vue.js. Hãy tưởng tượng nó như xương sống của trang web của bạn - nó là nơi bạn xác định cấu trúc HTML của mình và thêm một chút phép màu Vue.js để làm cho nó trở nên động và tương tác.

Cấu trúc cơ bản

Dưới đây là một mẫu template Vue.js đơn giản:

<div id="app">
{{ message }}
</div>

Trong ví dụ này, {{ message }} là một cú pháp đặc biệt trong Vue.js gọi là "interpolation". Nó giống như một placeholder mà Vue.js sẽ thay thế bằng dữ liệu thực tế.

Hãy xem nó hoạt động:

<div id="app">
{{ message }}
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
})
</script>

Khi bạn chạy đoạn mã này, bạn sẽ thấy "Hello, Vue!" hiển thị trên trang của bạn. Thật kỳ diệu phải không? {{ message }} trong mẫu template được thay thế bằng giá trị của message trong dữ liệu của instance Vue.

Đạo lệnh (Directives): Hướng dẫn đặc biệt của Vue

Bây giờ, hãy nói về các đạo lệnh. Đây là những thuộc tính đặc biệt bắt đầu bằng v- và cung cấp hướng dẫn cho Vue.js về cách hành xử. Chúng giống như những phù thủy nhỏ cast phép trên HTML của bạn!

v-bind: Thuộc tính động

Đạo lệnh v-bind được sử dụng để liên kết thuộc tính động với một biểu thức. Nó phổ biến đến mức có một viết tắt cho nó: :.

<div id="app">
<a v-bind:href="url">Nhấn vào tôi!</a>
<!-- Viết tắt -->
<a :href="url">Nhấn vào tôi!</a>
</div>

<script>
new Vue({
el: '#app',
data: {
url: 'https://vuejs.org/'
}
})
</script>

Trong ví dụ này, thuộc tính href của thẻ <a> được đặt động theo giá trị của url trong dữ liệu của instance Vue.

v-if, v-else-if, v-else:渲染 điều kiện

Những đạo lệnh này cho phép bạn render các phần tử dựa trên sự đúng/d sai của biểu thức.

<div id="app">
<p v-if="seen">Bây giờ bạn thấy tôi</p>
<p v-else>Bây giờ bạn không thấy tôi</p>
</div>

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

Thử thay đổi seen thành false và xem phép thuật xảy ra!

v-for: Render danh sách

Đạo lệnh v-for được sử dụng để render một danh sách các mục dựa trên một mảng.

<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>

<script>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Học JavaScript' },
{ text: 'Học Vue' },
{ text: 'Xây dựng điều tuyệt vời' }
]
}
})
</script>

Điều này sẽ render một danh sách các công việc cần làm. Mỗi phần tử <li> được tạo ra cho mỗi mục trong mảng todos.

Xử lý sự kiện với v-on

Đạo lệnh v-on được sử dụng để lắng nghe các sự kiện DOM và chạy một đoạn JavaScript khi chúng được kích hoạt. Nó rất hữu ích đến mức có một viết tắt cho nó: @.

<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Đảo ngược tin nhắn</button>
<!-- Viết tắt -->
<button @click="reverseMessage">Đảo ngược tin nhắn</button>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>

Nhấn vào nút và xem tin nhắn của bạn lộn ngược!

Ràng buộc hai chiều với v-model

Đạo lệnh v-model tạo ra một ràng buộc hai chiều trên các phần tử đầu vào form hoặc các thành phần.

<div id="app">
<input v-model="message">
<p>Tin nhắn là: {{ message }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>

Gõ vào trường đầu vào và xem tin nhắn cập nhật theo thời gian thực. Đó như phép thuật, nhưng tốt hơn - đó là Vue.js!

Thuộc tính tính toán và theo dõi

Thuộc tính tính toán

Thuộc tính tính toán là những thuộc tính có sức mạnh siêu nhiên. Chúng là những thuộc tính được tính toán dựa trên các thuộc tính khác.

<div id="app">
<p>Tin nhắn gốc: "{{ message }}"</p>
<p>Tin nhắn đảo ngược: "{{ reversedMessage }}"</p>
</div>

<script>
new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
</script>

Thuộc tính reversedMessage sẽ luôn là đảo ngược của message, và nó sẽ tự động cập nhật khi message thay đổi!

Theo dõi

Theo dõi là những người bảo vệ vigilante cho dữ liệu của bạn. Chúng theo dõi các thay đổi trong dữ liệu và thực hiện các hành động khi những thay đổi đó xảy ra.

<div id="app">
<p>
Hỏi một câu hỏi có/có:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
question: '',
answer: 'Câu hỏi thường chứa dấu hỏi. ;-)'
},
watch: {
question: function (newQuestion, oldQuestion) {
this.answer = 'Đợi bạn dừng gõ...'
this.debouncedGetAnswer()
}
},
created: function () {
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
},
methods: {
getAnswer: function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Câu hỏi thường chứa dấu hỏi. ;-)'
return
}
this.answer = 'Đang suy nghĩ...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Lỗi! Không thể kết nối với API. ' + error
})
}
}
})
</script>

Trong ví dụ này, chúng tôi đang theo dõi thuộc tính question. Khi nó thay đổi, chúng tôi cập nhật answer và gọi một phương thức để lấy câu trả lời mới từ một API.

Bảng phương thức

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

Phương thức	Mô tả	Ví dụ
`v-bind`	Liên kết thuộc tính động	`<a v-bind:href="url">`
`v-if`	Render điều kiện	`<p v-if="seen">Now you see me</p>`
`v-for`	Render danh sách	`<li v-for="item in items">{{ item }}</li>`
`v-on`	Xử lý sự kiện	`<button v-on:click="doSomething">`
`v-model`	Ràng buộc hai chiều	`<input v-model="message">`

Và thế là bạn đã bước những bước đầu tiên vào thế giới kỳ diệu của các mẫu template 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. Trước khi bạn nhận ra, bạn sẽ xây dựng các ứng dụng Vue.js tuyệt vời. Chúc bạn may mắn với việc编码!

Credits: Image by storyset