Bạn đang xem: v for trong vuejs
Tóm Tắt
1. Giới thiệu
Hello mọi người!
Chắc hẳn, nếu các bạn đang sử dụng ngôn từ Javascript thì Vue.js là một framework chẳng thể không nghe qua. Đặc biệt khi các bạn từng sử dụng qua ReactJS thì việc tiếp cận với Vue.js lại càng đơn giản hơn. Vậy với kiến thức của một người mới tiếp cận với Vue.js, mình xin phép chia sẻ đôi chút về Vue.js.
Vue. js là gì ?
Vue.js là một framework Javascript được tạo bởi Evan You, giúp tất cả chúng ta xây dựng giao diện người dùng cũng như xây dựng Single Page Application gần gũi với người dùng, chúng xây dựng từ các thư viện, cách triển khai component, các tính năng đặc thù của nó như SFC (Single File Component). Phiên bản ổn định tiên tiến nhất bây giờ của Vue.js là 2.6.10. Nào tất cả chúng ta cùng đi vào những kiến thức cơ bản nhất của Vue.
2. Kiến thức cơ bản
2.1. Vue Instance, vòng đời một instance
- Trước khi đi vào những kiến thức nền móng khi học Vue.js thì tất cả chúng ta cần nắm vững được instance là gì.
Mỗi Instance hay là một đối tượng người dùng trong Vue. js. Để khởi tạo một đối tượng người dùng trong Vue. js ta sử dụng cú pháp :
var vm = new Vue({
})
Chẳng hạn vừa đủ để khởi tạo đối tượng người tiêu dùng Vue gồm tài liệu và DOM vào HTML :
var vm = new Vue({
el: ' # dùng thử ',
data: {
message: " Đây là ví dụ khởi tạo một đối tượng người dùng trong Vue "
}
})
Ở trên Vue đã thực hiện với selector có id là dùng thử cùng với việc khởi tạo một dữ liệu message để có thể truy xuất & render chúng.
Một vận dụng trong Vue. js sẽ gồm có một node gốc. Tương đương việc chia node của HTML, từ node gốc này tổng thể tất cả chúng ta sẽ chia thành những node component con để tái sử dụng được những tùy chọn, tài liệu trong đối tượng người tiêu dùng vừa khởi tạo này. Về component cơ bản sẽ được lý giải phía dưới .
Vòng đời của một Instance
Vòng đời của một Instance cơ bản gồm 4 quy trình chính :
- Khởi tạo (creating)
- Bền chặt DOM (mounting)
- Update DOM khi có dữ liệu biến đổi (updating)
- Hủy instance (destroying)
Mỗi quy trình sẽ có những function hooks tương ứng. Hook bước này nghe có lẽ rằng khó hiểu với người mới, những bạn cứ hiểu thuận tiện nó là một function để móc vào những thời gian rõ ràng, triển khai những việc làm rõ ràng ngay tại thời gian đó. Chẳng hạn mong ước lấy tài liệu từ serve để in ra màn hình hiển thị thì những bạn sẽ viết hook ở quy trình mounting. Với hook function là mounted tức là khi đã bền chặt DOM và tài liệu đã setup hoàn thành xong. Tất cả tất cả chúng ta hoàn toàn có thể chèn tài liệu mà mình mong đợi vào trang ở trong quy trình này. Còn khi những bạn viết ở quy trình trước đây, nó sẽ không triển khai được vì khi đấy chưa được bền chặt DOM xong nên việc sử dụng DOM là chẳng thể .
Tạm thời chưa hiểu thì mọi người hoàn toàn có thể vừa làm và cảm nghĩ nhé =)))
Dưới này mình có viết một bài riêng về vòng đời của một instance, mọi người vào backlink này đọc qua 
Vòng đời của một Vue Instance
2.2 Cú pháp template
Cú pháp là điều rất trọng yếu khi học một ngôn từ hay framework nào đó. Với Vue.js tất cả chúng ta cũng có những cú pháp giúp hiển thị, xuất dữ liệu ra trang người dùng.
Để hiển thị một đoạn dễ dàng lên màn hình. Thông qua việc dùng hai ngoặc nhọn để render dữ liệu ra màn hình :
<ρ> {{ message }} ρ>
Kết phù hợp với việc khởi tạo đối tượng ở trên, tất cả chúng ta sẽ có được câu Đây là chẳng hạn khởi tạo một đối tượng trong Vue được hiển thị ra màn hình. Vậy nếu tất cả chúng ta mong muốn render ra một vài thẻ HTML thì phải làm thế nào. Chẳng hạn mong muốn chữ Vue được nằm trong thẻ v-
Rõ ràng và cụ thể :
<ρ v-html="message"> ρ>
Không những thế để sử dụng các tính chất của HTML, tất cả chúng ta chẳng thể sử dụng cú pháp ngoặc nhọn để hiển thị bên trong thẻ html mà tất cả chúng ta sử dụng v-bind:parameter="value". Với parameter bước này là tham số được gắn với value
Chẳng hạn:
tất cả chúng ta có thể truyền vào một function return về giá trị rõ ràng cho tính chất đó.
Modifier: Modifier là một bổ nghĩa, bổ sung cho một directive để răng buộc nó. Chẳng hạn dưới đây để rằng buộc mỗi khi ấn submit cho một form & không mong muốn mang form này sang trang khác.
Không những thế còn một số cách tóm gọn directive : v-bind:href thành :href, v-on:click thành @click.
2.3. Methods
Như ở trên tất cả chúng ta có tìm tòi về việc viết template để render ra như vậy nào. Một số đoạn mình có nhắc tới method. Vậy method setup như vậy nào ta cùng tìm tòi nhé.
Method là phần giải quyết khi tất cả chúng ta mong muốn làm việc gì đấy, chẳng hạn như gửi dữ liệu cập nhật khi submit ví dụ. Việc tính toán lại dữ liệu có sẵn cũng có thể mang vào method để trả về dữ liệu nhưng điều này hiếm khi dùng (xem phần computed & watchers ở dưới). Để khởi tạo một đối tượng cùng với method, tất cả chúng ta làm như sau:
var vm = new Vue({
el: ' # dùng thử ',
data: {
message: " Đây là ví dụ khởi tạo một đối tượng người dùng trong Vue ",
number:
},
methods: {
updateNumber (newNumber) {
this.number = newNumber
}
}
})
Method trên trả về cho tất cả chúng ta số mới mỗi khi gọi updateNumber() tương ứng với tham số khac nhau. Việc này sẽ thực thi mỗi lần gọi tới method.
2.3 Tính chất computed & watchers, so sánh với methods
Computed properties:
Trước hết mọi người hãy đọc đoạn code sau :
var vm = new Vue({
el: ' # dùng thử ',
data: {
message: " Đây là ví dụ khởi tạo một đối tượng người dùng trong Vue ",
number:
},
methods: {
x2Number () {
return this.number = this.number * 2
}
}
computed: {
x2Number () {
return this.number = this.number * 2
}
}
})
Ở trên methods, computed đều có function x2Number với kết quả trả về đều như nhau. Vậy tất cả chúng ta nên sử dụng cái nào trong trường hợp này?
Mọi người chắc cũng như mình khi mới khởi đầu học & trong đầu luôn khúc mắc vì sao trời chào đời method lại còn computed để làm gì =))) Nhưng khi đọc đến lần thứ hai trong ebook chính của Vue thì mình mới nhận biết rằng, computed đều không có tham số truyền vào cũng như khi gọi computed thì sẽ không có thêm cặp dấu ngoặc tròn x2Number như method x2Number(), này là một sự độc đáo lớn nhất khi sử dụng.
Chính vì thế nếu các bạn lên trang chính của Vue để đọc ebook sẽ thấy ghi là computed properties. Theo mình hiểu đấy cũng khởi đầu từ cách gọi computed để render dữ liệu.
Ở 2 trường hợp này mình ưu tiên dùng computed hơn. Vì computed có khả năng Cache lại dữ liệu khi gọi function này lần trước hết để những lần kế đến nó sẽ lấy ra dữ liệu ở trong cache đã được giải quyết qua computed. Trái lại method thì không.
Cuối cùng Computed thường thực hiện với dữ liệu có trong instance để giảm bớt việc tính toán & lấy dữ liệu ở trong cache.
Watchers:
Okay, & kế đến đấy là watchers. Nghe tên gọi tất cả chúng ta cũng có thể hiểu được watcher là gì rồi đúng không. Dịch qua tiếng Việt là người theo dõi 
)) hơi chuối nhỉ nhưng chuẩn xác nó thực hiện công việc như một người theo dõi.
Những function trong watcher triển khai việc theo dõi biến hóa của đặc thù của một đối tượng người dùng. Tất cả tất cả chúng ta sẽ khai báo như methods và computed. Bước này mình mong ước giám sát cả đối tượng người dùng khi bất kỳ thành phần nào biến hóa nên mình khai báo thêm đặc thù deep : true .
watch: {
toDos: {
deep: true,
handler (newValue) {
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(newValue))
}
}
}
Kết luận : cả methods, computed properties, watchers đều có thể khai báo function bên trong nhưng tùy theo mục đích sử dụng rõ ràng mà tất cả chúng ta sẽ vận dụng chúng một cách tối ưu nhất.
2.4 Binding, Render, Giải quyết buổi lễ.
Binding:
Khi đọc phần cú pháp template ở trên chắc hẳn mọi người đều chứng kiến một cú pháp directive v-bind & nó chính là rằng buộc rõ ràng dữ liệu vào một phần tử website. Tất cả chúng ta có thể binding class, binding style bằng cách dùng v-bind:class hoặc v-bind:style. Dưới đây mình chỉ nói về binding class, với style cũng tương tự như
Chẳng hạn binding một classs :
div>
với tài liệu
data: {
hasError: true
}
tổng thể tất cả chúng ta sẽ thu được hiệu quả là :
="static error">
div>
Render:
Để render dữ liệu theo điều kiện kèm theo, toàn bộ tất cả chúng ta có 2 cách :
data: {
show: true
}
- Sử dụng v-if:
Div này hiển thịdiv>
- Sử dụng v-show
Div này hiển thịdiv>
Hai cách trên đều giúp hiển thị dữ liệu ra màn hình nhưng điểm khác nhau là khi sử dụng v-if, Vue sẽ không render nếu điều kiện sai. Còn v-show vẫn sẽ render ra bất cứ đúng hay sai & sẽ cho phép hiển thị hay không thông qua tính chất display trong CSS .
Tất cả tất cả chúng ta cũng có v-else-if, v-else để triển khai nếu mong ước sử dụng để so sánh với nhiều giá trị khác nhau
Div này hiển thịdiv>
Div 1 này hiển thịdiv>
Div 2 này hiển thịdiv>
Render ra một danh mục
Khi render ra một danh mục từ mảng hoặc object tất cả chúng ta cũng có directive v-for. chứng năng hoàn toàn giống với vòng lặp ở trong các ngôn từ lập trình.
var vm = new Vue({
el: ' # dùng thử ',
data: {
items: [
{ content: ' Hôm nay thứ 6 ' },
{ content: ' Sắp được nghỉ rồi ' },
{ content: ' Về nhà đi thôi ' }
]
}
})
-
{{ item.content}}
li>
ul>
Form Input Binding:
Thao tác với form là một phần rất trọng điểm trong việc lập trình website. và với Vue. js tổng thể tất cả chúng ta có những rằng buộc với form nào. Cùng đi ngang qua một vài thứ cơ bản nhé .
- Tất cả chúng ta sử dụng directive v-model để rằng buộc dữ liệu với form.
Chẳng hạn để nhận tài liệu từ ô input và update vào đặc thù data của vue instance :
var vm = new Vue({
el: ' # dùng thử ',
data: {
thư điện tử: ' '
}
})
- Không những thế có thể sử dụng modifiers cho v-model :
v-model.trim sẽ xóa bỏ & return về chuỗi được khoảng trắng ở 2 đầu khi nhập thư điện tử vào ô input này
Giải quyết buổi lễ:
Tương tác với HTML, xử lý buổi lễ đã quá quen thuộc với người lập trình javascript. Ở Vue. js đã tận dụng và kiến thiết xây dựng lên một mạng lưới hệ thống xử lý khá tiện nghi, Chẳng hạn thuận tiện với buổi lễ bấm chuột :
Source: https://final-blade.com
Category : Kiến thức Internet
