Xem js v html

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 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 nhận được tất cả lực kéo

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

Lượt xem. 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 phiên bản 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: {
}
})

2 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: {
}
})

3 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ị dữ liệu đó 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: {
}
})

4

  
{{ 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

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: {
}
})

6 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

 

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: {
}
})

7 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: {
}
})

8, sau đó được hiển thị bằng cú pháp nội suy.

  
{{ 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

Tham khảo đoạn mã sau

  
{{ 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: {
}
})

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 cho bạn biết thông báo đang đượ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 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ẻ

  
{{ 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

 

 

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

 

 

Đâ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

  
{{ 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, lần này 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

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

  
{{ 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

 

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

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 [email protected][email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a> [email protected] a>
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*

---

Thêm từ Khoảng không quảng cáo 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ể…

• 

  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à…

• 

  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 thể 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ừ góc độ bảo mật...

• 

  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…

• 

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