สวัสดีครับ ในหัวข้อนี้จะเกี่ยวข้องกับรูปแบบการเขียน หรือ Syntax ของ Template ที่อยู่ภายใน Component หรือพูดง่ายๆก็คือการเขียน UI ของ Component นั้นแหละครับ ซึ่งมันจะเขียนเป็น HTML ธรรมดา แต่ก็จะมี Syntax บางอย่างที่จะเขียนในรูปแบบของ Vue ซึ่งจะทําให้เราเขียน Code ได้ง่ายขึ้น ถ้ายังนึกไม่ออกว่า Template มัน

อยู่ตรงไหน ดูรูปด้านล่างนี่ครับ

มาเริ่มเรียนกันได้เลยครับ

Text

เราสามารถใส่ Data binding เข้าไปใน Template ของเราได้ครับ ถ้าให้เข้าใจง่ายๆ ก็คือสามารถใส่ตัวแปล Javascript ที่เราสร้างภายใน Component เข้าไปใน Template ได้  ซึ่งถ้าข้อมูลในตัวแปรเปลี่ยนแปลง UI ก็จะเปลี่ยนแปลงตามไปด้วย โดยเราจะเขียนอยู่ใน {{ }} ครับ ตามตัวอย่าง

<span>Message: {{ msg }}</span>

จากตัวอย่าง msg เป็นตัวแปล Javascript อยู่ถูกประกาศภายใน Component instanse ถ้าไม่ต้องการให้ UI เปลี่ยนแปลง เมื่อข้อมูลเปลี่ยน เราสามารถใส่ v-once เข้าไปได้ ตามตัวอย่างนี้

<span v-once>This will never change: {{ msg }}</span>

Raw HTML

ปกติถ้าเราใช้ {{ msg }} จะแสดงผลเป็น Text เท่านั้น ไม่ว่าข้อมูลนั้นจะเป็น Tag HTML ก็ตาม แล้วถ้าเราต้องการให้แสดงผล output ของ HTML เราสามารถใช้ v-html ได้ครับ ตามตัวอย่างด้านล่าง

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

จะได้ผลประมาณนี้

Span จะถูกเปลี่ยนไปเป็น Tag HTML ของ “rawHtml” ทันทีครับ

Attributes

โดยปกติแล้วเราจะไม่สามารถใช้ {{ }} ภายใน HTML Attributes ได้ ถ้าต้องการใช้ก็สามารถทําได้ โดยใช้ v-bind ตามตัวอย่าง

<div v-bind:id="dynamicId"></div>

กรณีที่เป็น boolean ใน v-bind ตามตัวอย่างนี้

<button v-bind:disabled="isButtonDisabled">Button</button>

ถ้า isButtonDisabled มีข้อมูลเป็น null, undefined, หรือ false Attribute disabled จะไม่ถูกเพิ่มเข้าไปใน HTML Attribute

Using JavaScript Expressions

เราสามารถใส่ Javascript ใน Template ได้ครับ แต่มีเงือนไขอยู่ว่า จะต้องเป็น  only contain one single expression เสมอ ตามตัวอย่างด้านล่าง

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

ส่วน Javascript ที่ไม่เป็น  only contain one single expression จะไม่สามารถทํางานได้ ดังตัวอย่างนี้

<!-- this is a statement, not an expression: -->
{{ var a = 1 }}

<!-- flow control won't work either, use ternary expressions -->
{{ if (ok) { return message } }}

Directives

Vue.js จะมี Spacial attributes ซึ่งจะใช้ v- นําหน้า เช่น v-if และยังมี Special attributes อื่นๆอีก แต่ในบทความนี้จะขอยกตัวอย่าง v-if ซึ่งสามารถเขียนได้ตามนี้

<p v-if="seen">Now you see me</p>

จากตัวอย่าง v-if จะมีความหมายคือ remove/insert HTML

ตามข้อมูลที่อยู่ใน seen ถ้าข้อมูลที่อยู่ใน seen เป็น  True จะ insert

แต่ถ้าเป็น False ก็จะ Remove

Arguments

ในบาง HTML Tag จะมีการรับค่า Arquments เช่น เราสามารถใช้ v-bind: แล้วตามด้วย ชื่อได้เลย ตัวอย่าง

<a v-bind:href="url"> ... </a>

หรือถ้าเป็น Event เช่น onClick ก็สามารถใช้ v-on: ได้เลย ตัวอย่าง

<a v-on:click="doSomething"> ... </a>

Shorthands

เราสามารถเขียน v-bind และ v-on แบบสั้นๆได้โดยใช้ : และ @ ตามตัวอย่าง

<!-- full syntax -->
<a v-bind:href="url"> ... </a>

<!-- shorthand -->
<a :href="url"> ... </a>

<!-- full syntax -->
<a v-on:click="doSomething"> ... </a>

<!-- shorthand -->
<a @click="doSomething"> ... </a>

จบครับ เจอกันบทความหน้าครับ :)