用一个完整 HTML 页面理解 Web 前端基础到进阶

源码

<!-- 1. 直接插变量 -->
<p>{{ name }}</p>

<!-- 2. JS 表达式 -->
<p>{{ name.toUpperCase() }}</p>
<p>{{ count * 2 + 1 }}</p>

<!-- 3. 三元判断 -->
<p>{{ count > 5 ? '多' : '少' }}</p>

<!-- 4. v-text 同效果（覆盖整个元素） -->
<p v-text="name"></p>

<!-- 5. v-html 渲染 HTML（小心 XSS） -->
<div v-html="<b>粗体</b>"></div>

<!-- 6. v-pre：跳过编译，原样输出 -->
<p v-pre>{{ 这串不会被解析 }}</p>

运行结果

源码

<!-- 1. 遍历数组 -->
<li v-for="item in list" :key="item.id">
  {{ item.name }} - {{ item.price }} 元
</li>

<!-- 2. 带索引 -->
<li v-for="(item, i) in list" :key="item.id">
  第 {{ i + 1 }} 个：{{ item.name }}
</li>

<!-- 3. 遍历对象 -->
<div v-for="(val, key) in obj" :key="key">
  {{ key }}: {{ val }}
</div>

<!-- 4. 遍历数字（1 到 5） -->
<span v-for="n in 5" :key="n">⭐</span>

运行结果

源码

<!-- 1. 调用函数 -->
<button @click="add">+1</button>

<!-- 2. 内联表达式 -->
<button @click="count++">+1</button>

<!-- 3. 传参 -->
<button @click="add(2)">+2</button>

<!-- 4. 事件修饰符 -->
<a @click.prevent="go">不会跳转</a>
<div @click.stop="fn">不冒泡</div>
<div @click.self="fn">只自己触发</div>
<div @click.once="fn">只触发一次</div>

<!-- 5. 按键修饰符 -->
<input @keyup.enter="submit">
<input @keyup.esc="cancel">
<input @keyup.ctrl.s="save">

运行结果

源码

import { ref, computed, watch } from 'vue'

const price = ref(10)
const qty = ref(1)

// 自动算出 total，依赖变了就重算
const total = computed(() => price.value * qty.value)

// 监听 qty 的变化（执行副作用）
watch(qty, (newVal, oldVal) => {
  console.log(`数量从 ${oldVal} 改成 ${newVal}`)
})

// 监听多个
watch([price, qty], ([p, q]) => {
  console.log('总价：', p * q)
})

// watchEffect：自动追踪用到的依赖
watchEffect(() => {
  console.log('price 或 qty 变了', price.value, qty.value)
})

运行结果

源码

// 子组件 MyCard.vue
<script setup>
const props = defineProps({
  title: String,
  count: { type: Number, default: 0 }
})
const emit = defineEmits(['like'])
</script>

<template>
  <div class="card">
    <h3>{{ title }}</h3>
    <!-- 默认插槽 -->
    <slot></slot>
    <!-- 具名插槽 -->
    <slot name="footer"></slot>
    <button @click="emit('like')">
      ❤ {{ count }}
    </button>
  </div>
</template>

// 父组件使用
<MyCard title="标题" :count="likes" @like="likes++">
  <p>这是默认插槽的内容</p>
  <template #footer>
    <small>脚注</small>
  </template>
</MyCard>

运行结果