چیت‌شیت Vue.js

1<script setup>2import { computed, ref } from "vue";34const count = ref(0);5const doubled = computed(() => count.value * 2);6</script>

1<template>2  <p v-if="hasAccess">دسترسی مجاز است.</p>3  <p v-else>برای ادامه وارد شوید.</p>4  <aside v-show="showHelp">راهنما</aside>5</template>

1<script setup>2const items = [3  { id: "a1", name: "One" },4  { id: "b2", name: "Two" },5];6</script>78<template>9  <li v-for="item in items" :key="item.id">{{ item.name }}</li>10</template>

1<script setup>2import { ref, watch } from "vue";34const query = ref("");5watch(query, (newQuery, oldQuery) => {6  console.log({ newQuery, oldQuery });7});8</script>

1<script setup lang="ts">2defineProps<{3  title: string;4  compact?: boolean;5}>();6</script>

1<script setup>2const emit = defineEmits(["select"]);3</script>45<template>6  <button @click="emit('select', 'item-1')">Select</button>7</template>

1<script setup>2import { ref } from "vue";3const name = ref("");4</script>56<template>7  <input v-model="name" autocomplete="name">8  <p>{{ name }}</p>9</template>

1<script setup>2import { onMounted, onUnmounted } from "vue";34function onResize() {5  console.log(window.innerWidth);6}78onMounted(() => window.addEventListener("resize", onResize));9onUnmounted(() => window.removeEventListener("resize", onResize));10</script>

1<script setup>2import UserCard from "./UserCard.vue";3</script>45<template>6  <UserCard title="Profile" />7</template>

1<template>2  <RouterLink to="/settings">Settings</RouterLink>3  <RouterView />4</template>