当前位置：首页 > news >正文

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

news 来源：原创 2025/5/14 15:47:24

下面用最易懂的方式讲解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>