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

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: วิธีการ ใช้งาน vuetify คู่กับ vue.js

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

โดย MBMoo » 05/06/2020 6:01 pm

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

ข้างบน