วิธีการ ใช้งาน vuetify คู่กับ vue.js

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
MBMoo
PHP VIP Members
PHP VIP Members
โพสต์: 25365
ลงทะเบียนเมื่อ: 04/06/2020 10:05 am

วิธีการ ใช้งาน vuetify คู่กับ vue.js

โพสต์ที่ยังไม่ได้อ่าน โดย MBMoo »

วิธีการ ใช้งาน หรือตัวอย่างการใช้ 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>

</template>
ยกตัวอย่างด้วยการสร้าง ปุ่ม นะคะ

โค้ด: เลือกทั้งหมด

<template>
  <v-btn >
       submit
  </v-btn>
</template>
CSS Knowledge-1.png
CSS Knowledge-1.png (2.2 KiB) Viewed 6079 times

ยกตัวอย่างด้วยการสร้าง ช่อง input นะคะ solo คือเป็นช่อง input แบบเป็นกรอบ ถ้าใส่แค่ v-text-field เฉยๆ จะเป็นขีดเส้นตรงให้กรอกธรรมดา

โค้ด: เลือกทั้งหมด

<template>
  <v-text-field solo></v-text-field>
</template>
CSS Knowledge-2.png
CSS Knowledge-2.png (3.68 KiB) Viewed 6079 times

css vuetify ที่ใช้ใน vue นะคะ จะขึ้นต้น ด้วยตัว V นำหน้าหมดเลยค่ะ

อย่างตัว container ก็จะใช้เป็น v-container

โค้ด: เลือกทั้งหมด

<template>
  <v-container>
  
  </v-container>
</template>
card ก็จะใช้เป็น v-card

โค้ด: เลือกทั้งหมด

<template>
  <v-card>
  
  </v-card>
</template>
icon ก็จะใช้เป็น v-icon

โค้ด: เลือกทั้งหมด

<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
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 40