0
Login
Cheatsheet Dilihat: 93 kali

Vue.js Cheatsheet – Directives, Components & Syntax Paling Sering Digunakan

Referensi cepat directive, component, dan sintaks Vue.js yang paling sering digunakan untuk membangun aplikasi web modern.

#1 import { createApp } from 'vue' 
Mengimpor fungsi createApp dari Vue 3
#2 createApp(App).mount('#app') 
Membuat dan menjalankan aplikasi Vue
#3 export default {} 
Export komponen Vue
#4 data(){ return { message:'Hello Vue' } } 
Mendefinisikan data pada komponen
#5 methods:{} 
Tempat mendefinisikan fungsi pada komponen
#6 computed:{} 
Mendefinisikan computed property
#7 watch:{} 
Mendefinisikan watcher untuk memantau perubahan data
#8 setup(){} 
Composition API setup function
#9 props:['title'] 
Mendefinisikan props pada komponen
#10 emits:['save'] 
Mendefinisikan event emit
#11 components:{MyComponent} 
Mendaftarkan komponen lokal
#12 <template>...</template> 
Template HTML komponen Vue
#13 <script>...</script> 
Script komponen Vue
#14 <style>...</style> 
Style komponen Vue
#15 v-bind:id='elementId' 
Binding atribut id
#16 :id='elementId' 
Shorthand v-bind
#17 v-bind:class='className' 
Binding class dinamis
#18 v-bind:style='styleObject' 
Binding style dinamis
#19 v-on:click='handleClick' 
Event click handler
#20 @click='handleClick' 
Shorthand v-on
#21 v-on:submit.prevent='submitForm' 
Submit form dengan prevent default
#22 v-on:keyup.enter='submit' 
Event enter key
#23 v-model='inputValue' 
Two-way binding input
#24 v-model.lazy='value' 
Update model saat change
#25 v-model.number='value' 
Konversi input ke number
#26 v-model.trim='value' 
Menghapus whitespace otomatis
#27 v-if='isVisible' 
Menampilkan elemen jika kondisi true
#28 v-else 
Alternatif kondisi v-if
#29 v-else-if='condition' 
Else if pada Vue
#30 v-show='isVisible' 
Menampilkan atau menyembunyikan elemen dengan CSS
#31 v-for='item in items' 
Loop array
#32 :key='item.id' 
Key unik pada loop
#33 v-html='rawHtml' 
Render HTML mentah
#34 v-text='message' 
Render teks
#35 v-once 
Render elemen hanya sekali
#36 v-pre 
Skip proses kompilasi Vue
#37 v-cloak 
Menyembunyikan template sampai Vue siap
#38 ref='inputRef' 
Membuat referensi elemen
#39 this.$refs.inputRef 
Mengakses ref pada Options API
#40 const inputRef=ref(null) 
Ref pada Composition API
#41 reactive({count:0}) 
Reactive object
#42 ref(0) 
Reactive primitive value
#43 computed(()=>count.value*2) 
Computed pada Composition API
#44 watchEffect(()=>{}) 
Reactive watcher otomatis
#45 onMounted(()=>{}) 
Lifecycle saat komponen mount
#46 onUpdated(()=>{}) 
Lifecycle saat update DOM
#47 onUnmounted(()=>{}) 
Lifecycle saat komponen dihapus
#48 beforeMount(){} 
Lifecycle sebelum mount
#49 mounted(){} 
Lifecycle setelah mount
#50 beforeUpdate(){} 
Lifecycle sebelum update
#51 updated(){} 
Lifecycle setelah update
#52 beforeUnmount(){} 
Lifecycle sebelum destroy
#53 inject('theme') 
Mengambil dependency
#54 emit('save') 
Mengirim event ke parent
#55 this.$emit('save') 
Emit event Options API
#56 <slot></slot> 
Slot default
#57 <slot name='header'></slot> 
Named slot
#58 <template v-slot:header> 
Menggunakan named slot
#59 <component :is='componentName'> 
Dynamic component
#60 keep-alive 
Menyimpan state komponen
#61 <transition> 
Menambahkan animasi
#62 <transition-group> 
Animasi list
#63 router-link to='/home' 
Link navigasi Vue Router
#64 router-view 
Tempat render halaman router
#65 this.$router.push('/home') 
Navigasi programmatic
#66 useRouter() 
Router Composition API
#67 useRoute() 
Mengakses data route
#68 createRouter() 
Membuat router
#69 createWebHistory() 
Mode history router
#70 path:'/home' 
Path route
#71 component:Home 
Komponen route
#72 redirect:'/login' 
Redirect route
#73 beforeEnter() 
Navigation guard route
#74 beforeEach() 
Global navigation guard
#75 v-bind="$attrs" 
Mewariskan atribut ke child
#76 inheritAttrs:false 
Menonaktifkan pewarisan atribut
#77 defineProps() 
Define props Composition API
#78 defineEmits() 
Define emit Composition API
#79 defineExpose() 
Expose method ke parent
#80 defineSlots() 
Define slot Composition API
#81 defineModel() 
Model binding Composition API
#82 nextTick(()=>{}) 
Menjalankan kode setelah DOM update
#83 app.use(router) 
Menggunakan plugin
#84 v-focus 
Menggunakan custom directive
#85 v-memo 
Optimasi render
#86 v-bind="$props" 
Meneruskan props
#87 v-bind="$attrs" 
Meneruskan atribut
#88 v-model:title='title' 
Custom v-model