Hướng dẫn vue render html without v-html - vue kết xuất html mà không có v-html

• Một số nền tảng về Vuejs
• VUEJS DOM và Cú pháp nội suy
  • Example1
  • Example2
• So sánh ví dụ1 và ví dụ2
• Cách hiển thị HTML động trong Vuejs bằng chỉ thị V HTML.
• Kịch bản thời gian thực và những gì chúng ta đang mong đợi?
• Đây là bản sửa lỗi cho ví dụ2 bằng V HTML
• Sự kết luận

Một số nền tảng về Vuejs

VUEJS DOM và Cú pháp nội suy

So sánh ví dụ1 và ví dụ2

Cách hiển thị HTML động trong Vuejs bằng chỉ thị V HTML.

Vue JS là một khung phía trước 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 anh đào các tính năng tốt nhất của Angular và React, hai khung Java Frontend nổi tiếng 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 các mục đích khác nhau như ứng dụng di động, phát triển trang web, ứng dụng máy tính để bàn với electron, v.v.

VUEJS DOM và Cú pháp nội suy

So sánh ví dụ1 và ví dụ2

Cách hiển thị HTML động trong Vuejs bằng chỉ thị V HTML.

Example1

Vue JS là một khung phía trước 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 anh đào các tính năng tốt nhất của Angular và React, hai khung Java Frontend nổi tiếng 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 các mục đích khác nhau như ứng dụng di động, phát triển trang web, ứng dụng máy tính để bàn với electron, v.v.

Example2

So sánh ví dụ1 và ví dụ2

Thông báo chúng tôi đã hiển thị trên ví dụ1 và example2 là như nhau. Ngoại trừ vị trí, nó đã được xác định.

Trong ví dụ đầu tiên. Thông điệp được viết bên trong ____ 13 & nbsp; Tag & nbsp; Là một HTML bình thường, không phải trong trường hợp Vue the Message was written inside the

Vue.component['html-fragment', {
  functional: true,
  props: ['html'],
  render[h, ctx] {
    const nodes = new Vue[{
      beforeCreate[] { this.$createElement = h }, // not necessary, but cleaner imho
      template: `
${ctx.props.html}
`
    }].$mount[]._vnode.children
    return nodes
  }
}]

  I am Widget2 - Managed by VueJS
 

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 Vuejs ________ 14 & nbsp; đối tượng và được gán cho một biến có tên là ____ 15 & nbsp; và sau đó được hiển thị bằng cú pháp nội suy.

Vue.component['html-fragment', {
  functional: true,
  props: ['html'],
  render[h, ctx] {
    const nodes = new Vue[{
      beforeCreate[] { this.$createElement = h }, // not necessary, but cleaner imho
      template: `
${ctx.props.html}
`
    }].$mount[]._vnode.children
    return nodes
  }
}]

Vue.component['html-fragment', {
  functional: true,
  props: ['html'],
  render[h, ctx] {
    const nodes = new Vue[{
      beforeCreate[] { this.$createElement = h }, // not necessary, but cleaner imho
      template: `
${ctx.props.html}
`
    }].$mount[]._vnode.children
    return nodes
  }
}]

Vue.component['html-fragment', {
  functional: true,
  props: ['html'],
  render[h, ctx] {
    const nodes = new Vue[{
      beforeCreate[] { this.$createElement = h }, // not necessary, but cleaner imho
      template: `
${ctx.props.html}
`
    }].$mount[]._vnode.children
    return nodes
  }
}]

Vue.component['html-fragment', {
  functional: true,
  props: ['html'],
  render[h, ctx] {
    const nodes = new Vue[{
      beforeCreate[] { this.$createElement = h }, // not necessary, but cleaner imho
      template: `
${ctx.props.html}
`
    }].$mount[]._vnode.children
    return nodes
  }
}]

Tham khảo đoạn mã sau.

  
{{ message }}




new Vue[{
  
  el: "#widget2",
  data: {
    message: "I am Widget2 - Managed by VueJS"
  },
  methods: {
  	
  }
}]

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. & Nbsp; Bạn có thể thấy kết quả trông như thế này.

Có điều gì đó sai với kết quả này. Nếu bạn chưa nhận thấy, hãy để tôi cho bạn biết tin nhắn được hiển thị có chứa một số thẻ HTML

Vue.component['html-fragment', {
  functional: true,
  props: ['html'],
  render[h, ctx] {
    const nodes = new Vue[{
      beforeCreate[] { this.$createElement = h }, // not necessary, but cleaner imho
      template: `
${ctx.props.html}
`
    }].$mount[]._vnode.children
    return nodes
  }
}]

Vuejs đang hiển thị các phần tử HTML như một văn bản, trong đó nó nên áp dụng lý tưởng thẻ ____ 18 & nbsp; và tăng cường văn bản & nbsp; & nbsp; ________ 19

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 cái gì đó 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 nếu có bất kỳ phần tử HTML nào hay không

Nó giống như hiển thị bất cứ điều 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 trong đó chúng ta phải hiển thị một số HTML động được tạo trong thể hiện Vuejs và được đưa vào HTML DOM.

Hãy nói rằng chúng tôi chỉ đơn giản muốn mã HTML của chúng tôi được hiển thị sau khi xử lý thay vì hiển thị nó là

  I am Widget2 - Managed by VueJS
 

Kịch bản thời gian thực và những gì chúng ta đang mong đợi?

Hãy giả sử rằng 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à Blog hoặc Trình chỉnh sửa WYSIWYG, nơi bất cứ điều gì chúng tôi gõ 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.WYSIWYG editor where whatever we type would be saved into the database as HTML elements and it would be read and displayed after rendering.

WordPress là ví dụ tốt nhất của loại lưu trữ dữ liệu và truy xuất dữ liệu này.

Trong những trường hợp như vậy. Ở đâu 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 là văn bản] .Vue JS đã cho chúng tôi một chỉ thị có tên v-html

Ví dụ 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 HTML

Thay vì sử dụng cú pháp ria mép kép ________ 12 & nbsp; chúng tôi sẽ sử dụng chỉ thị ____ 5 & nbsp; để hiển thị và hiển thị phần tử HTML đúng lúc này.

Tham khảo đoạn mã sau đây chúng tôi đã sửa đổi Ví dụ2 với V-HTML

Thay đổi duy nhất chúng tôi đã thực hiện là thay thế ____ 24 & nbsp; với & nbsp; ________ 5 & nbsp; Chỉ thị.

  





new Vue[{
  
  el: "#widget2",
  data: {
    message: "I am Widget2 - Managed by VueJS"
  },
  methods: {
  	
  }
}]

Sự kết luận

Hy vọng bạn đã học được phép nội suy bình thường và nội suy V-HTML hoặc V HTML trong bài viết này với ví dụ. & NBSP; Nếu bạn thích bài viết này, hãy chia sẻ điều này 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 Sarav Ak
Sarav AK

Theo dõi chúng tôi Onfacebook Ortwitter cho các video và hướng dẫn thực tế hơn. Đăng ký kênh của chúng tôi Tìm tôi trên LinkedIn Hồ sơ của tôi cho bất kỳ tư vấn nào hoặc để thuê chúng tôi [Email & NBSP; được bảo vệ] nếu bạn thích bài viết này. Thể hiện sự hỗ trợ của bạn! Mua cho tôi một ly cà phê.
For more practical videos and tutorials. Subscribe to our channel
Find me on Linkedin My Profile
For any Consultation or to hire us [email protected]
If you like this article. Show your Support! Buy me a Coffee.

Đăng ký nội dung độc quyền "chỉ dành cho thuê bao"