Vue 3 入门教程：从基础知识到实战案例

Vue 3 入门教程：从基础知识到实战案例

第一阶段：基础知识

在开始学习 Vue 3 之前，首先要掌握前端的基础知识，包括 HTML、CSS 和 JavaScript。这些知识是理解 Vue.js 的关键。

HTML - 文档结构

HTML（超文本标记语言）是网页的基本结构。在学习 Vue.js 时，了解 HTML 的常用标签和语义化非常重要。语义化的 HTML，能使页面更加易于理解。例如：

<header>
    <h1>我的网站</h1>
</header>
<main>
    <article>
        <h2>第一篇文章</h2>
        <p>这是一篇关于 Vue.js 的文章。</p>
    </article>
</main>
<footer>
    <p>版权所有 &copy; 2023</p>
</footer>

CSS - 样式与布局

CSS（层叠样式表）用于为网页添加样式。在 Vue.js 应用中，合理使用 CSS 可以提高组件的可维护性。

• 选择器：使用选择器来选中需要应用样式的元素。
• 布局： Flexbox 和 Grid 是两种强大的布局模型，使得创建响应式界面变得简单。

示例：

.container {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.item {
    flex: 1;
    margin: 10px;
}

JavaScript - 语言基础

JavaScript 是前端开发的核心语言。需要掌握以下知识：

• 基础语法：变量、数据类型、函数等。
• DOM 操作：使用 JavaScript 操作 HTML 文档结构。
• 事件处理：通过用户事件（如点击）执行特定的 JavaScript 代码。
• 异步编程：理解 Promises、async/await 的使用方式，确保代码的异步执行。
• ES6+ 特性：箭头函数、解构赋值、模块化等特性将在 Vue 中得到广泛应用。

示例：

const add = (a, b) => a + b;
const result = add(2, 3);
console.log(result);

第二阶段：Vue 3 入门

Vue 3 概述

Vue.js 是一个渐进式的 JavaScript 框架，适用于构建用户界面。其核心概念包括组件、指令和响应式数据绑定。

环境搭建

1. 安装 Node.js 和 npm：访问 Node.js 官网 下载并安装。

2. 使用 Vue CLI 创建项目：

   在终端中执行以下命令来安装 Vue CLI 并创建一个新的 Vue 项目：

   npm install -g @vue/cli
   vue create my-project
   

   选择适合的配置，根据提示完成项目的创建。

Vue 组件基础

组件是 Vue 应用的基本构建块。你可以创建独立的、可重用的组件来组织你的应用。

创建简单的 Vue 组件

在 src/components 目录下创建一个 HelloWorld.vue 组件：

<template>
    <div>
        <h1>{{ message }}</h1>
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: 'Hello, Vue 3!'
        }
    }
}
</script>

<style scoped>
h1 {
    color: blue;
}
</style>

Vue 实例与基础指令

理解 Vue 的生命周期

Vue 实例的生命周期分为以下几个阶段：

1. 创建（beforeCreate, created）
2. 挂载（beforeMount, mounted）
3. 更新（beforeUpdate, updated）
4. 销毁（beforeDestroy, destroyed）

使用 Vue 实例，使用 mounted 钩子可以在组件挂载后执行代码：

mounted() {
    console.log('组件已挂载');
}

学习常用指令

• v-bind：动态绑定属性。
• v-model：创建双向数据绑定。
• v-if / v-else：条件渲染。
• v-for：列表渲染。
• v-show：切换元素的显示状态。

示例：

<template>
    <div>
        <h1 v-if="show">欢迎来到 Vue.js</h1>
        <button @click="toggle">切换显示</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            show: true
        }
    },
    methods: {
        toggle() {
            this.show = !this.show;
        }
    }
}
</script>

数据绑定与事件处理

理解数据绑定的原理

Vue.js 使用响应式数据绑定，当数据更新时，视图会自动更新。实现这种效果的关键是 Vue 的数据观察。

事件处理：使用 v-on

使用 v-on 指令处理用户事件：

<template>
    <button v-on:click="increment">点击我</button>
    <p>点击次数：{{ count }}</p>
</template>

<script>
export default {
    data() {
        return {
            count: 0
        }
    },
    methods: {
        increment() {
            this.count++;
        }
    }
}
</script>

计算属性与侦听器

计算属性

计算属性是基于响应式依赖进行缓存的。只有在相关依赖发生变化时，才会重新计算。

<template>
    <div>
        <input v-model="number" type="number">
        <p>平方：{{ squared }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            number: 0
        }
    },
    computed: {
        squared() {
            return this.number * this.number;
        }
    }
}
</script>

侦听器

侦听器用于观察数据的变化并作出反应，可以是数据变化的副作用。

<script>
export default {
    data() {
        return {
            name: ''
        }
    },
    watch: {
        name(newVal) {
            console.log(`姓名更新为：${newVal}`);
        }
    }
}
</script>

组件间通信

Props 进行父子组件通信

通过 Props 向子组件传递数据。

<!-- ParentComponent.vue -->
<template>
    <ChildComponent :message="parentMessage"/>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
    components: { ChildComponent },
    data() {
        return {
            parentMessage: '来自父组件的消息'
        }
    }
}
</script>

<!-- ChildComponent.vue -->
<template>
    <div>{{ message }}</div>
</template>

<script>
export default {
    props: ['message']
}
</script>

事件发射（$emit）

子组件通过 $emit 向父组件发送事件，从而实现反向通信。

<!-- ChildComponent.vue -->
<template>
    <button @click="sendMessage">发送消息</button>
</template>

<script>
export default {
    methods: {
        sendMessage() {
            this.$emit('message-sent', '你好，父组件！');
        }
    }
}
</script>

<!-- ParentComponent.vue -->
<template>
    <ChildComponent @message-sent="handleMessage"/>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
    components: { ChildComponent },
    methods: {
        handleMessage(msg) {
            console.log(msg);
        }
    }
}
</script>

样式与 CSS

使用样式（scoped 和 global）

在 Vue 组件中，可以使用 scoped 样式来限制样式的作用域。

<style scoped>
h1 {
    color: red;
}
</style>

使用 CSS Modules

CSS Modules 提供了一种为每个组件生成唯一类名的方式，避免样式冲突。

要启用 CSS Modules，只需在 Vue 文件中使用 module 关键字。

<template>
    <div :class="$style.someClass">Hello World</div>
</template>

<style module>
.someClass {
    background-color: blue;
}
</style>

总结

以上内容为 Vue 3 的基础知识和组件开发的入门教程。通过理解 HTML、CSS 和 JavaScript 的基本概念，再结合 Vue 3 的核心特性，你将能够构建出丰富的前端应用。在实现这些知识时，多进行实践和实验，将有助于你的成长和技术提升。