วิธีการ ใช้งาน หรือตัวอย่างการใช้ vuetify
vue.js คู่กับ
css ของ vuetify เพื่อทำงานควบคู่กัน ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร
HTML เพื่อเป็นการตกแต่งและออกแบบให้สวยงาม สามารถดู วิธีการติดตั้ง vue.js และ vuetify ได้ที่นี่
วิธีการติดตั้ง vue.js และ vuetify หลังจากติดตั้งทั้ง vue.js และ vuetify แล้ว เราก็จะสามารถใช้ vuetify ได้เลย
รูปแบบและโครงสร้างของ vue.js
โค้ด: เลือกทั้งหมด
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>
เวลาเราเขียน code ออก แบบ จะเขียนใน template นะคะ
ยกตัวอย่างด้วยการสร้าง ปุ่ม นะคะ
โค้ด: เลือกทั้งหมด
<template>
<v-btn >
submit
</v-btn>
</template>
- CSS Knowledge-1.png (2.2 KiB) Viewed 6164 times
ยกตัวอย่างด้วยการสร้าง ช่อง input นะคะ solo คือเป็นช่อง input แบบเป็นกรอบ ถ้าใส่แค่ v-text-field เฉยๆ จะเป็นขีดเส้นตรงให้กรอกธรรมดา
โค้ด: เลือกทั้งหมด
<template>
<v-text-field solo></v-text-field>
</template>
- CSS Knowledge-2.png (3.68 KiB) Viewed 6164 times
css vuetify ที่ใช้ใน vue นะคะ จะขึ้นต้น ด้วยตัว V นำหน้าหมดเลยค่ะ
อย่างตัว container ก็จะใช้เป็น v-container
โค้ด: เลือกทั้งหมด
<template>
<v-container>
</v-container>
</template>
card ก็จะใช้เป็น v-card
icon ก็จะใช้เป็น v-icon
สามารถเรียนรู้เรื่องอื่นๆ เพิ่มเติมได้ที่
การ ติดตั้ง vue.js
viewtopic.php?f=78&t=67916
วิธีการ ค้นหาด้วยการใช้ watch โดย vue.js
viewtopic.php?f=78&t=67908
วิธีการ การเรียกใช้ methods โดย vue.js
viewtopic.php?f=78&t=67909
วิธีการ เรียนใช้ dialog จาก components โดย vue.js
viewtopic.php?f=78&t=67910
วิธีการ ใช้ Grid ออกแบบเป็น responsive design โดย vuetify
viewtopic.php?f=73&t=67912
วิธีการ ใช้งาน vuetify คู่กับ vue.js
viewtopic.php?f=73&t=67917
วิธีการ ใช้งาน หรือตัวอย่างการใช้ vuetify [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/5087-vue.html]vue.js[/url] คู่กับ [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2193-css-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]css[/url] ของ vuetify เพื่อทำงานควบคู่กัน ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2026-html-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]HTML[/url] เพื่อเป็นการตกแต่งและออกแบบให้สวยงาม สามารถดู วิธีการติดตั้ง vue.js และ vuetify ได้ที่นี่ [url=https://www.mindphp.com/forums/viewtopic.php?f=78&t=67916&p=190043#p190043]วิธีการติดตั้ง vue.js และ vuetify[/url] หลังจากติดตั้งทั้ง vue.js และ vuetify แล้ว เราก็จะสามารถใช้ vuetify ได้เลย
รูปแบบและโครงสร้างของ vue.js
[code]<template>
</template>
<script>
export default {
}
</script>
<style>
</style>[/code]
เวลาเราเขียน code ออก แบบ จะเขียนใน template นะคะ
[code]<template>
</template>
[/code]
ยกตัวอย่างด้วยการสร้าง ปุ่ม นะคะ
[code]<template>
<v-btn >
submit
</v-btn>
</template>[/code]
[attachment=1]CSS Knowledge-1.png[/attachment]
ยกตัวอย่างด้วยการสร้าง ช่อง input นะคะ solo คือเป็นช่อง input แบบเป็นกรอบ ถ้าใส่แค่ v-text-field เฉยๆ จะเป็นขีดเส้นตรงให้กรอกธรรมดา
[code]<template>
<v-text-field solo></v-text-field>
</template>[/code]
[attachment=0]CSS Knowledge-2.png[/attachment]
[color=#FF0000][b]css vuetify ที่ใช้ใน vue นะคะ จะขึ้นต้น ด้วยตัว V นำหน้าหมดเลยค่ะ[/b] [/color]
อย่างตัว container ก็จะใช้เป็น v-container
[code]<template>
<v-container>
</v-container>
</template>[/code]
card ก็จะใช้เป็น v-card
[code]<template>
<v-card>
</v-card>
</template>[/code]
icon ก็จะใช้เป็น v-icon
[code]<template>
<v-icon>
</v-icon>
</template>[/code]
สามารถเรียนรู้เรื่องอื่นๆ เพิ่มเติมได้ที่
การ ติดตั้ง vue.js https://www.mindphp.com/forums/viewtopic.php?f=78&t=67916
วิธีการ ค้นหาด้วยการใช้ watch โดย vue.js https://www.mindphp.com/forums/viewtopic.php?f=78&t=67908
วิธีการ การเรียกใช้ methods โดย vue.js https://www.mindphp.com/forums/viewtopic.php?f=78&t=67909
วิธีการ เรียนใช้ dialog จาก components โดย vue.js https://www.mindphp.com/forums/viewtopic.php?f=78&t=67910
วิธีการ ใช้ Grid ออกแบบเป็น responsive design โดย vuetify https://www.mindphp.com/forums/viewtopic.php?f=73&t=67912
วิธีการ ใช้งาน vuetify คู่กับ vue.js https://www.mindphp.com/forums/viewtopic.php?f=73&t=67917