Hướng dẫn v-html vuejs
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 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ư <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ẻ 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 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ư <button v-bind:disabled="isButtonDisabled">Hòn Vọng Phubutton> Giá trị của 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:
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ư DirectiveDirective là các thuộc tính đặc biệt với prefix (tiếp đầu ngữ) <p v-if="seen">Thoắt ẩn thoắt hiệnp> Ở đây, directive 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 <a v-bind:href="url"> ... a> Ở đây Một ví dụ khác là directive <a v-on:click="doSomething"> ... a> Tham số ở đây là tên của sự kiện để lắng nghe ( 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 <form v-on:submit.prevent="onSubmit"> ... form> Sau này bạn sẽ gặp thêm các ví dụ khác về modifier cho
Cú pháp rút gọnPrefix
|