1.เรียกใช้ vue.js (และอื่นๆเช่น Bootstrap และ Axios และ Font-awesom) ในส่วน <head></head>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
2.กำหนดตำแน่งสำหรับการแสดงผลใน HTML (ไว้ใน <body></body>)
<div id="app">
</div>
3.เขียน Sccript (ไว้ด้านล่างสุด ของ <body></body>)
<script>
new Vue({
el: '#app',
data () {
return {
info: null,
todayDate: new Date().toLocaleDateString()
}
},
methods: {
numberFormat(number) {
var number = parseInt(number) //conver to int
return number.toLocaleString()
},
fixTwoDigit(number){
var amount=parseFloat(number).toFixed(2)
var formattedString= amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
return formattedString
}
},
mounted () {
const targetURL ='https://covid19.ddc.moph.go.th/api/Cases/today-cases-by-provinces'
axios.get(targetURL)
.then(response => (this.info = response.data))
.then(response => (console.log(response)))
}
})
</script>
คำอธิบาย Script แต่ละส่วน option ของ vue (จะต้องวางเรียงกันตามลำดับ จะสลับกันไม่ได้)
1. data(){ } เป็นส่วนของการกำหนดข้อมูลทุกชนิดที่ตองการใช้ทั้งหมด
2. methods: { } เป็นส่วนที่ใช้ในการกำหนด function ต่างๆ ที่ต้องการใช้ทั้งหมด
3. mounted() { } เป็นส่วนที่ทำการแสดงผลเข้าใน Html ตามที่ระบุ id (id="app")
โดยส่วนนี้จะสามารถกำหนด activity ที่ต้องการกระทำทันทีได้ด้วย
เช่น การเรียกใช้ api ด้วย axios ตามตัวอย่าง เป็นต้น
*** methods: { } จะไม่มีวงเล็บ () ***ข้างในไม่ต้องระบุคำว่า function
ตัวอย่างFull
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>COVID-19</title>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body style='background-color:#fff8e5'>
<nav class="navbar navbar-expand-lg navbar-dark bg-default" style="background-color:#113946">
<div class="container-fluid">
<a href="index.html" class="navbar-brand">
<i class="fa-regular fa-hospital"></i>
COVID19-Weekly<sup>©</sup></a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
</div>
<div class="navbar-nav ms-auto">
</div>
</div>
</div>
</nav>
<div class="container">
<br>
<div class="row" style="text-align:center">
<center>
<div id="app">
<!-- {{info}} -->
<div class="row justify-content-md-center" >
<div class="col-md-auto">
<h3>รายงานสถานการณ์ COVID-19 ประจำสัปดาห์</h3>
<table border="0" class="table table-success table-striped table-bordered border-success">
<tbody>
<tr>
<td><b>ลำดับ </b></td>
<td><b>ปี พ.ศ. </b></td>
<td><b>สัปดาห์ </b></td>
<td><b>จังหวัด</b></td>
<td><b>รายใหม่</b></td>
<td><b>รวมทั้งหมด</b></td>
<td><b>ตายใหม่</b></td>
<td><b>ตายรวม</b></td>
<td><b>%ตาย</b></td>
<td><b>วันที่รายงาน</b></td>
</tr>
<tr v-for="(row, index) in info" >
<td v-if="row.province !='ทั้งประเทศ'">{{ index+1 }}</td>
<td v-if="row.province !='ทั้งประเทศ'">{{row.year}}</td>
<td v-if="row.province !='ทั้งประเทศ'">{{row.weeknum}}</td>
<td v-if="row.province !='ทั้งประเทศ'">{{row.province}}</td>
<td v-if="row.province !='ทั้งประเทศ'">{{row.new_case}}</td>
<td v-if="row.province !='ทั้งประเทศ'">{{ numberFormat(row.total_case) }}</td>
<td v-if="row.province !='ทั้งประเทศ'">{{row.new_death}}</td>
<td v-if="row.province !='ทั้งประเทศ'">{{row.total_death}}</td>
<td v-if="row.province !='ทั้งประเทศ'">{{ fixTwoDigit((row.total_death * 100) / row.total_case) }}</td>
<td v-if="row.province !='ทั้งประเทศ'">{{row.update_date}}</td>
</tr>
<tr v-for="row in info" >
<td v-if="row.province =='ทั้งประเทศ'"></td>
<td v-if="row.province =='ทั้งประเทศ'">{{row.year}}</td>
<td v-if="row.province =='ทั้งประเทศ'">{{row.weeknum}}</td>
<td v-if="row.province =='ทั้งประเทศ'">{{row.province}}</td>
<td v-if="row.province =='ทั้งประเทศ'">{{row.new_case}}</td>
<td v-if="row.province =='ทั้งประเทศ'">{{ numberFormat(row.total_case) }}</td>
<td v-if="row.province =='ทั้งประเทศ'">{{row.new_death}}</td>
<td v-if="row.province =='ทั้งประเทศ'">{{row.total_death}}</td>
<td v-if="row.province =='ทั้งประเทศ'">{{ fixTwoDigit((row.total_death * 100) / row.total_case) }}</td>
<td v-if="row.province =='ทั้งประเทศ'">{{row.update_date}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</center>
</div><!-- row -->
<br>
<footer>
<div class="row">
<font size=1 color=gray><center>
<p><i class="fa-regular fa-hospital"></i> COVID19-Weekly<sup>©</sup> by KidmatApps, Copyright 2024 </p>
</center></font>
</div>
</footer>
</div><!-- container -->
<!-- ///////////////////////VUE.JS/////////////////////// -->
<script>
new Vue({
el: '#app',
data () {
return {
info: null,
todayDate: new Date().toLocaleDateString()
}
},
methods: {
numberFormat(number) {
var number = parseInt(number) //conver to int
return number.toLocaleString()
},
fixTwoDigit(number){
var amount=parseFloat(number).toFixed(2)
var formattedString= amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
return formattedString
}
},
mounted () {
const targetURL ='https://covid19.ddc.moph.go.th/api/Cases/today-cases-by-provinces'
axios.get(targetURL)
.then(response => (this.info = response.data))
.then(response => (console.log(response)))
}
})
</script>
</body>
</html>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น