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

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

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

bolue
PHP Super Hero Member
PHP Super Hero Member
Posts: 549
Joined: 04/06/2020 10:05 am

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

Post by bolue »

วิธีการ ใช้งาน หรือตัวอย่างการใช้ vuetify vue.js คู่กับ css ของ vuetify เพื่อทำงานควบคู่กัน ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML เพื่อเป็นการตกแต่งและออกแบบให้สวยงาม สามารถดู วิธีการติดตั้ง vue.js และ vuetify ได้ที่นี่ วิธีการติดตั้ง vue.js และ vuetify หลังจากติดตั้งทั้ง vue.js และ vuetify แล้ว เราก็จะสามารถใช้ vuetify ได้เลย


รูปแบบและโครงสร้างของ vue.js

Code: Select all

<template>

</template>

<script>
export default {

}
</script>

<style>

</style>

เวลาเราเขียน code ออก แบบ จะเขียนใน template นะคะ

Code: Select all

<template>

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

Code: Select all

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

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

Code: Select all

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

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

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

Code: Select all

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

Code: Select all

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

Code: Select all

<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
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 3 guests