Vue. js sử dụng các cú pháp mẫu trong HTML để liên kết và kết xuất DOM thành các thẻ HTML và tất cả các vue. js mẫu này đều phải tuân theo các tiêu chuẩn thẻ HTML
Trong phần này mình cũng sẽ không trình bày nhiều về khái niệm mà sẽ chủ yếu nó về thực hành. Vì việc dịch các thuật ngữ này ra tiếng việt rất khó giải thích
1, Nội suy
-Intercalation là một thuật ngữ trong Vue. js. Đây là quá trình thêm văn bản, nội dung, thuộc tính,. to the HTML tags by Vue. js
Chữ
- liên kết một đoạn văn bản vào trong Để thẻ HTML thì bạn sử dụng cú pháp sau
{{ avariable }}
Trong đó,
{{ slogan.toUpperCase[] }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
0 là tên thuộc tính mà chúng ta đã khai báo trong vue instanceChú thích. Khi dữ liệu liên kết dưới định dạng này thì dữ liệu được liên kết sẽ luôn ở dạng thô [tức là văn bản, giống như văn bản hàm trong jquery hay innerText trong javascript] mà không được thêm HTML
VD. use vue. js để liên kết dữ liệu dưới dạng dữ liệu thô vào thẻ HTML
{{ slogan }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
Chạy mã
-Và trong cặp dấu
{{ slogan.toUpperCase[] }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
1 thì bạn có thể sử dụng các hàm của javascriptVD. Liên kết dữ liệu ra thẻ HTML và đồng thời chuyển đổi dữ liệu đó thành tiếng Hoa
{{ slogan.toUpperCase[] }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
Chạy mã
HTML thô
-Nếu bạn muốn hiển thị dữ liệu dưới dạng nối thêm cả mã HTML [như hàm html trong jquery hoặc innerHTML trong javascript] thì bạn có thể sử dụng cú pháp sau
in which
2 là các thẻ trong HTML{{ slogan.toUpperCase[] }}
3 là dữ liệu mà bạn muốn liên kết với thẻ đó [dữ liệu này thường được khai báo trong phạm vi dữ liệu của vue. js]{{ slogan.toUpperCase[] }}
VD. Liên kết dữ liệu vào thẻ h1 đồng thời nối các thẻ HTML vào thẻ h1
________số 8
Chạy mã
Tuy nhiên, bạn phải hết sức cẩn thận khi thực hiện cách này, vì nó có thể dẫn đến lỗi XSS
Thuộc tính
- Để có thể thêm các thuộc tính vào thẻ HTML bằng dữ liệu trong vue. js, you use the after cú pháp
in which
4 là tên của thuộc tính mà bạn muốn thực hiện ràng buộc{{ slogan.toUpperCase[] }}
3 is data that you set setting in vue. js{{ slogan.toUpperCase[] }}
VD. Ràng buộc tên lớp vào thẻ h1
{{ slogan.toUpperCase[] }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
2Chạy mã
VD. Liên kết kiểu CSS vào trong thẻ h1
{{ slogan.toUpperCase[] }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
3Chạy mã
Sử dụng Biểu thức JavaScript
-Như mình đã nói ở trên là chúng ta có thể sử dụng mã javascript trong cặp dấu
{{ slogan.toUpperCase[] }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
1, nhưng các bạn cần chú ý là chúng ta chỉ có thể sử dụng các phạm vi đã được khai báo mặc định trong JavaScript thôi còn các biến . which user 'definition' thì sẽ không thể sử dụng đượcVD. Sử dụng các thuật toán và câu lệnh điều kiện trong cặp dấu hiệu
{{ slogan.toUpperCase[] }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
1
{{ slogan.toUpperCase[] }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
6Chạy mã
2, Chỉ thị
-Directives trong vue. js là các thuộc tính được thiết lập bằng tiền tố
{{ slogan.toUpperCase[] }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
8. Giá trị của các thuộc tính này thường là các biểu thức javascript duy nhất, chỉ trừ
{{ slogan.toUpperCase[] }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
9 [khái niệm này mình sẽ giải thích ở các bài sau]VD.
{{ slogan.toUpperCase[] }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
9Chạy mã
- Ví dụ này các bạn chỉ cần xem thôi. D, phần sau mình sẽ có 1 bài nói về câu lệnh điều kiện và vòng lặp trong vue. js
Tranh luận
- Trong một số chỉ thị nó sẽ cho phép các bạn truyền tham số vào. Để truyền tham số vào các chỉ thị này, bạn chỉ cần dừng giữa các chỉ thị và tham số bằng dấu
0VD. Như thuộc tính v-bind ở phần 1
{{ slogan }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
0Chạy mã
-Hoặc bạn cũng có thể thêm các sự kiện trên DOM bằng các chỉ thị v-on trong Vue. js
VD. Add event nhấn vào nút
{{ slogan }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
1Chạy mã
sửa đổi
-Directives format này cho phép bạn định nghĩa một hành động cụ thể khi thực hiện các chỉ thị đó. Các công cụ sửa đổi này được ngăn cách với các chỉ thị do dấu
1VD. Thêm sự kiện gửi cho biểu mẫu và kèm theo đó là preventDefault
{{ slogan }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
2Chạy mã
-Ở trong ví dụ trên, mình đã bổ sung điều kiện gửi cho biểu mẫu và đồng thời xác định công cụ sửa đổi
2 cho biểu mẫu đó. Công cụ sửa đổi này sau khi được kết xuất thì nó sẽ thành
33, Bộ lọc
- Như mình đã nói ở trên thì trong cặp dấu
{{ slogan.toUpperCase[] }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
1 thì chúng ta có thể sử dụng các biểu thức trong JavaScript, dựa vào điều này thì chúng ta cũng có thể sử dụng bộ lọc tVD
{{ slogan }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
3-Bên cạnh điều này thì vue. js còn hỗ trợ bộ lọc trong các lệnh v-bind và cũng sử dụng cú pháp tương tự
VD
{{ slogan }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
4Filter in v-bind only support from vue version. js from version 2. 1. 0. Nhưng với các biến đổi phức tạp hơn thì nên sử dụng tính toán
VD. Mình sẽ viết một bộ lọc để chuyển chữ thường thành chữ hoa trong Vue. js
{{ slogan }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
5Chạy mã
-Và nếu bạn muốn sử dụng nhiều bộ lọc cùng một lúc thì bạn cứ ngăn cách nó với nhau bằng dấu
5VD.
{{ slogan }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
6-Hoặc bạn cũng có thể truyền thêm các tham số vào trong bộ lọc, nhưng tham số truyền vào tiếp theo sẽ được tính từ tham số thứ 2
VD
{{ slogan }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
7Chạy mã
3, Viết tắt
-Tiên tố
{{ slogan.toUpperCase[] }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
8 phục vụ như một quan điểm trực tiếp để đánh dấu sử dụng vue. js so với các framework khác, ví dụ như angular sử dụng
7. Chính vì thế nên vue. js cũng cung cấp cho chúng ta 2 cách viết ngắn gọn hơn với 2 dạng chỉ thị là
8 và
9 như sauliên kết v
{{ slogan }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
8v-on
{{ slogan }}
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
9-Tuy rằng, kiểu viết rút gọn như thế này nó hơi khác so với bình thường nhưng nhìn chung thì
var app = new Vue[{
el: '#app',
data: {
slogan: 'Chào mừng bạn đã đến với website: toidicode.com'
},
}];
0 và
0 đều là các ký tự hợp lệ khi đặt tên cho thuộc tính trong HTML và nó cũng được hỗ trợ bởi trình duyệt. And when vue. js render it thì nó sẽ không hiển thị hai ký tự này bên ngoài trình duyệt4, Lời kết
-Bài này chúng ta kết thúc ở đây thôi nhé, có thể nội dung câu chữ nó sẽ hơi lủng củng một chút, By một số thuật ngữ tiếng anh rất khó dịch ra tiếng việt cho dễ hiểu
Đăng ký nhận tin
Chúng tôi chỉ gửi tối đa 2 lần trong 1 tháng. Tuyên bố không spam mail
Đăng ký
Vue. js
Bài trước Bài sau
4 bình luận 591 lượt thích
Vũ Thành Tài
Về tác giảCách học tốt nhất là chia sẻ
Xem tất cả bài đăngBài Viết Mới
Những tính năng mới trong PHP 8. 1
1 năm trước 7 Nhận xét
Bài 39. Bộ đệm trong Laravel 8
2 năm trước 1 Nhận xét
PHP Swoole là gì?
2 năm trước 0 Nhận xét
Cài đặt SSL trên local sử dụng mkcert
2 năm trước 4 Nhận xét
4 Bình luận
rất cảm ơn b nhé
mình đang theo dõi bài viết
vũ đức hồng
5 năm trước
Đáp lại
Xin chào, cảm ơn bạn nhé
Vũ Thành Tài
5 năm trước
Hay quá, mong ad ra nhiều loạt bài về Vue, cảm ơn ad
vũ
5 năm trước
Đáp lại
Ok bạn, mình cần phải hoàn thiện series ECMAScript trước thì mọi người mới có thể học được Vue. js trước à