- Chuyên mục khác :
- PHP và Laravel
- ·
- Database - Git - Linux
- ·
- Vuejs
- ·
- Lập Trình Web
- Getting Started
- Vue.js là gì?
- Các cách sử dụng Vue khác nhau
- Khám phá các lựa chọn thay thế Vue
- Xây dựng ứng dụng đầu tiên chỉ bằng JavaScript
- Xây dựng lại ứng dụng với Vue
- Basics & Core Concepts - DOM Interaction with Vue
- Module Introduction
- Connecting Vue App Instances
- Interpolation và Data Binding
- Binding Attributes với v-bind Directive
- Understanding methods in Vue Apps
- Working with Data inside of a Vue App
- Outputting Raw HTML Content with v-html
- Event Binding v-on
- Events & Methods
- Using the Native Event Object
- Event Modifiers
- Two-Way Binding
- Methods used for Data Binding
- Computed Properties
- Working with Watchers
- Methods vs Computed Properties vs Watchers
- v-bind and v-on Shorthands
- Dynamic Styling with Inline Styles
- CSS Classes Dynamically
- Rendering Conditional Content & Lists
- Conditions & Lists Starting-Setup
- v-if, v-else and v-else-if
- v-show
- Rendering Lists of Data
- Vue Behind The Scenes
- Understand Vue Reactivity
- Understanding Templates
- Working with Refs
- How Vue Updates the DOM
- Vue App Lifecycle
- Components
- Workflow with Vue3 CLI
- Vue Initial Steps & Structure
- Inspecting the Vue Project
- Vue extentions
- Vue Component
- Props
- $emit and Listening to Events
- Method of array object in JavaScript
- Provide + Inject
- Global vs Local Components
- Scoped Styles
- Slots
- Dynamic Components and Keeping Dynamic Components Alive
- Teleporting Elements
- Fragments
- The Vue Style Guide
Tại thời điểm này, tin tốt là chúng ta đã bao gồm hầu hết tất cả các tính năng và chức năng quan trọng liên quan đến việc xuất dữ liệu, cụ thể là Interpolation và Directive v-bind. Ngoài ra, kết hợp với kiến thức mà bạn có thể xuất ra dữ liệu hoặc kết quả của các lệnh gọi phương thức giống như chúng ta đã làm trong những bài trước đây. Bây giờ có thêm một tính mới đó là directive v-html, directive v-html cho phép bạn render một biến dữ liệu thành HTML thực sự trong template. Điều này có ý nghĩa là bạn có thể chèn HTML được lấy từ dữ liệu của bạn mà không cần escape (tránh mã hóa HTML).
Ví dụ, giả sử bạn có một biến dữ liệu goalContentB trong đối tượng data của bạn và muốn render nó thành HTML thực tế trong template của bạn:
data() {
return {
goalContentA: 'Finish the course and learn Vue!',
goalContentB: '<p>Finish the course and learn Vue!</p>',
}
},
Trong template của bạn, bạn có thể sử dụng v-html để render goalContentB:
<section id="user-goal">
<div v-html="goalContentB"></div>
</section>
Khi Vue.js thực thi template này, nội dung của goalContentB sẽ được hiển thị trong thẻ <div> và các thẻ HTML trong biến dữ liệu sẽ được hiển thị mà không cần escape.
Tuy nhiên, cần chú ý rằng việc sử dụng v-html có thể tạo ra lỗ hổng bảo mật nếu dữ liệu đầu vào không được kiểm tra kỹ lưỡng. Bạn nên chỉ sử dụng v-html cho dữ liệu mà bạn tin tưởng, hoặc dữ liệu mà bạn đã kiểm tra và xác thực trước đó để tránh các cuộc tấn công XSS (Cross-Site Scripting).
Bình luận (0)