结构

<template>
    <!-- 模板 -->
</template>

<script setup>
    /* JS */
</script>

<style scoped>
    /* CSS */
</style>

模板

可以通过 {{ text }} 将对应的文本值插入到 HTML 中。

<template>
    处理特殊字符：{{ s }}
    <br/>
    计算：{{i}} + 514 = {{ i + 514 }}
</template>

<script setup>
    const s = '<YES&NO>';
    const i = 114;
</script>

绑定

可以通过 :attr="expr" 将 HTML 的属性绑定到表达式。

对于 :style，expr 可以是一个对象，键通常使用驼峰命名法。
对于 :class，expr 也可以是一个对象，值是 true/false，控制这个 class 是否存在。

例如

<template>
    <span :id="spanId" :style="myStyle"> 文本 </span>
</template>

<script setup>
    import { ref } from 'vue';

    const color = 'red';
    const fontSize = 16;
    const fontWeight = 'bold';
    const spanId = 'id1';

    const myStyle = {
        color: color,
        fontSize: fontSize + 'px',
        fontWeight: fontWeight
    };
</script>

响应式：ref 和 computed

可以使用 ref 来声明响应式状态，它会在改变的时候自动更新 HTML。

在模板中顶层的 ref 会被自动解包；在 JS 中，可以使用 <ref>.value 来读写 ref 的值。

<template>
    1+...+100 = {{ sum }}
</template>

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

    const sum = ref(0);
    for (var i = 1; i <= 100; i++) {
        sum.value += i;
    }
</script>

有时需要把复杂的表达式单独拆出来。如何让这个表达式也有依赖追踪的特性？可以使用 computed。这个函数也会返回一个 ref，也可以通过在 JS 中用 .value 访问值。

<template>
    1+...+{{ n }} = {{ sum }}
</template>

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

    const n = ref(100);
    const sum = computed(() => n.value*(n.value+1)/2);
</script>

v-if 和 v-for

注意

v-for 的格式为 "value in object" 或 "(value, key) in object"

<template>
    <ul>
        <li v-for="i in n">
            <span v-if="i%4===0"> {{ i }} 是 4 的倍数！ </span>
            <span v-else-if="i%2===0"> {{ i }} 是偶数！ </span>
            <span v-else> {{ i }} 是奇数！ </span>
        </li>
    </ul>
</template>

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

    const n = ref(10);
</script>

事件

可以通过 @event="handler" 监听事件。其中的 handler 可以是一个内联语句或是函数。

常用的事件有（可以通过 . 串联修饰符，比如）：

• @click
  • @click.left
  • @click.right
  • @click.middle
  • @click.meta.exact
    （meta 是 Windows 或 Command 键）
    （.exact 必须没有其他键按下才触发）
• @keyup
  • @keyup.enter
  • @keyup.ctrl.alt.a
    （在按住 Ctrl, Alt 时松开 A）
• @submit
  在表单中使用

另外还有其他事件修饰符，例如 .stop 停止向上传递，.prevent 阻止默认行为。

<template>
    <div @keyup="rpd" class="full-screen">
        <p>rp = {{ rp }}</p>
        <p>按任意键打比赛，消耗人品 <br/>（请确保焦点在按钮上）</p>
        <button @click="rp++"> rp++ </button>
    </div>
</template>

<script setup>
    import { ref } from 'vue';

    const rp = ref(0);
    
    function rpd(event) {
        if (rp.value === 0) {
            alert('你的人品已用完！');
        } else {
            rp.value--;
        }
    }
</script>

输入绑定

使用 v-model 属性可以将输入绑定到一个 ref 上，例如

<template>
    <p> 你的下一句话是： {{ message }} </p>
    <span> 你： </span>
    <input v-model="message" placeholder="说话……" />
</template>

<script setup>
    import { ref } from 'vue'
    const message = ref('');
</script>

复选框的默认行为是绑定布尔值，但是你可以指定 value，就可以将多个复选框绑定在一个变量上。此时变量就存储了选择的 value 的列表。

<template>
    <div> 你付了：{{ total }} 元</div>

    <span v-for="denomination in denominations">
        <input type="checkbox" :id="'RMB' + denomination" :value="denomination" v-model="checkedDenominations" />
        <label :for="'RMB' + denomination"> {{ denomination }} 元 </label>
    </span>
</template>

<script setup>
    import { ref, computed } from 'vue';

    const denominations = ref(
        [1, 2, 5, 10, 20, 50, 100]
    );

    const checkedDenominations = ref([]);

    const total = computed(() =>
        checkedDenominations.value.reduce(
            (acc, cur) => acc + Number(cur), 0
        )
    );
</script>

组件组合

可以通过

import Component from 'SFC.vue'

导入一个组件，然后就可以用 <Component attr=val> inner </Component> 使用组件了。

下面来看看如何在自定义组件接收这些参数。

defineProps

可以使用 defineProps 宏来接收属性。

语法是这样的：

const props = defineProps({
    name: String,  // 类型应大写
    activeFollowers: {  // 驼峰命名法
        type: Number,
        default: 0  // 设置默认值
    }
})

slot

标签 <slot> 标记了插槽内容的渲染位置。

<template>
    <slot> 默认值 </slot>
</template>