search

Hình ảnh V-html 3

Ngày đăng: 26/12/2022
Trả lời: 0
Lượt xem: 14

"00. 00. 17] Vì vậy, nếu bạn muốn làm thật ngon, tất cả mì ống hoặc bánh tét, tôi đề xuất món này không có ở đây cũng không có ở đó. Tuy nhiên, [CƯỜI] nếu bạn nhìn vào chuỗi này, bạn không muốn đánh giá chuỗi này khi bạn đưa nó vào trang, đó là điều nó thường làm. Những gì bạn muốn làm là bạn muốn sử dụng v-html thay vì các mẫu ria mép và sau đó nó sẽ coi HTML đó giống như HTML

Show

"00. 00. 38] Nó sẽ nhìn thấy liên kết đó và tạo một liên kết ra khỏi liên kết. Mát mẻ. Có một cảnh báo mà tôi sẽ cảnh báo bạn, không chấp nhận đầu vào của người dùng và sau đó đặt nó vào trang bằng v-html vì đó có thể là một vectơ tấn công kịch bản chéo trang. Vì vậy, nếu bạn xem ví dụ ngớ ngẩn này và bạn muốn nó chuyển đến thứ bánh taco của cửa hàng Alpa này, và nó nói rằng tôi phải cài đặt tất cả bánh taco của bạn, điều đó thật tệ, tôi không muốn chúng bị đánh cắp

"00. 01. 09] Vì vậy, đây thực sự không phải là một cách làm tốt. Nếu bạn biết rằng bạn không biết chính xác những gì bạn đang nhận được, tôi khuyên bạn không nên sử dụng v-html để truy cập và in nó ra trang. v-text tương tự như sử dụng các mẫu ria mép. Đây cũng là một thứ không hữu ích bằng những thứ khác

"00. 01. 31] Nhưng về cơ bản nó giống với mẫu ria mép. Vì vậy, nếu tôi nói, tôi thích carne asada, tôi biết có những loại bánh taco khác nhưng tôi chỉ trung thành với hai món đó, đó là món tôi thích nhất. [CƯỜI] Vì vậy, chúng tôi có các mẫu ria mép này ở đây, và sau đó chúng tôi có văn bản chữ v, chúng cũng làm điều tương tự

"00. 01. 50] Lý do tại sao chúng tôi có cả hai là đôi khi bạn chỉ có quyền truy cập để thay đổi một thuộc tính hoặc thứ gì đó và bạn không hoặc không thể chèn thứ gì đó vào bên trong thẻ. Vì vậy, chỉ trong trường hợp bạn gặp phải sự cố đó, thì bạn có thể sử dụng nó. Tuy nhiên, nếu bạn muốn cập nhật động mọi thứ, bạn nên sử dụng các mẫu ria mép

"00. 02. 09] Chúng được đánh giá nhanh hơn một chút. Tôi đã làm một bảng nhỏ đề phòng trường hợp bạn muốn xem tất cả chúng thật nhanh và bạn không muốn quay lại toàn bộ khóa học. Vì vậy, tôi có một số mục đích và ví dụ này mà bạn có thể tham khảo

Chỉ thị 


  
{{ message }}



// Creating new Vue Instance
new Vue({
// Choosing the element to be controlled by Vue.JS by ID
 el: "#widget2",
 data: {
 message: "I am Widget2 - Managed by VueJS"
},
 methods: {
}
})
2 được sử dụng để thay đổi HTML bên trong của phần tử DOM. Nó có vẻ an toàn và thú vị, nhưng đó là điều đầu tiên những kẻ tấn công tìm kiếm khi cố gắng hack trang web của bạn. Trong bài viết này, tôi sẽ chỉ ra mối nguy hiểm tiềm ẩn đến từ việc sử dụng 

  
{{ message }}



// Creating new Vue Instance
new Vue({
// Choosing the element to be controlled by Vue.JS by ID
 el: "#widget2",
 data: {
 message: "I am Widget2 - Managed by VueJS"
},
 methods: {
}
})
2 và chỉ ra các phương pháp thay thế để vá lỗ hổng bảo mật này

Chỉ thị v-html là một Vue. js được sử dụng để cập nhật HTML bên trong của phần tử với dữ liệu của chúng tôi. Đây là những gì phân biệt nó với văn bản v, điều đó có nghĩa là trong khi văn bản v chấp nhận chuỗi và coi nó là một chuỗi, nó sẽ chấp nhận chuỗi và hiển thị nó thành HTML. Đầu tiên, chúng ta sẽ tạo một phần tử div có id là ứng dụng và hãy áp dụng lệnh v-html cho phần tử này với dữ liệu là một thông báo. Bây giờ chúng ta sẽ tạo thông báo này bằng cách khởi tạo một Vue instance với thuộc tính data chứa thông báo của chúng ta

