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() }}

0 là tên thuộc tính mà chúng ta đã khai báo trong vue instance

Chú 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 }}

Chạy mã

-Và trong cặp dấu

    
{{ slogan.toUpperCase() }}

1 thì bạn có thể sử dụng các hàm của javascript

VD. 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() }}

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

• 
      
  {{ slogan.toUpperCase() }}
  
  
  

  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)

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

• 
      
  {{ slogan.toUpperCase() }}
  
  
  

  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

VD. Ràng buộc tên lớp vào thẻ h1

    
{{ slogan.toUpperCase() }}

2

Chạy mã

VD. Liên kết kiểu CSS vào trong thẻ h1

    
{{ slogan.toUpperCase() }}

3

Chạ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() }}

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 được

VD. 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() }}

1

    
{{ slogan.toUpperCase() }}

6

Chạ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() }}

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() }}

9 (khái niệm này mình sẽ giải thích ở các bài sau)

VD.  

    
{{ slogan.toUpperCase() }}

9

Chạ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

0

VD. Như thuộc tính v-bind ở phần 1

    
{{ slogan }}

0

Chạ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 }}

1

Chạ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

1

VD. Thêm sự kiện gửi cho biểu mẫu và kèm theo đó là preventDefault

    
{{ slogan }}

2

Chạ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

3

3, Bộ lọc

- Như mình đã nói ở trên thì trong cặp dấu 

    
{{ slogan.toUpperCase() }}

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 t

VD

    
{{ slogan }}

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 }}

4

Filter 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 }}

5

Chạ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

5

VD.  

    
{{ slogan }}

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 }}

7

Chạy mã

3, Viết tắt

-Tiên tố

    
{{ slogan.toUpperCase() }}

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ư sau

liên kết v

    
{{ slogan }}

8

v-on

    
{{ slogan }}

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ì

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ệt

4, 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 đăng

Bà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 à