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

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

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

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

by bolue » 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: 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 80 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 80 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

Top