Vue.js: قواعد القوالب

<!-- Copy and paste 30 times, nightmare... -->
<div class="product-card">
  <h3>iPhone 15 Pro</h3>
  <p>Price: $999</p>
  <button>Edit</button>
</div>
<div class="product-card">
  <h3>MacBook Pro</h3>
  <p>Price: $2499</p>
  <button>Edit</button>
</div>
<!-- ... And also 28 more ... -->

<template>
  <div v-for="product in products" :key="product.id" class="product-card">
    <h3>{{ product.name }}</h3>
    <p>Price: ${{ product.price }}</p>
    <button @click="editProduct(product.id)">Edit</button>
  </div>
</template>

<script setup>
const products = ref([
  { id: 1, name: 'iPhone 15 Pro', price: 999 },
  { id: 2, name: 'MacBook Pro', price: 2499 },
  // ... 30 items, each only 1 line 1 ...
])
function editProduct(id) {
  console.log('Editing product', id)
}
</script>

<template>
  <!-- 1. Automatically Responsive:Automatically updates when variables change -->
  <p>{{ message }}</p>
  
  <!-- 2. Support JS Expression(Cannot write statements)-->
  <p>{{ count * 2 + 1 }}</p>
  <p>{{ isVip ? 'VIP' : 'Regular' }}</p>
  <p>{{ items.length > 0 ? items[0].name : 'Empty' }}</p>
  
  <!-- 3. Supports ternary expressions,Arithmetic,Function Call -->
  <p>{{ new Date().getFullYear() }}</p>
  
  <!-- 4. Not supported: if/for/Variable Declaration (Use v-if/v-for instead) -->
  <!-- ❌ {{ if (x) { y } }}  // Wrong -->
  <!-- ✅ <p v-if=\"x\">y</p>     // Correct -->
  
  <!-- 5. Support for template strings -->
  <p>{{ `Hello, ${name}!` }}</p>
</template>

<template>
  <!-- Interpolation:You can add other content here -->
  <p>Welcome, {{ name }}!</p>
  
  <!-- v-text:Replace the entire element's content -->
  <p v-text="`Welcome, ${name}!`"></p>
  <!-- The above is equivalent to <p>Welcome, {{ name }}!</p> -->
</template>

<template>
  <!-- ✅ Safety:Content You Control -->
  <div v-html="markdownHtml"></div>
  
  <!-- ❌ Danger:User-entered HTML -->
  <div v-html="userComment"></div>
  <!-- User Input <script>alert('hacked')</script> Will be executed! -->
  
  <!-- ✅ Recommended: Use DOMPurify Cleanup -->
  <div v-html="DOMPurify.sanitize(userComment)"></div>
</template>

<template>
  <!-- This productId won't change → Use v-once to Reduce Reactive Overhead -->
  <span v-once>{{ productId }}</span>
  
  <!-- But this currentPrice Will change → Do not use v-once -->
  <span>{{ currentPrice }}</span>
</template>

<template>
  <!-- Complete Syntax -->
  <img v-bind:src="imageUrl" v-bind:alt="imageAlt">
  
  <!-- Abbreviation(Recommendations):Remove v-bind,Only : -->
  <img :src="imageUrl" :alt="imageAlt">
  
  <!-- Dynamic property names(v-bind Special Syntax)-->
  <img :[dynamicAttr]="value">
</template>

<template>
  <!-- 1. Object Syntax:Switch Based on Conditions class -->
  <div :class="{ active: isActive, 'text-danger': hasError }">
    Conditional classes
  </div>
  
  <!-- 2. Array Syntax:Apply multiple at the same time class -->
  <div :class="[activeClass, errorClass]">
    Multiple classes
  </div>
  
  <!-- 3. Trinomial Expression(Array + Object)-->
  <div :class="[isActive ? 'active' : '', { 'has-error': hasError }]">
    Mixed
  </div>
  
  <!-- 4. Nested Objects in an Array -->
  <div :class="[{ active: isActive }, errorClass]">
    Nested
  </div>
</template>

<template>
  <!-- 1. Object Syntax -->
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
    Styled
  </div>
  
  <!-- 2. Array Syntax(Merge multiple style Object)-->
  <div :style="[baseStyles, overridingStyles]">
    Multi styles
  </div>
  
  <!-- 3. CSS Variable(Vue 3 Recommendations)-->
  <div :style="{ '--main-color': mainColor }">
    With CSS variables
  </div>
</template>

<template>
  <!-- Complete Syntax -->
  <button v-on:click="handleClick">Click</button>
  
  <!-- Abbreviation(Recommendations)-->
  <button @click="handleClick">Click</button>
  
  <!-- Inline Processor(Write the simple logic directly)-->
  <button @click="count++">Increment</button>
  
  <!-- Passing Parameters -->
  <button @click="handleClick('arg1', $event)">Click</button>
</template>

