Vue3 0基础入门，三分钟掌握vue3核心知识

下面用最易懂的方式讲解Vue3的核心知识，即使零基础也能轻松入门：

一、Vue3是什么？

想象你有一堆积木，每块积木可以拼成不同的形状。Vue3就像一套智能积木工具，帮你快速搭建网页界面。它的特点是：

响应式：数据变化时页面自动更新（就像温度计随温度自动变化）
组件化：把网页拆成可复用的积木块（比如按钮、导航栏）
易上手：只需要会HTML+CSS+JS基础就能开始

二、基础语法（搭积木的说明书）

1. 数据展示

<div>{{ 数据名称 }}</div>

把JS中的数据放到页面上，就像把名字写在卡片上：

<script setup>
const message = "你好，我是小明"
</script><template><h1>{{ message }}</h1>  <!-- 显示：你好，我是小明 -->
</template>

2. 常用指令（特殊标记）

指令	作用	示例
`v-if`	条件显示	`<p v-if="isShow">显示我</p>`
`v-for`	循环显示	`<li v-for="item in list">{{item}}</li>`
`v-bind`	绑定属性	`<img :src="图片地址">`
`v-on`	绑定事件	`<button @click="提交">确定</button>`
`v-model`	双向绑定（表单常用）	`<input v-model="用户名">`

3. 实际案例

<script setup>
import { ref } from 'vue'const isVIP = ref(true) // 是否是会员
const products = ref(['苹果', '香蕉', '牛奶']) // 商品列表
</script><template><!-- 条件显示 --><div v-if="isVIP" class="vip标志">尊享会员</div><!-- 循环列表 --><ul><li v-for="(item, index) in products" :key="index">{{ index+1 }}. {{ item }}</li></ul><!-- 表单绑定 --><input v-model="searchKey" placeholder="输入搜索关键词">
</template>

三、组件（可复用的积木块）

1. 创建组件

新建Button.vue文件：

<template><button class="my-btn" @click="handleClick"><slot></slot> <!-- 插槽：插入内容的位置 --></button>
</template><script setup>
const emit = defineEmits(['click']) // 声明事件function handleClick() {emit('click') // 触发点击事件
}
</script><style>
.my-btn {padding: 10px 20px;background: blue;color: white;
}
</style>

2. 使用组件

<script setup>
import MyButton from './Button.vue'function sayHello() {alert('你好！')
}
</script><template><MyButton @click="sayHello">点我打招呼 <!-- 插入到slot位置 --></MyButton>
</template>

四、响应式数据（自动更新的便签）

1. 创建响应式数据

<script setup>
import { ref, reactive } from 'vue'// 基础类型用ref
const count = ref(0)// 对象类型用reactive
const user = reactive({name: '小明',age: 20
})function addAge() {user.age++ // 修改会自动更新到页面
}
</script>

2. 自动更新示例

<template><p>{{ user.name }}今年{{ user.age }}岁</p><button @click="addAge">过生日</button>
</template>

点击按钮时，年龄显示会自动+1，无需手动刷新页面

五、组合式API（更灵活的代码组织）

1. 传统写法 vs 组合式

<script>
// 旧写法（选项式）
export default {data() {return { count: 0 }},methods: {add() { this.count++ }}
}
</script><script setup>
// 新写法（组合式）
const count = ref(0)
const add = () => count.value++
</script>

2. 逻辑复用示例

创建useCounter.js：

import { ref } from 'vue'export function useCounter(初始值 = 0) {const count = ref(初始值)const add = () => count.value++const reset = () => count.value = 初始值return { count, add, reset }
}

在组件中使用：

<script setup>
import { useCounter } from './useCounter'
const { count, add } = useCounter(10)
</script><template><button @click="add">{{ count }}</button>
</template>