Thay v html
Đến từ Vue2. Tôi nghĩ rằng điều này vẫn hoạt động. <div id="widget2"> <h2><b>I am Widget2b> - Managed by VueJSh2> div>3, bạn có thể sử dụng thẻ Vue đặc biệt <div id="widget2"> <h2><b>I am Widget2b> - Managed by VueJSh2> div>4. Show
Tôi đã chơi một chút với điều này và có vẻ như Vue không kết xuất lại toàn bộ danh sách khi sử dụng hoặc nếu bạn sử dụng một thành phần nhưng với v-html. Đây là câu đố để so sánh https. //jsfiddle. mạng/cxataxcf/ Khóa thực sự không cần thiết ở đây vì danh sách không được sắp xếp lại, vì vậy vấn đề của bạn không liên quan đến. key mà đúng hơn là với v-html. Đây là những gì các bác nói về v-html Nội dung được chèn dưới dạng HTML đơn giản - các ràng buộc dữ liệu bị bỏ qua. Lưu ý rằng bạn không thể sử dụng v-html để soạn các phần mẫu, bởi vì Vue không phải là một công cụ tạo khuôn mẫu dựa trên chuỗi. Thay vào đó, các thành phần được ưu tiên làm đơn vị cơ bản để tái sử dụng và thành phần giao diện người dùng Vì vậy, tôi đoán đây là nơi vấn đề nằm Có thể đáng để nêu vấn đề trên trang github của Vue để xem liệu đây có phải là hành vi mong đợi đối với v-html hay không, nhưng Vue 2. 0 tập trung nhiều vào các thành phần hơn vue 1. x và dường như không khuyến nghị sử dụng v-html, vì vậy có thể bạn cần phải xác định lại mã của mình để sử dụng các thành phần thay thế Khi sử dụng <div id="widget2"> <h2><b>I am Widget2b> - Managed by VueJSh2> div>5 (ví dụ: để hiển thị một bài viết được lấy từ CMS của bạn), bạn nên thay thế các liên kết nội bộ bằng Vue Router's <div id="widget2"> <h2><b>I am Widget2b> - Managed by VueJSh2> div>6 để đảm bảo rằng ứng dụng của bạn không tải lại một cách không cần thiết khi người dùng nhấp vào liên kết Ví dụ này sử dụng một Thành phần độc lập để đóng gói chức năng của chúng tôi Quá trình tiêm xảy ra trong cuộc gọi lại <div id="widget2"> <h2><b>I am Widget2b> - Managed by VueJSh2> div>7 của Thành phần. Trước tiên, chúng tôi cần Phần tử DOM chứa nội dung động của chúng tôi. Trong trường hợp của chúng tôi, nó trực tiếp. <div id="widget2"> <h2><b>I am Widget2b> - Managed by VueJSh2> div>8. Bây giờ truy xuất tất cả các neo bên trong nội dung động. <div id="widget2"> <h2><b>I am Widget2b> - Managed by VueJSh2> div>9 Lặp lại từng Phần tử và thả các liên kết dẫn đến các trang web bên ngoài Tài liệu Bộ định tuyến Vue không cho biết liệu chúng tôi có thể sử dụng phần đầu của URL hay không (https. //thí dụ. com) vì vậy chúng tôi chỉ cần xóa nó để lấy đường dẫn. Nhận hàm tạo cho <div id="widget2"> <h2><b>I am Widget2b> - Managed by VueJSh2> div>6 và khởi tạo nó bằng cách chuyển to prop như chúng ta sẽ sử dụng trong 1 và thành phần cha mẹ cho ngữ cảnh. Nếu không có ngữ cảnh, RouterLink của chúng tôi sẽ không thể truy cập 2, điều này làm mất đi chức năng của nó Phần tử DOM tương ứng của Thành phần chưa tồn tại, vì vậy chúng tôi chuyển Thành phần sang neo cũ, thay thế nó Bây giờ Thành phần có thuộc tính 4 mà chúng ta có thể sao chép thuộc tính (ví dụ:. , <div id="widget2"> <h2><b>I am Widget2b> - Managed by VueJSh2> div>60) và nội dung bên trong (tiêu đề của nó) Xong. Nhấp vào liên kết và nó sẽ mở trang mới mà không cần tải lại ứng dụng trang đơn của bạn. Sử dụng những điều cơ bản đã học ở đây và sửa đổi chức năng theo ý muốn của bạn sửa đổiChức năng kết xuất cho phép chúng tôi chọn một thẻ khác cho vùng chứa của mình thông qua các đạo cụ (ví dụ:. , phần thay vì div). Nếu không, chúng ta có thể thay thế hàm <div id="widget2"> <h2><b>I am Widget2b> - Managed by VueJSh2> div>61 bằng mẫu dễ đọc hơn Vue JS là một khung công tác giao diện người dùng nhận được tất cả lực kéo mà nó xứng đáng. Nó được tạo ra bằng cách chọn lọc những tính năng tốt nhất của Angular và React, Hai Frontend Java Frameworks phổ biến trong ngành CNTT hiện đại Đó là một khuôn khổ tuyệt vời và mạnh mẽ mà bạn có thể tin tưởng Bản thân tôi đã sử dụng nó cho nhiều mục đích khác nhau như Ứng dụng dành cho thiết bị di động, Phát triển trang web, Ứng dụng dành cho máy tính để bàn với Electron, v.v. Nó rất dễ dàng để sử dụng Nó đang đánh bại những người tiền nhiệm của chính nó và phát triển theo cấp số nhân. Tham khảo biểu đồ sau đây cho thấy sự phát triển của VueJS về xếp hạng Github Stars Có rất nhiều điều để yêu thích về VueJS và bạn có thể đọc bài viết này để biết thêm thông tin Lý do tại sao Vue. JS đang nhận được tất cả lực kéo VueJS DOM và cú pháp nội suyVue. Khung JS được biết đến với Chiến lược phát triển ứng dụng một trang. Trường hợp phiên bản Vue kiểm soát một phần hoặc phần tử/thẻ cụ thể của HTML Đây là một chương trình nhanh để hiểu cách tạo phiên bản VueJS và kiểm soát phần tử của HTML Ví dụ 1Trong chương trình trước, Nếu bạn xem phần javascript. Bạn có thể nhận thấy Chúng tôi đang tạo một Trường hợp vue mới và chỉ định phần tử DOM nào phải được quản lý bởi VueJS. 7 Trong trường hợp của chúng tôi, đó là widget2. Bạn có thể coi nó giống như 8 hơn Vì widget2 được hiển thị và được quản lý bởi Vue. js. Đủ điều kiện để truy cập tất cả các phương thức và dữ liệu được xác định trong phiên bản vuejs bằng cú pháp nội suy Tham khảo ví dụ thứ hai này, nơi chúng tôi đã thêm một số dữ liệu mới, ( Biến) trong phiên bản Vue và hiển thị nó trong phần tử DOM hoặc HTML của chúng tôi bằng cách sử dụng cú pháp 9 0 Ví dụ2So sánh Ví dụ1 và Ví dụ2Thông báo chúng tôi hiển thị trên Ví dụ1 và Ví dụ2 giống nhau. Ngoại trừ vị trí, nó đã được xác định Trong ví dụ đầu tiên. Thông báo được viết bên trong thẻ 1 dưới dạng HTML bình thường, Không phải bên trong Phiên bản Vue <div id="widget2"> <h2><b>I am Widget2b> - Managed by VueJSh2> div> và nó mang lại kết quả như thế này
Trong ví dụ thứ hai, cùng một Thông báo HTML đã được sao chép vào đối tượng VueJS 2 và được gán cho một biến có tên là 3, sau đó được hiển thị bằng cú pháp nội suy. 0 Tham khảo đoạn mã sau
Nếu bạn đã nhận thấy kết quả của Ví dụ 2 của chúng tôi trong JSFiddle trước đó. Bạn có thể đã thấy kết quả trông như thế này
Có gì đó không ổn với kết quả này. Nếu bạn chưa nhận thấy, hãy để tôi nói cho bạn biết Tin nhắn được hiển thị có chứa một số thẻ HTML 1 VueJS đang hiển thị các phần tử HTML giống như một văn bản, nơi lý tưởng nhất là nên áp dụng thẻ 2 và củng cố văn bản 3 Nó đã không xảy ra tại sao?
Cách hiển thị HTML động trong VueJS bằng chỉ thị v htmlĐể hiển thị HTML, chúng ta cần hiểu một vài thứ rất đơn giản. Trong khi nội suy và kết xuất, VueJS đang xem xét dữ liệu (hoặc) một biến dưới dạng Chuỗi hoặc Văn bản VueJS sẽ không quan tâm có phần tử HTML nào hay không Nó giống như hiển thị bất cứ thứ gì được gán cho biến một cách mù quáng trong khi điều đó nghe có vẻ ổn trong hầu hết các trường hợp. Có một yêu cầu là chúng tôi phải hiển thị một số HTML động được tạo trong phiên bản VueJS và được hiển thị trong Html DOM giả sử chúng ta chỉ muốn mã HTML của mình được hiển thị sau khi xử lý thay vì hiển thị dưới dạng 4
Kịch bản thời gian thực và Chúng ta đang mong đợi điều gì?Giả sử bạn đang xử lý một số dữ liệu HTML được lưu trữ trong Cơ sở dữ liệu dưới dạng văn bản và đọc từ cơ sở dữ liệu và muốn hiển thị nó trong ứng dụng của bạn Ví dụ tốt nhất là trình soạn thảo BLOG hoặc WYSIWYG trong đó mọi thứ chúng tôi nhập sẽ được lưu vào cơ sở dữ liệu dưới dạng các phần tử HTML và nó sẽ được đọc và hiển thị sau khi kết xuất WordPress là ví dụ tốt nhất về loại lưu trữ và truy xuất dữ liệu này Trong trường hợp này. nơi bạn có thể muốn thêm một số HTML động vào chương trình vuejs của mình và để hiển thị HTML dưới dạng HTML thông thường (không phải dưới dạng văn bản). Vue JS đã cung cấp cho chúng ta một chỉ thị có tên là 5 Ví dụ 2 của chúng tôi cũng tương tự và chúng tôi muốn hiển thị phần tử HTML thay vì HTML thô Tham khảo sơ đồ sau đây những gì chúng tôi đang cố gắng đạt được
Đây là Bản sửa lỗi cho Ví dụ2 bằng V HTMLThay vì sử dụng cú pháp ria mép kép 0, lần này chúng ta sẽ sử dụng lệnh 5 để hiển thị và hiển thị đúng phần tử HTML Tham khảo đoạn mã sau nơi chúng tôi đã sửa đổi Ví dụ2 bằng v-html Thay đổi duy nhất mà chúng tôi đã thực hiện là thay thế chỉ thị 8 bằng 5 <div id="widget2"> <h2><b>I am Widget2b> - Managed by VueJSh2> div>2
Sự kết luậnHy vọng bạn đã học được Nội suy thông thường và nội suy dựa trên v-html hoặc V html trong bài viết này với ví dụ. Nếu bạn thích bài viết này, hãy chia sẻ nó với bạn bè của bạn và đánh dấu trang web của chúng tôi
Chúc mừng Theo dõi chúng tôi trên Facebook hoặc Twitter Đăng ký nội dung độc quyền "chỉ dành cho người đăng ký" Tên* E-mail* Thêm từ Khoảng không quảng cáo phần mềm trung gian
|