Vue.js前端框架教程1：Vue应用启动和Vue组件

文章目录

- - - Vue 应用
    - - Vue 应用的主要组成部分：
      - 启动 Vue 应用：
    - Vue组件
    - - 基础组件
      - 组件注册
      - 父子组件
      - 组件插槽（Slots）
      - 动态组件和 `keep-alive`

Vue 应用

Vue 应用由几个主要部分组成，每个部分都有其特定的角色和职责。以下是 Vue 应用的主要组成部分以及如何启动一个 Vue 应用的介绍：

Vue 应用的主要组成部分：

Vue实例（Vue Instance）：
- Vue 应用的核心，所有的 Vue 功能都是围绕着 Vue 实例展开的。
- 通过 new Vue({ ... }) 创建，其中大括号中的内容称为选项对象，可以包含数据、模板、方法等。
模板（Template）：
- Vue 实例的 template 选项定义了应用的 HTML 结构。
- 使用声明式渲染，允许你将 DOM 操作逻辑分离到 JavaScript 代码中。
数据（Data）：
- Vue 实例的 data 选项定义了应用的数据模型。
- Vue 实例的数据是响应式的，当数据变化时，视图会自动更新。
方法（Methods）：
- Vue 实例的 methods 选项定义了应用的行为。
- 方法可以响应用户交互，如点击事件，并可以更改数据。
生命周期钩子（Lifecycle Hooks）：
- Vue 实例的不同生命周期阶段会触发不同的钩子函数。
- 例如 created、mounted、updated 和 destroyed 等。
组件（Components）：
- Vue 的组件系统允许你将应用分解成独立、可复用的组件。
- 组件有自己的模板、数据和方法。
指令（Directives）：
- Vue 提供了一系列内置指令，如 v-model、v-if、v-for 等。
- 指令可以用于在模板中将 DOM 元素绑定到底层 Vue 实例的数据上。
插件（Plugins）：
- Vue 插件可以添加全局功能或通过全局方法、属性或组件扩展 Vue 的功能。
- 例如 Vue Router、Vuex 和 Vue CLI 都是插件。

启动 Vue 应用：

通过 CDN：
- 直接在 HTML 文件中通过 <script> 标签引入 Vue.js。
- 创建一个 Vue 实例并挂载到 DOM 元素上。

<!DOCTYPE html>
<html>
<head><title>Vue 应用</title><script src="https://unpkg.com/vue@3.2.31/dist/vue.global.prod.js"></script>
</head>
<body><div id="app">{{ message }}</div><script>const { createApp } = Vue;createApp({data() {return {message: 'Hello, Vue!'};}}).mount('#app');</script>
</body>
</html>

通过 Vue CLI：
- 使用 Vue CLI 创建项目，它提供了一个完整的开发环境，包括热重载、保存时 lint 检查等。
- 通过运行 vue create my-project 创建新项目。
- 进入项目目录，运行 npm run serve 或 yarn serve 启动开发服务器。
通过单文件组件（Single File Components, SFC）：
- 在 Vue CLI 项目中，可以使用 .vue 文件组织组件。
- 每个 .vue 文件包含 <template>、<script> 和 <style> 三个部分。

<template><div>{{ message }}</div>
</template><script>
export default {data() {return {message: 'Hello, Vue SFC!'};}
}
</script><style scoped>
div {color: green;
}
</style>

通过 Vite：
- Vite 是一个现代化的前端构建工具，它利用了原生 ES 模块特性，提供了快速的冷启动和即时模块热更新。
- 使用 Vite 创建项目，可以通过 npm create vite@latest 或 yarn create vite。
- 运行 npm run dev 或 yarn dev 启动开发服务器。

通过这些方法，你可以快速启动和开发一个 Vue 应用。Vue 的灵活性和易用性使得从简单的项目到复杂的单页面应用的构建都变得简单快捷。

Vue组件

Vue 组件是 Vue.js 的核心概念之一，它是自定义的可复用的组件，可以包含自己的模板、逻辑和样式。组件系统是 Vue.js 的一个重要特性，它允许开发者将界面拆分成独立、可复用的小块，每一块都是一个带有独立功能的组件。

基础组件

在 Vue 中，一个组件可以简单地定义为一个包含 template、script 和 style 的 .vue 文件。以下是一个基础组件的例子：

<!-- MyComponent.vue -->
<template><div><h1>{{ message }}</h1><button @click="reverseMessage">反转消息</button></div>
</template><script>
export default {data() {return {message: 'Hello, Vue!'};},methods: {reverseMessage() {this.message = this.message.split('').reverse().join('');}}
}
</script><style scoped>
h1 {color: #42b983;
}
</style>

组件注册

在 Vue 应用中，你需要注册组件才能使用它们。可以在局部（单个文件）或全局注册组件。

局部注册：

import MyComponent from './MyComponent.vue';export default {components: {MyComponent}
}

全局注册：

import Vue from 'vue';
import MyComponent from './MyComponent.vue';Vue.component('my-component', MyComponent);

父子组件

Vue 组件可以创建父子关系，子组件可以通过 props 接收来自父组件的数据，并通过 $emit 向父组件发送事件。

子组件（ChildComponent.vue）：

<template><div><p>{{ message }}</p><button @click="notifyParent">通知父组件</button></div>
</template><script>
export default {props: ['message'],methods: {notifyParent() {this.$emit('message-from-child', 'Hello from child!');}}
}
</script>

父组件：

<template><div><child-component :message="parentMessage" @message-from-child="handleMessageFromChild" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {parentMessage: 'Message from parent'};},methods: {handleMessageFromChild(message) {console.log(message); // 输出：Hello from child!}}
}
</script>

组件插槽（Slots）

插槽是 Vue.js 提供的一种分发内容的机制，允许你将内容从父组件传递到子组件的模板中。

子组件（ChildComponent.vue）：

<template><div><slot>默认内容</slot></div>
</template>

父组件：

<template><child-component><p>这是通过插槽传递的内容</p></child-component>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent}
}
</script>

动态组件和 `keep-alive`

Vue 提供了 <component> 标签，允许你动态地切换不同的组件。

<template><component :is="currentComponent" />
</template><script>
export default {data() {return {currentComponent: 'ComponentA'};}
}
</script>

使用 keep-alive 可以缓存不活动的组件实例，避免重复创建和销毁组件的性能损耗。

<template><keep-alive><component :is="currentComponent" /></keep-alive>
</template>

Vue 组件是构建大型应用的基础，它们使得代码更加模块化、可维护和可复用。通过组合不同的组件，你可以构建出复杂的用户界面。