Hướng dẫn v-html vue 3 - v-html hình 3
|
Vue.js sử dụng một cú pháp template dựa trên HTML, cho phép bạn ràng buộc (bind) một cách minh bạch cấu trúc DOM được render với dữ liệu của đối tượng Vue bên dưới. Tất cả các template của Vue đều là code HTML hợp lệ và có thể được parse bởi các trình duyệt và parser chuẩn. Bên dưới, Vue biên dịch template thành các hàm render Virtual DOM (DOM ảo). Kết hợp với hệ thống reactivity (phản ứng), Vue có thể xác định một cách thông minh số lượng tối thiểu các component cần phải render lại, và áp dụng số lượng tối thiểu các hiệu chỉnh về DOM khi trạng thái của ứng dụng thay đổi. Nếu đã quen thuộc với các khái niệm của Virtual DOM và muốn trực tiếp sử dụng sức mạnh của JavaScript, bạn có thể viết thẳng các hàm render cùng với JSX (không bắt buộc), thay vì sử dụng template. Nội suyVăn bảnHình thức ràng buộc dữ liệu cơ bản nhất là nội suy văn bản (text interpolation) sử dụng cú pháp “mustache” (“ria mép” – hai dấu ngoặc nhọn): <span>Thông điệp: {{ msg }}span> Thẻ mustache sẽ được thay thế bằng giá trị của thuộc tính <span v-once>Thông điệp này sẽ không bao giờ thay đổi: {{ msg }}span>3 trên object data tương ứng, và cũng sẽ được cập nhật bất cứ khi nào thuộc tính này thay đổi. Bạn cũng có thể thực hiện các phép nội suy một lần (không cập nhật lại khi dữ liệu thay đổi) bằng cách sử dụng directive v-once, nhưng nhớ là làm như vậy sẽ ảnh hưởng đến tất cả các ràng buộc khác trên cùng một node: <span v-once>Thông điệp này sẽ không bao giờ thay đổi: {{ msg }}span> HTML thuần túyCú pháp mustache sẽ thông dịch dữ liệu ra thành văn bản thuần túy (plain text), nghĩa là các kí tự HTML đặc biệt như <span v-once>Thông điệp này sẽ không bao giờ thay đổi: {{ msg }}span>4 sẽ được mã hóa. Để xuất ra HTML thuần túy, bạn sẽ cần đến directive <span v-once>Thông điệp này sẽ không bao giờ thay đổi: {{ msg }}span>5. <p>Sử dụng cú pháp mustache: {{ rawHtml }}p> Sử dụng cú pháp mustache: {{ rawHtml }} Sử dụng directive v-html: Nội dung của thẻ <span v-once>Thông điệp này sẽ không bao giờ thay đổi: {{ msg }}span>6 sẽ được thay thế bằng giá trị của thuộc tính <span v-once>Thông điệp này sẽ không bao giờ thay đổi: {{ msg }}span>7 dưới dạng HTML thuần túy - tất cả các ràng buộc dữ liệu sẽ không được xử lí. Lưu ý rằng bạn không thể dùng <span v-once>Thông điệp này sẽ không bao giờ thay đổi: {{ msg }}span>5 để viết template partial, vì Vue không phải là một template engine dựa trên chuỗi. Thay vào đó, hãy dùng component cho mục đích biên soạn và tái sử dụng UI. Render HTML động trên trang web của bạn có thể dẫn đến các lỗ hổng XSS, vì thế chỉ dùng <span v-once>Thông điệp này sẽ không bao giờ thay đổi: {{ msg }}span>5 với các nội dung đáng tin tưởng, đừng bao giờ dùng với các nội dung được người dùng cung cấp.đừng bao giờ dùng với các nội dung được người dùng cung cấp. Các thuộc tính HTMLCú pháp mustache không dùng được bên trong các thuộc tính HTML. Thay vào đó, bạn hãy dùng directive v-bind: <div v-bind:id="dynamicId">div> Directive này cũng hoạt động với các thuộc tính boolean như <p>Sử dụng cú pháp mustache: {{ rawHtml }}p>0 và <p>Sử dụng cú pháp mustache: {{ rawHtml }}p>1 - các thuộc tính này sẽ được bỏ đi khi biểu thức được tính toán trả về kết quả sai (falsy): <button v-bind:disabled="isButtonDisabled">Hòn Vọng Phubutton> Giá trị của <p>Sử dụng cú pháp mustache: {{ rawHtml }}p>2: {{ isButtonDisabled }} Sử dụng các biểu thức JavaScriptCho đến nay chúng ta chỉ mới bind vào các khóa thuộc tính dơn giản trong template. Tuy nhiên, thật ra Vue hỗ trợ sức mạnh toàn diện của các biểu thức JavaScript bên trong toàn bộ các ràng buộc dữ liệu (data binding): {{ number + 1 }} Các biểu thức này sẽ được tính toán dưới dạng JavaScript trong scope của đối tượng Vue hiện hành. Một hạn chế ở đây là mỗi ràng buộc chỉ có thể chứa một biểu thức đơn lẻ, vì thế các trường hợp sau sẽ không hoạt động:một biểu thức đơn lẻ, vì thế các trường hợp sau sẽ không hoạt động:
Các biểu thức template hoạt động trong môi trường cách li (sandboxed) và chỉ có quyền truy xuất đến một danh sách các hàm / đối tượng cấp toàn cục như <p>Sử dụng cú pháp mustache: {{ rawHtml }}p>3 và <p>Sử dụng cú pháp mustache: {{ rawHtml }}p>4. Bạn không nên thử truy xuất đến các giá trị cấp toàn cục khác do người dùng tự định nghĩa bên trong các biểu thức template. DirectiveDirective là các thuộc tính đặc biệt với prefix (tiếp đầu ngữ) <p>Sử dụng cú pháp mustache: {{ rawHtml }}p>5. Giá trị của thuộc tính directive phải là một biểu thức JavaScript đơn lẻ (ngoại trừ <p>Sử dụng cú pháp mustache: {{ rawHtml }}p>6 mà chúng ta sẽ đề cập sau). Nhiệm vụ của một directive là áp dụng các hiệu ứng phụ vào DOM khi giá trị của biểu thức thay đổi. Hãy xem lại ví dụ chúng ta đã thấy trong phần giới thiệu:một biểu thức JavaScript đơn lẻ (ngoại trừ <p>Sử dụng cú pháp mustache: {{ rawHtml }}p>6 mà chúng ta sẽ đề cập sau). Nhiệm vụ của một directive là áp dụng các hiệu ứng phụ vào DOM khi giá trị của biểu thức thay đổi. Hãy xem lại ví dụ chúng ta đã thấy trong phần giới thiệu: <p v-if="seen">Thoắt ẩn thoắt hiệnp> Ở đây, directive <p>Sử dụng cú pháp mustache: {{ rawHtml }}p>7 sẽ thêm vào hoặc bỏ đi phần tử <p>Sử dụng cú pháp mustache: {{ rawHtml }}p>8 dựa trên tính đúng sai của giá trị của biểu thức <p>Sử dụng cú pháp mustache: {{ rawHtml }}p>9. Tham sốMột số directive có thể nhận vào một tham số, đánh dấu bằng một dấu hai chấm theo sau tên của directive. Ví dụ, directive <div v-bind:id="dynamicId">div>0 được dùng để cập nhật động một thuộc tính HTML: <a v-bind:href="url"> ... a> Ở đây <div v-bind:id="dynamicId">div>1 là tham số hướng dẫn directive <div v-bind:id="dynamicId">div>0 ràng buộc thuộc tính <div v-bind:id="dynamicId">div>1 vào giá trị của biểu thức <div v-bind:id="dynamicId">div>4. Một ví dụ khác là directive <div v-bind:id="dynamicId">div>5. Directive này lắng nghe các sự kiện DOM: <a v-on:click="doSomething"> ... a> Tham số ở đây là tên của sự kiện để lắng nghe ( <div v-bind:id="dynamicId">div>6). Chúng ta cũng sẽ bàn sâu về quản lí sự kiện sau. ModifierModifier là các hậu tố (postfix) đặc biệt được đánh dấu bằng một dấu chấm, chỉ rõ rằng một directive phải được ràng buộc theo một cách đặc biệt nào đó. Ví dụ, modifier <div v-bind:id="dynamicId">div>7 hướng dẫn directive <div v-bind:id="dynamicId">div>5 gọi <div v-bind:id="dynamicId">div>9 khi sự kiện được kích hoạt: <span v-once>Thông điệp này sẽ không bao giờ thay đổi: {{ msg }}span>0 Sau này bạn sẽ gặp thêm các ví dụ khác về modifier cho <div v-bind:id="dynamicId">div>5 và <button v-bind:disabled="isButtonDisabled">Hòn Vọng Phubutton>1, khi chúng ta bàn đến các tính năng này. Cú pháp rút gọnPrefix <p>Sử dụng cú pháp mustache: {{ rawHtml }}p>5 đóng vai trò gợi ý trực quan để nhận ra các thuộc tính riêng của Vue trong template. Điều này có ích khi bạn sử dụng Vue vào các dự án có sẵn, tuy nhiên đối với các directive được dùng thường xuyên thì <p>Sử dụng cú pháp mustache: {{ rawHtml }}p>5 có thể trông hơi rườm rà. Thêm vào đó <p>Sử dụng cú pháp mustache: {{ rawHtml }}p>5 trở nên kém quan trọng hơn khi bạn xây dựng các ứng dụng một trang, trong đó Vue quản lí toàn bộ các template. Vì thế Vue cung cấp dạng rút gọn (shorthand) đặc biệt cho hai trong số các directive được dùng nhiều nhất, <div v-bind:id="dynamicId">div>0 và <div v-bind:id="dynamicId">div>5: 0<span v-once>Thông điệp này sẽ không bao giờ thay đổi: {{ msg }}span>1 5<span v-once>Thông điệp này sẽ không bao giờ thay đổi: {{ msg }}span>2 Tuy nhìn có vẻ khác với HTML thông thường, <button v-bind:disabled="isButtonDisabled">Hòn Vọng Phubutton>9 và {{ number + 1 }}0 là các kí tự hợp lệ cho các thuộc tính HTML, và các trình duyệt hỗ trợ Vue đều có thể parse được hai kí tự này. Thêm vào đó, các directive không xuất hiện trong code HTML được render ra. Cú pháp rút gọn là hoàn toàn không bắt buộc, nhưng có lẽ là bạn sẽ thích dùng sau khi biết thêm về cách dùng của chúng. |
