外观
Skip to content 查看源代码：
查看源代码：
vue-primer.md
---
title: Vue.js 入门
createTime: 2025/8/17
categories:
- IT
tags:
- vue
- front-end
---
## 结构
```vue
<template>
<!-- 模板 -->
</template>
<script setup>
/* JS */
</script>
<style scoped>
/* CSS */
</style>
```
## 模板
可以通过 `{{ text }}` 将对应的文本值插入到 HTML 中。
:::demo vue
```vue
<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 是否存在。
例如
:::demo vue
```vue
<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 的值。
:::demo vue
```vue
<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` 访问值。
:::demo vue
```vue
<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
:::tip 注意
`v-for` 的格式为 `"value in object"` 或 `"(value, key) in object"`
:::
:::demo vue
```vue
<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` 阻止默认行为。
:::demo vue
```vue
<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 上，例如
:::demo vue
```vue
<template>
<p> 你的下一句话是： {{ message }} </p>
<span> 你： </span>
<input v-model="message" placeholder="说话……" />
</template>
<script setup>
import { ref } from 'vue'
const message = ref('');
</script>
```
:::
复选框的默认行为是绑定布尔值，但是你可以指定 `value`，就可以将多个复选框绑定在一个变量上。此时变量就存储了选择的 `value` 的列表。
:::demo vue
```vue
<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>
```
:::
## 组件组合
可以通过
```js
import Component from 'SFC.vue'
```
导入一个组件，然后就可以用 `<Component attr=val> inner </Component>` 使用组件了。
下面来看看如何在自定义组件接收这些参数。
### defineProps
可以使用 `defineProps` 宏来接收属性。
语法是这样的：
```js
const props = defineProps({
name: String, // 类型应大写
activeFollowers: { // 驼峰命名法
type: Number,
default: 0 // 设置默认值
}
})
```
### slot
标签 `<slot>` 标记了插槽内容的渲染位置。
```vue
<template>
<slot> 默认值 </slot>
</template>
```