VueJS - เทมเพลต

เราได้เรียนรู้ในบทก่อนหน้านี้ถึงวิธีการรับผลลัพธ์ในรูปแบบของเนื้อหาข้อความบนหน้าจอ ในบทนี้เราจะเรียนรู้วิธีการรับผลลัพธ์ในรูปแบบของเทมเพลต HTML บนหน้าจอ

เพื่อให้เข้าใจสิ่งนี้ให้เราพิจารณาตัวอย่างและดูผลลัพธ์ในเบราว์เซอร์

<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>"
   }
})

ตอนนี้สมมติว่าเราต้องการแสดงเนื้อหา html ในหน้า หากเราใช้มันร่วมกับการแก้ไขเช่นกับวงเล็บปีกกาสองชั้นนี่คือสิ่งที่เราจะได้รับจากเบราว์เซอร์

หากเราเห็นเนื้อหา html แสดงในลักษณะเดียวกับที่เรากำหนดไว้ในตัวแปร htmlcontent นี่ไม่ใช่สิ่งที่เราต้องการเราต้องการให้แสดงในเนื้อหา HTML ที่เหมาะสมบนเบราว์เซอร์

สำหรับสิ่งนี้เราจะต้องใช้ v-htmlคำสั่ง ในขณะที่เรากำหนดคำสั่ง v-html ให้กับองค์ประกอบ html VueJS รู้ว่าต้องส่งออกเป็นเนื้อหา HTML เพิ่มคำสั่ง v-html ในไฟล์.html ไฟล์และดูความแตกต่าง

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

ตอนนี้เราไม่จำเป็นต้องใช้วงเล็บปีกกาคู่เพื่อแสดงเนื้อหา HTML แต่เราได้ใช้ v-html =” htmlcontent” โดยที่ htmlcontent ถูกกำหนดไว้ภายใน js ไฟล์ดังนี้ -

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

ผลลัพธ์ในเบราว์เซอร์มีดังนี้ -

หากเราตรวจสอบเบราว์เซอร์เราจะเห็นเนื้อหาถูกเพิ่มในลักษณะเดียวกับที่กำหนดไว้ในไฟล์ .js ไฟล์ไปยังตัวแปร htmlcontent : "<div><h1>Vue Js Template</h1></div>".

มาดูองค์ประกอบการตรวจสอบในเบราว์เซอร์กัน

เราได้เห็นวิธีการเพิ่มเทมเพลต HTML ใน DOM ตอนนี้เราจะดูวิธีเพิ่มแอตทริบิวต์ให้กับองค์ประกอบ HTML ที่ออก

ลองพิจารณาเรามีแท็กรูปภาพในไฟล์ HTML และเราต้องการกำหนด src ซึ่งเป็นส่วนหนึ่งของ Vue

ตัวอย่าง

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

ดูที่แท็ก img ด้านบนส่วน src ว่างเปล่า เราต้องเพิ่ม src จาก vue js ให้เรามาดูวิธีการทำ เราจะจัดเก็บ img src ไว้ในออบเจ็กต์ข้อมูลในไฟล์.js ไฟล์ดังนี้ -

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

หากเรากำหนด src ดังต่อไปนี้ผลลัพธ์ในเบราว์เซอร์จะเป็นดังที่แสดงในภาพหน้าจอต่อไปนี้

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

เราได้ภาพที่แตก ในการกำหนดแอตทริบิวต์ใด ๆ ให้กับแท็ก HMTL เราจำเป็นต้องใช้v-bindคำสั่ง มาเพิ่ม src ให้กับรูปภาพด้วย v-bind directive

นี่คือวิธีการกำหนดใน .html ไฟล์.

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

เราต้องนำหน้า src ด้วย v-bind:src = ”imgsrc” และชื่อของตัวแปรด้วย src

ต่อไปนี้เป็นผลลัพธ์ในเบราว์เซอร์