Vue.js Syntax Guide
| Concept | Syntax |
|---|---|
| Component | <template>, <script setup>, <style>import Component from "./components/Component.vue" |
| Props | const props = defineProps({ propName: { type: String } })props.propName |
| Reactive Variable | import { ref } from 'vue'const variableName = ref(initialValue) |
| Interpolation | {{ variableName }} |
| Binding | v-bind:attribute="variableName", :attribute="variableName" |
| Class Binding | :class="{ 'class-name': condition }" |
| Bi-directional Binding | v-model="variableName" |
| Event Handling | v-on:event="methodName", @event="methodName" |
| Emits | const emit = defineEmits(['event-name'])emit('event-name', payload) |
| Conditional Rendering | v-if="condition", v-else-if="condition", v-else |
| Render List | v-for="item in items", :key="item.id" |
| Watch | import { watch } from 'vue'watch(variableName, (newValue, oldValue) => { /* ... */ }) |
Additional Resources
You may also access and use the following resources during the exam without penalty:
- Mozilla Developer Network (MDN): https://developer.mozilla.org/en-US/
- Vue.js Documentation: https://vuejs.org/guide/introduction.html
- TailwindCSS Documentation: https://tailwindcss.com/docs/styling-with-utility-classes
- DaisyUI Documentation: https://daisyui.com/components/