VueJS - Mẫu

Chúng ta đã học ở các chương trước, cách lấy kết quả đầu ra dưới dạng nội dung văn bản trên màn hình. Trong chương này, chúng ta sẽ tìm hiểu cách lấy kết quả đầu ra dưới dạng HTML template trên màn hình.

Để hiểu điều này, chúng ta hãy xem xét một ví dụ và xem kết quả đầu ra trong trình duyệt.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <div>{{htmlcontent}}</div>
      </div>
      <script type = "text/javascript" src = "js/vue_template.js"></script>
   </body>
</html>

vue_template.js

var vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>"
   }
})

Bây giờ, giả sử chúng ta muốn hiển thị nội dung html trên trang. Nếu chúng ta sử dụng nó với phép nội suy, tức là với dấu ngoặc nhọn kép, đây là những gì chúng ta sẽ nhận được trong trình duyệt.

Nếu chúng ta thấy nội dung html được hiển thị giống như cách chúng ta đã đưa ra trong biến htmlcontent, đây không phải là điều chúng ta muốn, chúng ta muốn nó được hiển thị trong nội dung HTML phù hợp trên trình duyệt.

Đối với điều này, chúng tôi sẽ phải sử dụng v-htmlchỉ thị. Thời điểm chúng ta gán chỉ thị v-html cho phần tử html, VueJS biết rằng nó phải xuất nó dưới dạng nội dung HTML. Hãy thêm chỉ thị v-html trong.html nộp hồ sơ và xem sự khác biệt.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <div v-html = "htmlcontent"></div>
      </div>
      <script type = "text/javascript" src = "js/vue_template.js"></script>
   </body>
</html>

Bây giờ, chúng tôi không cần dấu ngoặc nhọn kép để hiển thị nội dung HTML, thay vào đó chúng tôi đã sử dụng v-html = ”htmlcontent” trong đó htmlcontent được xác định bên trong js tập tin như sau -

var vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>"
   }
})

Đầu ra trong trình duyệt như sau:

Nếu chúng tôi kiểm tra trình duyệt, chúng tôi sẽ thấy nội dung được thêm vào giống như cách nó được định nghĩa trong .js tập tin vào biến htmlcontent : "<div><h1>Vue Js Template</h1></div>".

Chúng ta hãy xem xét phần tử kiểm tra trong trình duyệt.

Chúng ta đã biết cách thêm mẫu HTML vào DOM. Bây giờ, chúng ta sẽ xem cách thêm thuộc tính vào các phần tử HTML đang thoát.

Hãy xem xét, chúng tôi có một thẻ hình ảnh trong tệp HTML và chúng tôi muốn gán src, là một phần của Vue.

Thí dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <div v-html = "htmlcontent"></div>
         <img src = "" width = "300" height = "250" />
      </div>
      <script type = "text/javascript" src = "js/vue_template1.js"></script>
   </body>
</html>

Nhìn vào thẻ img ở trên, src trống. Chúng ta cần thêm src vào nó từ vue js. Hãy cùng chúng tôi xem qua cách thực hiện. Chúng tôi sẽ lưu trữ img src trong đối tượng dữ liệu trong.js tập tin như sau -

var vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      htmlcontent : "<div><h1>Vue Js Template</h1></div>",
      imgsrc : "images/img.jpg"
   }
})

Nếu chúng ta gán src như sau, đầu ra trong trình duyệt sẽ như trong ảnh chụp màn hình sau.

<img src = "{{imgsrc}}" width = "300" height = "250" />

Chúng tôi nhận được một hình ảnh bị hỏng. Để gán bất kỳ thuộc tính nào cho thẻ HMTL, chúng ta cần sử dụngv-bindchỉ thị. Hãy thêm src vào hình ảnh với chỉ thị v-bind.

Đây là cách nó được chỉ định trong .html tập tin.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <div v-html = "htmlcontent"></div>
         <img v-bind:src = "imgsrc" width = "300" height = "250" />
      </div>
      <script type = "text/javascript" src = "js/vue_template1.js"></script>
   </body>
</html>

Chúng ta cần thêm tiền tố src bằng v-bind:src = ”imgsrc” và tên của biến với src.

Sau đây là kết quả trong trình duyệt.