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

news2024/12/22 3:03:26

文章目录

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

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 元素上。
<!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> 三个部分。
<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 文件。以下是一个基础组件的例子：

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2263552.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

flink SQL实现mysql source sink

flink SQL实现mysql source sink

接上文&#xff1a;一文说清flink从编码到部署上线 环境说明&#xff1a;MySQL&#xff1a;5.7&#xff1b;flink&#xff1a;1.14.0&#xff1b;hadoop&#xff1a;3.0.0&#xff1b;操作系统&#xff1a;CentOS 7.6&#xff1b;JDK&#xff1a;1.8.0_401。 1.代码实现 1.1 E…
阅读更多...
知乎 PB 级别 TiDB 数据库集群管控实践

知乎 PB 级别 TiDB 数据库集群管控实践

以下文章来源于知乎技术专栏 &#xff0c;作者代晓磊 导读 在现代企业中&#xff0c;数据库的运维管理至关重要&#xff0c;特别是面对分布式数据库的复杂性和大规模集群的挑战。作为一款兼容 MySQL 协议的分布式关系型数据库&#xff0c;TiDB 在高可用、高扩展性和强一致性方…
阅读更多...
SpringBoot+Vue3实现阿里云视频点播 实现教育网站 在上面上传对应的视频，用户开会员以后才能查看视频

SpringBoot+Vue3实现阿里云视频点播 实现教育网站 在上面上传对应的视频，用户开会员以后才能查看视频

要使用阿里云视频点播&#xff08;VOD&#xff09;实现一个教育网站&#xff0c;其中用户需要成为会员后才能查看视频&#xff0c;这个过程包括上传视频、设置权限控制、构建前端播放页面以及确保只有付费会员可以访问视频内容。 1. 视频上传与管理 创建阿里云账号&#xff…
阅读更多...
【前端】 async 和 await 以及 generator生成器函数

【前端】 async 和 await 以及 generator生成器函数

一、背景 这一篇随机主要是想记录一下自己学习js中有关异步内容的东西。然后发现有人拿异步跟生成器函数进行比较了一下&#xff0c;因此一起学习了一下。 二、知识点相关内容及实验test 2.1 generator 生成器函数 generator函数的作用&#xff1a;每次访问返回函数中yield…
阅读更多...
智能座舱进阶-应用框架层-Handler分析

智能座舱进阶-应用框架层-Handler分析

首先明确&#xff0c; handler是为了解决单进程内的线程之间的通信问题的。我也需要理解Android系统中进程和线程的概念&#xff0c; APP启动后&#xff0c;会有三四个线程启动起来&#xff0c;其中&#xff0c;有一条mainUITread的线程&#xff0c;专门用来处理UI事件&#xf…
阅读更多...
windows openssl编译x64版libssl.lib，编译x64版本libcurl.lib，支持https，vs2015编译器

windows openssl编译x64版libssl.lib，编译x64版本libcurl.lib，支持https，vs2015编译器

不要纠结&#xff0c;直接选择用perl编译&#xff01; 告诫想要用弄成vs编译版的&#xff0c;暂时先别给自己增加麻烦 告诫&#xff0c;以下执行的每一步&#xff0c;都不要纠结 先安装环境 nasm 64位版本 https://www.nasm.us/pub/nasm/releasebuilds/2.16.01/win64/nasm-…
阅读更多...
汽车供应链 “剧变”开始，“智能感知潜在龙头”诞生

汽车供应链 “剧变”开始，“智能感知潜在龙头”诞生

智能汽车产业链“剧变”已经开启&#xff0c;智能感知软硬件能力的权重正在不断被放大。 比如满足高阶泊车的第二代AK2超声波传感器、满足人机共驾场景需求的电子外后视镜&#xff08;CMS&#xff09;、iTOF 3D成像视觉感知&#xff08;用于舱内监控&#xff09;等新产品&…
阅读更多...
Python+OpenCV系列：AI看图识人、识车、识万物

Python+OpenCV系列：AI看图识人、识车、识万物

在人工智能风靡全球的今天&#xff0c;用 Python 和 OpenCV 结合机器学习实现物体识别&#xff0c;不仅是酷炫技能&#xff0c;更是掌握未来的敲门砖。本篇博文手把手教你如何通过摄像头或图片输入&#xff0c;识别人、动物、车辆及其他物品&#xff0c;让你的程序瞬间具备 AI …
阅读更多...
JVM 详解

JVM 详解

一. JVM 内存区域的划分 1. 程序计数器 程序计数器是JVM中一块比较小的空间, 它保存下一条要执行的指令的地址. [注]: 与CPU的程序计数器不同, 这里的下一条指令不是二进制的机器语言, 而是Java字节码. 2. 栈 保存方法中的局部变量, 方法的形参, 方法之间的调用关系. 栈又…
阅读更多...
C# opencvsharp 流程化-脚本化-（2）ROI

C# opencvsharp 流程化-脚本化-（2）ROI

ROI ROI也是经常需要使用的方法。特别是在图像编辑中。ROI又称感兴趣的区域&#xff0c;但是图像是矩阵是矩形的&#xff0c;感兴趣的是乱八七糟的&#xff0c;所以还有一个Mask需要了解一下的。 public class RoiStep : IImageProcessingStep{public ImageProcessingStepType…
阅读更多...
wazuh-modules-sca-scan

wazuh-modules-sca-scan

sca模块主函数wm_sca_main -> wm_sca_start 检查policy文件中的每一个项目wm_sca_check_policy static int wm_sca_check_policy(const cJSON * const policy, const cJSON * const checks, OSHash *global_check_list) {if(!policy) {return 1;}const cJSON * const id c…
阅读更多...
uniapp 自定义图标03

uniapp 自定义图标03

插入工程&#xff0c;修改名称文件内容 编译运行
阅读更多...
在Windows本地用网页查看编辑服务器上的 jupyter notebook

在Windows本地用网页查看编辑服务器上的 jupyter notebook

​ Motivation: jupyter notebook 可以存中间变量&#xff0c;方便我调整代码&#xff0c;但是怎么用服务器的GPU并在网页上查看编辑呢&#xff1f; 参考 https://zhuanlan.zhihu.com/p/440080687 服务端(Ubuntu)&#xff1a; 激活环境 source activate my_env安装notebook …
阅读更多...
【YOLO 项目实战】（11）YOLO8 数据集与模型训练

【YOLO 项目实战】（11）YOLO8 数据集与模型训练

欢迎关注『youcans动手学模型』系列 本专栏内容和资源同步到 GitHub/youcans 【YOLO 项目实战】&#xff08;1&#xff09;YOLO5 环境配置与检测 【YOLO 项目实战】&#xff08;10&#xff09;YOLO8 环境配置与推理检测 【YOLO 项目实战】&#xff08;11&#xff09;YOLO8 数据…
阅读更多...
Ubuntu22.04上安装esp-idf

Ubuntu22.04上安装esp-idf

一、安装准备# 建议使用Ubuntu 20.04 或 Ubuntu 22.04 操作系统 为了在 Ubuntu 22.04 中使用 esp-idf&#xff0c;需要安装一些依赖包 sudo apt-get install git wget flex bison gperf python3\python3-pip python3-venv cmake ninja-build ccache\libffi-dev libssl-dev dfu…
阅读更多...
nginx-虚拟主机配置笔记

nginx-虚拟主机配置笔记

目录 nginx的安装可以查看nginx安装https://blog.csdn.net/m0_68472908/article/details/144609023?spm1001.2014.3001.5501 一、 基于域名 二、 基于IP 三、 基于端口 nginx的安装可以查看nginx安装https://blog.csdn.net/m0_68472908/article/details/144609023?spm100…
阅读更多...
AlipayHK支付宝HK接入-商户收款（PHP）

AlipayHK支付宝HK接入-商户收款（PHP）

一打开支付宝国际版 二、点开商户服务 三、下载源码
阅读更多...
Soul Android端稳定性背后的那些事

Soul Android端稳定性背后的那些事

前言&#xff1a;移动应用的稳定性对于用户体验和产品商业价值都有着至关重要的作用。应用崩溃会导致关键业务中断、用户留存率下降、品牌口碑变差、生命周期价值下降等影响&#xff0c;甚至会导致用户流失。因此&#xff0c;稳定性是APP质量构建体系中最基本和最关键的一环。当…
阅读更多...
深度学习模型 DeepSeek-VL2 及其消费级显卡需求分析

深度学习模型 DeepSeek-VL2 及其消费级显卡需求分析

DeepSeek-VL2 是由 DeepSeek 团队开发的一款先进的视觉语言模型&#xff0c;采用了混合专家&#xff08;MoE&#xff09;架构&#xff0c;旨在提升多模态理解能力。该模型包括三个版本&#xff1a;DeepSeek-VL2-Tiny、DeepSeek-VL2-Small 和 DeepSeek-VL2。每个版本具有不同的模…
阅读更多...
首批｜云轴科技ZStack成为开放智算产业联盟首批会员单位

首批｜云轴科技ZStack成为开放智算产业联盟首批会员单位

近日 &#xff0c;在Linux基金会AI & Data及中国开源软件推进联盟的指导之下&#xff0c;开放智算产业联盟成立大会在北京成功召开。在大会上&#xff0c;联盟首次公布了组织架构并颁发了首批会员单位证书。凭借ZStack AIOS平台智塔和在智算领域的技术创新&#xff0c;云轴…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023