文章目录
- 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 组件是构建大型应用的基础，它们使得代码更加模块化、可维护和可复用。通过组合不同的组件，你可以构建出复杂的用户界面。
