วิธีการ ใช้งาน vuetify คู่กับ vue.js
โพสต์แล้ว: 05/06/2020 6:01 pm
วิธีการ ใช้งาน หรือตัวอย่างการใช้ vuetify vue.js คู่กับ css ของ vuetify เพื่อทำงานควบคู่กัน ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML เพื่อเป็นการตกแต่งและออกแบบให้สวยงาม สามารถดู วิธีการติดตั้ง vue.js และ vuetify ได้ที่นี่ วิธีการติดตั้ง vue.js และ vuetify หลังจากติดตั้งทั้ง vue.js และ vuetify แล้ว เราก็จะสามารถใช้ vuetify ได้เลย
รูปแบบและโครงสร้างของ vue.js
เวลาเราเขียน code ออก แบบ จะเขียนใน template นะคะ
ยกตัวอย่างด้วยการสร้าง ปุ่ม นะคะ
ยกตัวอย่างด้วยการสร้าง ช่อง input นะคะ solo คือเป็นช่อง input แบบเป็นกรอบ ถ้าใส่แค่ v-text-field เฉยๆ จะเป็นขีดเส้นตรงให้กรอกธรรมดา
css vuetify ที่ใช้ใน vue นะคะ จะขึ้นต้น ด้วยตัว V นำหน้าหมดเลยค่ะ
อย่างตัว container ก็จะใช้เป็น v-container
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
รูปแบบและโครงสร้างของ vue.js
โค้ด: เลือกทั้งหมด
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>
เวลาเราเขียน code ออก แบบ จะเขียนใน template นะคะ
โค้ด: เลือกทั้งหมด
<template>
</template>
โค้ด: เลือกทั้งหมด
<template>
<v-btn >
submit
</v-btn>
</template>
ยกตัวอย่างด้วยการสร้าง ช่อง input นะคะ solo คือเป็นช่อง input แบบเป็นกรอบ ถ้าใส่แค่ v-text-field เฉยๆ จะเป็นขีดเส้นตรงให้กรอกธรรมดา
โค้ด: เลือกทั้งหมด
<template>
<v-text-field solo></v-text-field>
</template>
css vuetify ที่ใช้ใน vue นะคะ จะขึ้นต้น ด้วยตัว V นำหน้าหมดเลยค่ะ
อย่างตัว container ก็จะใช้เป็น v-container
โค้ด: เลือกทั้งหมด
<template>
<v-container>
</v-container>
</template>
โค้ด: เลือกทั้งหมด
<template>
<v-card>
</v-card>
</template>
โค้ด: เลือกทั้งหมด
<template>
<v-icon>
</v-icon>
</template>
การ ติดตั้ง 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