เนื้อหาตอนต่อไปนี้เราจะมาดูเกี่ยวกับ Template Syntax แบบภาพรวม
และการใช้งาน Text Interpolation และ การใช้งาน Raw HTML
Template Syntax ใน vuejs คืออะไร
Template Syntax ใน Vue.js เป็นวิธีการใช้งานและเขียนโค้ดในเทมเพลต (template)
ของ Vue.js โดยใช้ syntax ที่เป็นแบบต้นฉบับของ HTML และเพิ่มเติมด้วย directives
และ interpolation ที่เป็นเฉพาะของ Vue.js
ตัวอย่างของ Template Syntax ใน Vue.js:
<p>{{ message }}</p>
<button v-on:click="changeMessage">Change Message</button>
ในตัวอย่างนี้:
{{ message }} เป็นการใช้งาน interpolation ซึ่งจะแทนที่ค่าของตัวแปร message ในโค้ด
Vue.js v-on:click="changeMessage" เป็น directive ที่เรียกว่า v-on หรือ @ ซึ่งใช้เพื่อ
เชื่อมต่อ event กับ method ใน Vue.js ในที่นี้คือการเชื่อม event click กับ method ชื่อ
changeMessage
ผลลัพธ์ของ Template Syntax นี้คือ เมื่อคลิกที่ปุ่ม "Change Message" จะทำให้เกิด
การเปลี่ยนแปลงของข้อความที่แสดงบนหน้าจอ ตามที่ถูกกำหนดใน method changeMessage
ในโค้ด Vue.js ที่เชื่อมโยงกับ event click ของปุ่มนั้นๆ
Template Syntax ใน Vue.js ประกอบด้วยองค์ประกอบหลักๆ ต่อไปนี้:
1.Interpolation: ใช้คำว่า {{ }} เพื่อแทนที่ค่าของข้อมูลในโค้ด Vue.js ซึ่งจะถูก
ประมวลผลและแสดงผลใน HTML
2.Directive: เป็นคำสั่งที่ใช้กับ HTML elements และใช้ prefix v- เพื่อบอก Vue.js
ว่าควรทำอะไร เช่น v-bind, v-on, v-model, v-for, v-if เป็นต้น
3.Event Handling: การใช้งาน directive เพื่อเชื่อมต่อ event ต่างๆ ของ HTML
elements กับ methods ใน Vue.js เช่น v-on:click, @click
4.Two-Way Binding: การใช้งาน v-model เพื่อทำให้ข้อมูลใน Vue instance และ
ค่าที่ป้อนเข้าจากผู้ใช้ในฟอร์มสามารถสื่อสารกันได้สองทาง
5.Computed Properties: การใช้งาน computed properties เพื่อสร้างค่าที่
คำนวณได้จากข้อมูลอื่นๆ ใน Vue instance และแสดงผลใน template
6.Conditional Rendering: การใช้งาน v-if, v-else, v-else-if, v-show เพื่อแสดง
หรือซ่อน elements ขึ้นอยู่กับเงื่อนไข
7.List Rendering: การใช้งาน v-for เพื่อวนลูปข้อมูลใน array เพื่อแสดงข้อมูลซ้ำๆ
หรือสร้าง elements ต่างๆ
8.Key Modifier: การใช้งาน key modifier ใน v-for เพื่อชี้แจง Vue.js ถึง identity
ของ elements ในลูป
9.Component Rendering: การใช้งาน components เพื่อแยกส่วนของโค้ดออกเป็น
ส่วนย่อยๆ ที่นำมาใช้งานได้ซ้ำ โดยใช้ <component-name> ใน template
10.Template Refs: การใช้งาน ref เพื่อระบุ element ใน template โดยใช้ $refs
ใน Vue instance เพื่อเข้าถึง element นั้น
การใช้งานทั้งหมดนี้ช่วยให้สามารถสร้างและจัดการกับโมเดลของแอปพลิเคชัน Vue.js ได้อย่าง
มีประสิทธิภาพและยืดหยุ่น
Text Interpolation ใน Vue.js
Text Interpolation ใน Vue.js เป็นเทคนิคที่ใช้ในการแสดงค่าของข้อมูลจาก Vue instance
ลงในเท็มเพลต (template) ของแอปพลิเคชัน Vue.js โดยทำให้สามารถแสดงข้อมูลได้โดยตรง
ใน HTML ของหน้าเว็บไซต์หรือแอปพลิเคชัน โดยใช้วงเล็บครอบค่าที่ต้องการแสดงข้อมูล ดังนี้:
<p>{{ message }}</p>
ในตัวอย่างนี้ {{ message }} เป็นส่วนหนึ่งของ Text Interpolation โดย message คือชื่อ
ของ property ใน Vue instance ซึ่งอาจเป็นข้อความ ตัวเลข หรือข้อมูลอื่นๆ ที่ถูกกำหนดให้
แสดงผลในที่นี้
เมื่อ Vue instance ทำการเริ่มต้น หรือเมื่อข้อมูลใน message ถูกเปลี่ยนแปลง ข้อความที่
ระบุในวงเล็บ {{ }} จะถูกอัปเดตอัตโนมัติใน DOM แสดงผลใหม่ตามค่าที่ถูกกำหนดใน Vue instance
การใช้งาน Text Interpolation ทำให้ง่ายต่อการแสดงข้อมูลแบบ dynamic ในเท็มเพลต
ของ Vue.js และช่วยให้สามารถผสม HTML กับข้อมูลจาก Vue instance ได้อย่างสะดวก
และยืดหยุ่น
การใช้งาน Raw HTML ใน Vue.js
การใช้งาน Raw HTML ใน Vue.js เป็นการให้ Vue.js รับรู้และแสดงข้อมูล HTML แบบ
ไม่ประมวลผล (unprocessed HTML) ในเทมเพลต (template) ของ Vue.js โดยใช้
directive v-html เพื่อทำให้ HTML นั้นถูกแทรกและแสดงผลใน DOM ของเว็บไซต์หรือ
แอปพลิเคชัน Vue.js ได้ ตัวอย่างเช่น:
<p v-html="htmlContent"></p>
ในตัวอย่างนี้ v-html ถูกใช้เพื่อแสดงข้อมูล HTML ที่เก็บไว้ในตัวแปร htmlContent ซึ่งอาจ
เป็น HTML จากแหล่งข้อมูลภายนอกหรือจากการประมวลผลใน Vue instance
การใช้งาน v-html ควรใช้โดยระมัดระวัง เนื่องจากมีความเสี่ยงที่ข้อมูล HTML ที่รับเข้ามาอาจมี
ช่องโหว่ความปลอดภัย เช่น การทำ Cross-Site Scripting (XSS) attacks หรือการแทรกโค้ด
ที่ไม่ปลอดภัยลงในหน้าเว็บไซต์ ดังนั้นควรใช้งาน v-html โดยตรงเฉพาะกับข้อมูลที่มีความเชื่อถือได้
และไม่มีความเสี่ยงทางความปลอดภัย
นอกจากนี้ การใช้งาน v-html ยังไม่สามารถใช้งานร่วมกับ directives หรือ expressions
อื่นๆ ได้ เนื่องจาก Vue.js จะไม่ประมวลผลหรือสร้างกระบวนการใดๆ กับข้อมูล HTML ที่ถูก
แสดงผลด้วย v-html ในการทำงาน
ข้อแตกต่างระหว่าง Text Interpolation กับ Raw HTML
การใช้ Text Interpolation และ Raw HTML ใน Vue.js นั้นแตกต่างกันในวิธีการแสดง
ข้อมูลและการประมวลผล HTML ดังนี้:
Text Interpolation:
1.วิธีการใช้งาน: ใช้วงเล็บครอบข้อมูลที่ต้องการแสดง โดยใช้ {{ }} ซึ่ง Vue.js
จะแปลงข้อมูลเหล่านั้นเป็นข้อความและแสดงใน HTML.
** {{ }} ไม่สามารถแทรกเข้าไปใน html attribute ได้ เช่น <div {{ok}}></div> ไม่ได้
2.ความสามารถ: ใช้ได้กับข้อความทั่วไปและข้อมูลที่ไม่ใช่ HTML อย่างเช่น ตัวเลข
หรือข้อมูลอื่น ๆ ที่ไม่ต้องการการประมวลผล HTML.
3.ความปลอดภัย: ข้อมูลที่แสดงผลด้วย Text Interpolation จะถูกเข้ารหัสเพื่อป้องกัน
การทำ Cross-Site Scripting (XSS) attacks.
Raw HTML:
1.วิธีการใช้งาน: ใช้ directive v-html เพื่อแสดงข้อมูล HTML โดย Vue.js
จะแสดงข้อมูล HTML ที่ได้รับโดยตรง โดยไม่มีการแปลงหรือประมวลผล.
2.ความสามารถ: ใช้สำหรับแสดงข้อมูล HTML ซึ่งสามารถใช้งานได้หลากหลาย เช่น
การแสดงภาพ การลิงก์ หรือการจัดรูปแบบข้อความ.
3.ความปลอดภัย: ต้องระมัดระวังในการใช้งาน เนื่องจากข้อมูล HTML ที่แสดงผลด้วย v-html
อาจมีความเสี่ยงทางความปลอดภัย เช่น การทำ Cross-Site Scripting (XSS) attacks
หรือการแสดง HTML ที่ไม่ปลอดภัย.
การเลือกใช้งานระหว่าง Text Interpolation และ Raw HTML ขึ้นอยู่กับลักษณะ
ของข้อมูลที่ต้องการแสดง และความสะดวกสบายของการใช้งานที่ต้องการในแต่ละสถานการณ์
ก่อนไปต่อในรายละเอียด กลับมาที่โค้ดตัวอย่างของเราที่ไฟล์ App.vue เราจะเพิ่มค่าตัวแปร
เพื่อให้สามารถนำมาใช้งานร่วมกับ Template syntax ได้ ใน vuejs จะเรียกค่านี้ว่า
reactive reference หรือ reference หรือค่าอ้างอิงที่สามารถเปลี่ยนแปลงค่าได้
ใน Vue.js เราจะต้องทำการใช้คำสั่ง import { ref } from 'vue' เพื่อทำการ (import)
ฟังก์ชัน ref จากโมดูล 'vue' เพื่อใช้ในโค้ด Vue.js
ref เป็นฟังก์ชันที่ใช้ในการสร้าง reactive reference หรือ referencee ที่สามารถเปลี่ยน
แปลงค่าได้ภายใน Vue component โดยอัตโนมัติ ซึ่งถูกใช้ในการสร้าง reactive state ใน
Vue.js โดยที่การเปลี่ยนแปลงค่าของ reference จะทำให้ Vue ทำการ re-render
component นั้นๆ อัตโนมัติ
ตัวอย่างการใช้งาน ref ใน App.vue
<script setup>
import { ref } from 'vue'
const msg = ref('Hello World!')
</script>
<template>
<button>{{ msg }}</button>
</template>
โค้ดนี้เป็นตัวอย่างการใช้งาน <script setup> ใน Vue 3 ซึ่งเป็นวิธีที่มีความสะดวกใน
การเขียน component โดยมี <script> และ <template> รวมกันในส่วนเดียวกัน
ใน <script setup>:
- import { ref } from 'vue': นำเข้า ref จากโมดูล 'vue' เพื่อใช้ในการสร้าง reactive reference.
- const msg = ref('Hello World!'): สร้าง reactive reference (*reactive state) ชื่อ msg และกำหนด
ค่าเริ่มต้นให้เป็น 'Hello World!'.
ใน <template>:
- <button>{{ msg }}</button>: แสดงค่าของ msg ในแท็ก <button> โดยใช้ Text Interpolation เพื่อให้ข้อความ 'Hello World!' แสดงอยู่บนปุ่ม.
ดังนั้น เมื่อ component ถูกนำเข้าและใช้งาน จะแสดงปุ่มที่มีข้อความ 'Hello World!' บน
ตัวปุ่มนั้น โดยข้อความนี้มาจาก reactive state ที่ถูกสร้างขึ้นในส่วน <script setup> ของ component
เมื่อเรารู้จักการใช้ ref เบื้องต้นแล้ว เราลองใช้ เพื่อสร้าง reactive state สำหรับ เก็บข้อมูล
ที่เป็นรูปแบบ html ดังรูปตัวอย่าง
<script setup>
import { ref } from 'vue'
const msg = ref('Hello World!')
const rawHtml = ref('<span style="color: red">This should be red.</span>')
</script>
<template>
<button>{{ msg }}</button>
<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</template>
ผลลัพธ์ที่ได้
เปรียบเทียบให้เห็นการใช้งานแบบ Text Interpolation กับ Raw HTML กับข้อมูล
โดยข้อมูลที่เป็น html หากใช้เป็นแบบแทรกข้อมูลก็จะแสดงผลเป็นข้อความเท่านั้น ในขณะ
ที่ถ้าใช้ผ่าน v-html ก็จะได้การแสดงผลที่เป็น html
สมมติเรากำหนดค่า
const htmlContent = ref('<h1>Hello World!</h1>');
และกำหนด template
<div v-html="htmlContent"></div>
ผลลัพธ์ที่ได้ ไม่ได้หมายความว่า ข้อมูล html จะไปแทรกใน attribute ของ div
<div ไม่ได้มาแทรกตรงนี้></div> <!-- แต่จะอยู่ในลักษณะนี้ --> <div><h1>Hello World!</h1></div>
หรือเข้าใจอย่างงายก็คือให้ div แสดงข้อมูลจากค่า reactive state ที่ชื่อว่า htmlContent
ในรูปแบบ html ผ่าน v-html directive
เพื่อไม่ให้เนื้อหายาวเกินไป รอติดตามต่อในตอนหน้า ยังมีส่วนอื่นๆ ที่ต้องศึกษาเกี่ยวกับ
การใช้งาน Template Syntax
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง