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

Cachel wood2024-12-18 12:27

文章目录

Vue 应用

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

Vue 应用的主要组成部分：

  1. Vue实例（Vue Instance）：

    • Vue 应用的核心，所有的 Vue 功能都是围绕着 Vue 实例展开的。
    • 通过 new Vue({ ... }) 创建，其中大括号中的内容称为选项对象，可以包含数据、模板、方法等。

  2. 模板（Template）：

    • Vue 实例的 template 选项定义了应用的 HTML 结构。
    • 使用声明式渲染，允许你将 DOM 操作逻辑分离到 JavaScript 代码中。

  3. 数据（Data）：

    • Vue 实例的 data 选项定义了应用的数据模型。
    • Vue 实例的数据是响应式的，当数据变化时，视图会自动更新。

  4. 方法（Methods）：

    • Vue 实例的 methods 选项定义了应用的行为。
    • 方法可以响应用户交互，如点击事件，并可以更改数据。

  5. 生命周期钩子（Lifecycle Hooks）：

    • Vue 实例的不同生命周期阶段会触发不同的钩子函数。
    • 例如 created、mounted、updated 和 destroyed 等。

  6. 组件（Components）：

    • Vue 的组件系统允许你将应用分解成独立、可复用的组件。
    • 组件有自己的模板、数据和方法。

  7. 指令（Directives）：

    • Vue 提供了一系列内置指令，如 v-model、v-if、v-for 等。
    • 指令可以用于在模板中将 DOM 元素绑定到底层 Vue 实例的数据上。

  8. 插件（Plugins）：

    • Vue 插件可以添加全局功能或通过全局方法、属性或组件扩展 Vue 的功能。
    • 例如 Vue Router、Vuex 和 Vue CLI 都是插件。

启动 Vue 应用：

  1. 通过 CDN ：
    • 直接在 HTML 文件中通过 <script> 标签引入 Vue.js。
    • 创建一个 Vue 实例并挂载到 DOM 元素上。
html 复制代码 
<!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>

  1. 通过 Vue CLI：

    • 使用 Vue CLI 创建项目，它提供了一个完整的开发环境，包括热重载、保存时 lint 检查等。
    • 通过运行 vue create my-project 创建新项目。
    • 进入项目目录，运行 npm run serve 或 yarn serve 启动开发服务器。

  2. 通过单文件组件（Single File Components, SFC）：

    • 在 Vue CLI 项目中，可以使用 .vue 文件组织组件。
    • 每个 .vue 文件包含 <template>、<script> 和 <style> 三个部分。
html 复制代码 
<template>
  <div>{{ message }}</div>
</template>

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

<style scoped>
div {
  color: green;
}
</style>
  1. 通过 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 文件。以下是一个基础组件的例子：

html 复制代码 
<!-- 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 应用中，你需要注册组件才能使用它们。可以在局部（单个文件）或全局注册组件。

  • 局部注册：
javascript 复制代码 
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
}
  • 全局注册：
javascript 复制代码 
import Vue from 'vue';
import MyComponent from './MyComponent.vue';

Vue.component('my-component', MyComponent);
父子组件

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

  • 子组件（ChildComponent.vue）：
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>
  • 父组件：
html 复制代码 
<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）：
html 复制代码 
<template>
  <div>
    <slot>默认内容</slot>
  </div>
</template>
  • 父组件：
html 复制代码 
<template>
  <child-component>
    <p>这是通过插槽传递的内容</p>
  </child-component>
</template>

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

export default {
  components: {
    ChildComponent
  }
}
</script>
动态组件和 keep-alive

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

html 复制代码 
<template>
  <component :is="currentComponent" />
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  }
}
</script>

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

html 复制代码 
<template>
  <keep-alive>
    <component :is="currentComponent" />
  </keep-alive>
</template>

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

相关推荐
左耳咚1 分钟前
如何解析 zip 文件
前端·javascript·面试
程序员小寒11 分钟前
前端高频面试题之Vue（初、中级篇）
前端·javascript·vue.js
陈辛chenxin18 分钟前
软件测试大赛Web测试赛道工程化ai提示词大全
前端·可用性测试·测试覆盖率
沿着路走到底20 分钟前
python 判断与循环
java·前端·python
Code知行合壹22 分钟前
AJAX和Promise
前端·ajax
大菠萝学姐32 分钟前
基于springboot的旅游攻略网站设计与实现
前端·javascript·vue.js·spring boot·后端·spring·旅游
心随雨下44 分钟前
TypeScript中extends与implements的区别
前端·javascript·typescript
Serverless 社区1 小时前
助力企业构建 AI 原生应用，函数计算FunctionAI 重塑模型服务与 Agent 全栈生态
大数据·人工智能
摇滚侠1 小时前
Vue 项目实战《尚医通》，底部组件拆分与静态搭建，笔记05
前端·vue.js·笔记·vue
双向331 小时前
CANN训练营实战指南：从算子分析到核函数定义的完整开发流程
前端
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件04Linux下V2Ray安装配置指南05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06BongoCat - 跨平台键盘猫动画工具07Labelme从安装到标注：零基础完整指南08《大数据技术原理与应用》实验报告三 熟悉HBase常用操作09智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践10看了下昨日泄露的苹果 App Store 源码……