Các kiểu có phạm vi sẽ không áp dụng cho v-html, vì Vue không biên dịch HTML đó. Để áp dụng các kiểu cho nó, hãy thử sử dụng các kiểu chung hoặc một số Mô-đun CSS khác

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 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 thu hút mọi sự chú ý 

Hình ảnh V-html 3

VueJS DOM và cú pháp nội suy

Vue. 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ụ 1

Trong 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. 


  
{{ message }}



// Creating new Vue Instance
new Vue({
// Choosing the element to be controlled by Vue.JS by ID
 el: "#widget2",
 data: {
 message: "I am Widget2 - Managed by VueJS"
},
 methods: {
}
})
4 Trong trường hợp của chúng tôi, đó là widget2. Bạn có thể coi nó giống như 

  
{{ message }}



// Creating new Vue Instance
new Vue({
// Choosing the element to be controlled by Vue.JS by ID
 el: "#widget2",
 data: {
 message: "I am Widget2 - Managed by VueJS"
},
 methods: {
}
})
5 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, ( Một 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 


  
{{ message }}



// Creating new Vue Instance
new Vue({
// Choosing the element to be controlled by Vue.JS by ID
 el: "#widget2",
 data: {
 message: "I am Widget2 - Managed by VueJS"
},
 methods: {
}
})
6 

  
{{ message }}



// Creating new Vue Instance
new Vue({
// Choosing the element to be controlled by Vue.JS by ID
 el: "#widget2",
 data: {
 message: "I am Widget2 - Managed by VueJS"
},
 methods: {
}
})
7

Ví dụ2

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à Ví dụ2 giống nhau. Ngoại trừ vị trí, nó đã được xác định

Trong ví dụ đầu tiên. Tin nhắn được viết bên trong thẻ 


  
{{ message }}



// Creating new Vue Instance
new Vue({
// Choosing the element to be controlled by Vue.JS by ID
 el: "#widget2",
 data: {
 message: "I am Widget2 - Managed by VueJS"
},
 methods: {
}
})
8 dưới dạng HTML bình thường, Không phải bên trong Vue Instance

_
<div id="widget2">
  <h2><b>I am Widget2b> - Managed by VueJSh2>
div> 

và nó mang lại kết quả như thế này

Hình ảnh V-html 3

 

Trong ví dụ thứ hai, cùng một Thông báo HTML đã được sao chép vào đối tượng VueJS 


  
{{ message }}



// Creating new Vue Instance
new Vue({
// Choosing the element to be controlled by Vue.JS by ID
 el: "#widget2",
 data: {
 message: "I am Widget2 - Managed by VueJS"
},
 methods: {
}
})
9 và được gán cho một biến có tên là 

  
{{ message }}



// Creating new Vue Instance
new Vue({
// Choosing the element to be controlled by Vue.JS by ID
 el: "#widget2",
 data: {
 message: "I am Widget2 - Managed by VueJS"
},
 methods: {
}
})
0, sau đó được hiển thị bằng cú pháp nội suy. __________ 10

Tham khảo đoạn mã sau

______ 1

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

Hình ảnh V-html 3

 

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 cho bạn biết Tin nhắn được hiển thị có chứa một số thẻ HTML 


  
{{ message }}





// Creating new Vue Instance
new Vue({
  // Choosing the element to be controlled by Vue.JS by ID
  el: "#widget2",
  data: {
    message: "I am Widget2 - Managed by VueJS"
  },
  methods: {
  	
  }
})
1

VueJS đang hiển thị các thành phần HTML giống như một văn bản, nơi lý tưởng nhất là nên áp dụng thẻ 


  
{{ message }}





// Creating new Vue Instance
new Vue({
  // Choosing the element to be controlled by Vue.JS by ID
  el: "#widget2",
  data: {
    message: "I am Widget2 - Managed by VueJS"
  },
  methods: {
  	
  }
})
2 và củng cố văn bản  

  
{{ message }}





// Creating new Vue Instance
new Vue({
  // Choosing the element to be controlled by Vue.JS by ID
  el: "#widget2",
  data: {
    message: "I am Widget2 - Managed by VueJS"
  },
  methods: {
  	
  }
})
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 


  
{{ message }}





// Creating new Vue Instance
new Vue({
  // Choosing the element to be controlled by Vue.JS by ID
  el: "#widget2",
  data: {
    message: "I am Widget2 - Managed by VueJS"
  },
  methods: {
  	
  }
})
4

Hình ảnh V-html 3

 

 

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à 


  
{{ message }}





// Creating new Vue Instance
new Vue({
  // Choosing the element to be controlled by Vue.JS by ID
  el: "#widget2",
  data: {
    message: "I am Widget2 - Managed by VueJS"
  },
  methods: {
  	
  }
})
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

 

Hình ảnh V-html 3

 

Đây là Bản sửa lỗi cho Ví dụ2 bằng VHTML

Thay vì sử dụng cú pháp ria mép kép 


  
{{ message }}





// Creating new Vue Instance
new Vue({
  // Choosing the element to be controlled by Vue.JS by ID
  el: "#widget2",
  data: {
    message: "I am Widget2 - Managed by VueJS"
  },
  methods: {
  	
  }
})
7 chúng ta sẽ sử dụng lệnh 

  
{{ message }}





// Creating new Vue Instance
new Vue({
  // Choosing the element to be controlled by Vue.JS by ID
  el: "#widget2",
  data: {
    message: "I am Widget2 - Managed by VueJS"
  },
  methods: {
  	
  }
})
5 để hiển thị và hiển thị đúng phần tử HTML lần này

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 chúng tôi đã thực hiện là thay thế chỉ thị 


  
{{ message }}





// Creating new Vue Instance
new Vue({
  // Choosing the element to be controlled by Vue.JS by ID
  el: "#widget2",
  data: {
    message: "I am Widget2 - Managed by VueJS"
  },
  methods: {
  	
  }
})
8 bằng chỉ thị 

  
{{ message }}





// Creating new Vue Instance
new Vue({
  // Choosing the element to be controlled by Vue.JS by ID
  el: "#widget2",
  data: {
    message: "I am Widget2 - Managed by VueJS"
  },
  methods: {
  	
  }
})
5

____________ 11

 

Phần kết luận

Hy 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
Sarav AK

Hình ảnh V-html 3

Theo dõi chúng tôi trên Facebook hoặc Twitter
Để biết thêm các video và hướng dẫn thực tế. Đăng ký kênh của chúng tôi
Theo dõi tôi trên Linkedin Hồ sơ của tôi
Để được tư vấn hoặc thuê chúng tôi
Nếu bạn thích bài viết này. Hiển thị hỗ trợ của bạn. Mua cho tôi một ly cà phê.

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

Tên*

E-mail*

Hình ảnh V-html 3

Thêm từ Hàng tồn kho phần mềm trung gian

  • Wordpress và các phần tử html biến mất

    Bạn đang tìm giải pháp cho bất kỳ vấn đề nào sau đây "phần tử html không hoạt động trong bài đăng wordpress", "thẻ khung nội tuyến bị xóa trong bài đăng sau khi cập nhật", "thẻ script biến mất sau khi cập nhật bài đăng", "không thể để sử dụng bất kỳ phần tử html nào trong bài đăng" "Không thể…

  • Hình ảnh V-html 3

    Ví dụ về mô-đun không lưu trữ Ansible

    Ansible Unarchive Module là gì và nó hoạt động như thế nào Mô-đun Ansible Unarchive giúp giải nén hoặc giải nén các tệp từ một tệp lưu trữ như tar, tar. gz, nén. Mô-đun không lưu trữ Ansible có thể tùy chọn sao chép các tệp vào máy chủ từ xa trước khi giải nén chúng. Mặc dù mô-đun hủy lưu trữ là…

  • Hình ảnh V-html 3

    Ví dụ về danh sách AWS EC2 CLI - Mô tả các phiên bản. Giao lộ Devops

    AWS CLI là một trợ thủ đắc lực trong việc quản lý hiệu quả Cơ sở hạ tầng đám mây AWS và các phiên bản EC2 của bạn. Trong khi chúng tôi đang quản lý Cơ sở hạ tầng AWS của mình, chúng tôi không phải lúc nào cũng đủ khả năng để đăng nhập vào bảng điều khiển AWS và điều này không được khuyến nghị từ khía cạnh bảo mật…

  • Hình ảnh V-html 3

    Ví dụ về Ansible Find - Cách sử dụng Ansible Find

    Các chức năng của mô-đun find Ansible giống như lệnh Find của Linux và giúp tìm các tệp và thư mục dựa trên các tiêu chí tìm kiếm khác nhau như tuổi của tệp, ngày truy cập, ngày sửa đổi, mẫu tìm kiếm regex, v.v. Như đã nói trước đó, đây là một cách an toàn hơn để thực thi…

  • Hình ảnh V-html 3

    Cửa sổ lệnh Netstat - Cách sử dụng và ví dụ

    Giới thiệu Giống như Linux, Windows có lệnh netstat và lệnh này có thể hữu ích khi bạn cần giám sát và khắc phục sự cố liên quan đến mạng. Hãy xem xét bạn có bất kỳ yêu cầu nào sau đây Cách tìm ai hoặc quy trình nào sở hữu cổng trong Windows Server Để xem có bao nhiêu HTTP/DB…

    Cách sử dụng v

    3 câu trả lời .
    Sử dụng ứng dụng. directive() để tạo một lệnh chung, có tên là v-inline-svg. //chủ yếu. js nhập { createApp } từ 'vue' nhập Ứng dụng từ '. /Ứng dụng. vue' createApp(Ứng dụng). .
    In your component, include v-inline-svg on the v-html wrapper element (also works on