<template>
  <!-- 1. .stop:Prevent Bubbling(e.stopPropagation())-->
  <button @click.stop="handleClick">Stop propagation</button>
  
  <!-- 2. .prevent:Prevent the default behavior(e.preventDefault())-->
  <form @submit.prevent="handleSubmit">Submit</form>
  
  <!-- 3. .once:Triggered only once -->
  <button @click.once="handleClick">Click once</button>
  
  <!-- 4. .self:Only event.target This is triggered only if it is the current element -->
  <div @click.self="handleClick">Self only</div>
  
  <!-- 5. .capture:Using the Capture Phase -->
  <div @click.capture="handleClick">Capture</div>
  
  <!-- 6. .passive:Do not prevent the default behavior(Performance Optimization)-->
  <div @scroll.passive="onScroll">Passive scroll</div>
  
  <!-- 7. Keyboard Modifiers -->
  <input @keyup.enter="submit">     <!-- Enter Key -->
  <input @keyup.esc="cancel">       <!-- Esc Key -->
  <input @keyup.tab="nextField">    <!-- Tab Key -->
  <input @keyup.delete="deleteItem"> <!-- Delete Key -->
  
  <!-- 8. Mouse Modifiers -->
  <button @click.left="leftClick">Left</button>
  <button @click.right.prevent="rightClick">No right click</button>
  <button @click.middle="middleClick">Middle</button>
  
  <!-- 9. System Modifiers(Key combinations)-->
  <button @click.ctrl="save">Ctrl + Click</button>
  <button @click.ctrl.exact="save">Accurate Ctrl(You cannot add other keys)</button>
</template>

<template>
  <!-- Combinations of Multiple Modifiers(Execute in order)-->
  <button @click.stop.prevent="handle">Stop + Prevent</button>
  
  <!-- is effectively equivalent to -->
  <button @click="(e) => { e.stopPropagation(); e.preventDefault(); handle(); }">
    Manual
  </button>
</template>

<template>
  <!-- ✅ Sure.(Expression,Has a return value)-->
  <p>{{ count + 1 }}</p>
  <p>{{ isVip ? 'VIP' : 'Regular' }}</p>
  <p>{{ items.filter(i => i.active).length }}</p>
  
  <!-- ❌ That won't work.(Statement,No return value)-->
  <!-- <p>{{ const x = 1 }}</p>      // Wrong: Variable Declaration -->
  <!-- <p>{{ if (x) { y } }}</p>     // Wrong: if Statement -->
  <!-- <p>{{ for (i of arr) {} }}</p> // Wrong: for Loop -->
  
  <!-- ✅ Switch to v-if / v-for Instructions -->
  <p v-if="x">y</p>
  <div v-for="i in arr" :key="i.id">{{ i.name }}</div>
</template>

<template>
  <!-- Simple:Expression -->
  <p>{{ price * quantity }}</p>
  
  <!-- Complex:Computed Properties(computed)-->
  <p>{{ totalWithTax }}</p>
</template>

<template>
  <!-- Skip compiling this element,{{ }} Display as is -->
  <span v-pre>{{ this is literal, not interpolated }}</span>
</template>

<template>
  <!-- v-cloak Make elements invisible until compilation is complete -->
  <p v-cloak>{{ message }}</p>
</template>

<style>
[v-cloak] { display: none; }
</style>

<template>
  <div class="product-card">
    <h3>{{ product.name }}</h3>
    <p class="price">${{ product.price }}</p>
    <span :class="['badge', stockStatusClass]">
      {{ stockStatusText }}
    </span>
    <button :disabled="product.stock === 0" @click="addToCart">
      Add to Cart
    </button>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  product: { type: Object, required: true }
})

const stockStatusClass = computed(() => {
  if (props.product.stock === 0) return 'out-of-stock'
  if (props.product.stock < 10) return 'low-stock'
  return 'in-stock'
})

const stockStatusText = computed(() => {
  if (props.product.stock === 0) return 'Out of Stock'
  if (props.product.stock < 10) return `Only ${props.product.stock} left`
  return 'In Stock'
})

function addToCart() {
  console.log('Added', props.product.name)
}
</script>

<template>
  <!-- Variable Interpolation -->
  <p>{{ username }}</p>
  
  <!-- Expression Interpolation -->
  <p>{{ count * 2 + 1 }}</p>
  
  <!-- Trinomial Expression -->
  <p v-if="score >= 60">Passed</p>
  <p v-else>Failed</p>
  
  <!-- Function Call -->
  <p>{{ formatDate(new Date()) }}</p>
  
  <!-- Object Access -->
  <p>{{ user.profile.name }}</p>
</template>

<template>
  <!-- 1. Basic Binding -->
  <img :src="imageUrl">
  
  <!-- 2. Dynamic property names -->
  <img :[attrName]="value">
  
  <!-- 3. Object Syntax(class)-->
  <div :class="{ active: isActive }">A</div>
  
  <!-- 4. Array Syntax(class)-->
  <div :class="[activeClass, errorClass]">B</div>
  
  <!-- 5. String Concatenation(href)-->
  <a :href="`/users/${userId}`">Profile</a>
</template>

<template>
  <!-- 1. Just a click -->
  <button @click="handleClick">Click</button>
  
  <!-- 2. Inline Statements -->
  <button @click="count++">+</button>
  
  <!-- 3. Passing Parameters + event Object -->
  <button @click="handleDelete(item.id, $event)">Delete</button>
  
  <!-- 4. Modifier Chain -->
  <button @click.stop.prevent="handle">Save</button>
  
  <!-- 5. Keyboard shortcuts -->
  <input @keyup.ctrl.enter="submit">
</template>