การใช้งาน JavaScript Expressions และรู้จักส่วนต่างๆใน Directives เพิ่มเติม

<script setup>
import { ref } from 'vue'

const number = ref(10)
const ok = ref(true)
const message = ref('Hello world')
const id = ref(2)
</script>

<template>  
    <div>{{ number + 1 }}</div>
    <div>{{ ok ? 'YES' : 'NO' }}</div>
    <div>{{ message.split('').reverse().join('') }}</div>
    <div :id="`list-${id}`"></div>     
</template>

<div>11</div>
<div>YES</div>
<div>dlrow olleH</div>
<div id="list-2"></div>

// ค่าคงที่
const number = 10;
const message = "Hello, world!";
const isTrue = true;

// ตัวดำเนินการ
const sum = 5 + 3;
const product = 10 * 2;
const isEqual = (5 === 5);

// ตัวแปร
const x = 20;
const y = x * 2;

// Function Calls
const currentDate = new Date();
const randomNum = Math.random();

<div>{{ new Date() }}</div>   
<div>{{ Math.random() }}</div>

<!-- เป็นคำสั่ง statement, ไม่ใช่นิพจน์ expression: -->
{{ var a = 1 }}

<!-- ใช้รูปแบบ flow control ไม่ได้, ให้ใช้เป็นแบบ
ternary expressions (?:) เพื่อกำหนดค่าของ expression ตามเงื่อนไข
ที่กำหนดไว้ ในรูปแบบ condition ? expression1 : expression2 แทน -->
{{ if (ok) { return message } }}

<script setup>
import { ref } from 'vue'

const date = new Date()

function formatDateToThai(date) {
    const thaiMonths = [
        'มกราคม', 'กุมภาพันธ์', 'มีนาคม', 'เมษายน', 'พฤษภาคม', 'มิถุนายน',
        'กรกฎาคม', 'สิงหาคม', 'กันยายน', 'ตุลาคม', 'พฤศจิกายน', 'ธันวาคม'
    ];

    const thaiDays = ['อาทิตย์', 'จันทร์', 'อังคาร', 'พุธ', 'พฤหัสบดี', 'ศุกร์', 'เสาร์'];

    const thaiYear = date.getFullYear() + 543;
    const thaiMonth = thaiMonths[date.getMonth()];
    const thaiDayOfWeek = thaiDays[date.getDay()];
    const thaiDayOfMonth = date.getDate();

    return `${thaiDayOfWeek}, ${thaiDayOfMonth} ${thaiMonth} ${thaiYear}`;
}
</script>

<template>  
    <time :title="formatDateToThai(date)" :datetime="date">
    {{ formatDateToThai(date) }}
    </time>    
</template>

<time title="พุธ, 8 พฤษภาคม 2567" datetime="Wed May 08 2024 17:20:17 
GMT+0700 (Indochina Time)">
พุธ, 8 พฤษภาคม 2567
</time>

<script setup>
import { ref } from 'vue'

const global_window = window.location
</script>

<template> 
<!-- แบบนี้ได้  -->
    <div>{{ global_window }}</div>
<!-- แบบนี้ไม่ได้
<div>{{ window.location }}</div>
-->
</template>

<script setup>
import { ref } from 'vue'

const seen = ref(false)
// หลังจาก  5 วินาที มีการเปลี่ยนแปลงค่า
setTimeout(()=>{
    seen.value = true;
},5000)
</script>

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

<script setup>
import { ref } from 'vue'

const url = ref('https://www.ninenik.com')
</script>

<template>  
    <a v-bind:href="url">  Ninenik.com </a>
    <!-- แบบย่อหรือแบบสั้น -->
    <a :href="url"> Ninenik.com </a>
</template>

<script setup>
import { ref } from 'vue'

const url = ref('https://www.ninenik.com')

function doSomething(){
    alert('Hello')
}
</script>

<template>  
    <a v-on:click="doSomething" v-bind:href="url">  Ninenik.com </a>
    <!-- แบบย่อหรือแบบสั้น -->
    <a @click="doSomething" :href="url"> Ninenik.com </a>
</template>

<script setup>
import { ref } from 'vue'

const url = ref('https://www.ninenik.com')
const attributeName = ref('href')
// หลังจาก  5 วินาที มีการเปลี่ยนแปลงค่า
setTimeout(()=>{
    attributeName.value = 'title'
},5000)
</script>

<template>  
    <a v-bind:[attributeName]="url">  Ninenik.com </a>
    <!-- แบบย่อหรือแบบสั้น -->
    <a :[attributeName]="url"> Ninenik.com </a>
</template>

<a v-on:[eventName]="doSomething" >  Ninenik.com </a>
<!-- แบบย่อหรือแบบสั้น -->
<a @[eventName]="doSomething" > Ninenik.com </a>

<script setup>
import { ref } from 'vue'

const url = ref('https://www.ninenik.com')
const attributeName = ref('href')
</script>

<template>  
    <!-- รูปแบบนี้ไม่สามารถใช้งานได้ -->
    <a v-bind:['data' + attributeName]="url">  Ninenik.com </a>
    <!--  รูปแบบนี้ไม่สามารถใช้งานได้ แบบย่อหรือแบบสั้น -->
    <a :['data' + attributeName]="url"> Ninenik.com </a>
</template>

<script setup>
import { ref, computed } from 'vue'

const url = ref('https://www.ninenik.com')
const attributeName = ref('href')
const attributeName2 = computed(() => {
  return 'data-' + attributeName.value
})
</script>

<template>  
    <a v-bind:[attributeName2]="url">  Ninenik.com </a>
    <!-- แบบย่อหรือแบบสั้น -->
    <a :[attributeName2]="url"> Ninenik.com </a>
</template>

<!-- ไม่ควรใช้ -->
<a :[someAttr]="value"> ... </a>
<!-- ควรใช้เป็น -->
<a :[someattr]="value"> ... </a>

<script setup>
import { ref } from 'vue'

const url = ref('https://www.ninenik.com')

function doSomething(){
    alert('Hello')
}
</script>

<template>  
    <a v-on:click.prevent="doSomething" v-bind:href="url">  Ninenik.com </a>
    <!-- แบบย่อหรือแบบสั้น -->
    <a @click.prevent="doSomething" :href="url"> Ninenik.com </a>
</template>