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

文章目录

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

vue中验证码的实现方式

vue中验证码的实现方式

在写登录页的时候有的系统会让你也进行一下验证码绘制&#xff0c;那么验证码如何实现的呢&#xff1f;我在写登录页的时候通过将登录框&#xff0c;验证码分开页面来写&#xff0c;最后将它们变成标签来导入到我的样式页面中&#xff0c;这样写不仅方便&#xff0c;更容易修改…
阅读更多...
致远互联OA使用问题及解决方法记录（个人）

致远互联OA使用问题及解决方法记录（个人）

1、更换设备登录账号出现绑定要求 解决&#xff1a;后台管理员账号——M3安全管理——安全设置——删除绑定 2、审批消息错误回退 解决&#xff1a;协同工作——一已办事项——取回——重新审批/流程监督里撤回/流程索道节点回退 3、签章图片在表单上显示过大 解决&#x…
阅读更多...
《计算机组成及汇编语言原理》阅读笔记：p9-p27

《计算机组成及汇编语言原理》阅读笔记：p9-p27

《计算机组成及汇编语言原理》学习第 2 天&#xff0c;p9-p27 总结&#xff0c;总计 19 页。 一、技术总结 1.quantum physics(量子物理学) (1)quantum(量子) quantum的本意是&#xff1a;c. the smallest amount of sth(量子)。 In physics, a quantum is the minimum am…
阅读更多...
java_章节作业

java_章节作业

第1题 package com.hspedu.homework;/*** author:寰愬悏瓒&#xfffd;* date:2024/12/19 version:1.0*/ public class Homework01 {public static void main(String[] args) {//初始化Person对象数组&#xff0c;有3个Person对象&#xff1b;Person[] persons new Person[3];…
阅读更多...
Audiocraft智能音频和音乐生成工具部署及使用

Audiocraft智能音频和音乐生成工具部署及使用

1、概述 Facebook开源了一款名为AudioCraft的AI音频和音乐生成工具。 该工具可以直接从文本描述和参考音乐生成高质量的音频和音乐。AudioCraft包含MusicGen、AudioGen和EnCodec三个模型&#xff0c;分别实现音乐生成、音频生成和自定义音频模型构建。 2、项目地址 https://…
阅读更多...
华为云计算HCIE笔记02

华为云计算HCIE笔记02

第二章&#xff1a;华为云Stack规划设计 交付总流程 准备工作&#xff1a;了解客户的基本现场&#xff0c;并且对客户的需求有基本的认知。 HLD方案BOQ报价设备采购和设备上架 2.安装部署流程 硬件架构设计 硬件设备选配 设备上架与初始化配置 准备相关资料&#xff08;自动下载…
阅读更多...
StarRocks：存算一体模式部署

StarRocks：存算一体模式部署

目录 一、StarRocks 简介 二、StarRocks 架构 2.1 存算一体 2.2 存算分离 三、前期准备 3.1前提条件 3.2 集群规划 3.3 配置环境 3.4 准备部署文件 四、手动部署 4.1 部署FE节点 4.2 部署BE节点 4.3 部署CN节点&#xff08;可选&#xff09; 4.4 FE高可用…
阅读更多...
红米Note 9 Pro5G刷小米官方系统

红米Note 9 Pro5G刷小米官方系统

前言 刷机有2种方式&#xff1a;线刷 和 卡刷。 线刷 线刷&#xff1a;需要用电脑刷机工具&#xff0c;例如&#xff1a;XiaoMiFlash.exe&#xff0c;通过电脑和数据线对设备进行刷机。 适用场景&#xff1a; 系统损坏无法开机。恢复官方出厂固件。刷机失败导致软砖、硬砖的…
阅读更多...
关于Tomcat的一些关键参数

关于Tomcat的一些关键参数

目录 Tomcat参数总览设置位置 参数分析Tomcat内部类maxConnections属性Tomcat内部类的acceptCountTomcat有几个Acceptor线程Tomcat的工作线程池 Tomcat参数总览 package org.springframework.boot.autoconfigure.web; /** * * {link ConfigurationProperties ConfigurationP…
阅读更多...
网络安全核心目标CIA

网络安全核心目标CIA

网络安全的核心目标是为关键资产提供机密性(Confidentiality)、可用性(Availablity)、完整性(Integrity)。作为安全基础架构中的主要的安全目标和宗旨&#xff0c;机密性、可用性、完整性频频出现&#xff0c;被简称为CIA&#xff0c;也被成为你AIC&#xff0c;只是顺序不同而已…
阅读更多...
HIPT论文阅读

HIPT论文阅读

题目《Scaling Vision Transformers to Gigapixel Images via Hierarchical Self-Supervised Learning》 论文地址&#xff1a;[2206.02647] Scaling Vision Transformers to Gigapixel Images via Hierarchical Self-Supervised Learning 项目地址&#xff1a;mahmoodlab/HI…
阅读更多...
智能挂号系统设计典范：SSM 结合 Vue 在医院的应用实现

智能挂号系统设计典范：SSM 结合 Vue 在医院的应用实现

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了医院预约挂号系统的开发全过程。通过分析医院预约挂号系统管理的不足&#xff0c;创建了一个计算机管理医院预约挂号系统的方案。文章介绍了医院预约挂号系统的系…
阅读更多...
Windows11 家庭版安装配置 Docker

Windows11 家庭版安装配置 Docker

1. 安装WSL WSL 是什么&#xff1a; WSL 是一个在 Windows 上运行 Linux 环境的轻量级工具&#xff0c;它可以让用户在 Windows 系统中运行 Linux 工具和应用程序。Docker 为什么需要 WSL&#xff1a; Docker 依赖 Linux 内核功能&#xff0c;WSL 2 提供了一个高性能、轻量级的…
阅读更多...
【hackmyvm】Diophante 靶场

【hackmyvm】Diophante 靶场

1. 基本信息^toc 这里写目录标题 1. 基本信息^toc2. 信息收集2.1. 端口扫描2.2. 目录扫描2.3. knock 3. WordPress利用3.1. wpscan扫描3.2. smtp上传后门 4. 提权4.1. 提权leonard用户4.2. LD劫持提权root 靶机链接 https://hackmyvm.eu/machines/machine.php?vmDiophante 作者…
阅读更多...
OB删除1.5亿数据耗费2小时

OB删除1.5亿数据耗费2小时

目录 回顾&#xff1a;mysql是怎么删除数据的&#xff1f; 删除方案 代码实现 执行结果 结论 本篇是实际操作 批量处理数据以及线程池线程数设置 记录学习 背景&#xff1a;有一张用户标签表&#xff0c;存储数据量达4个亿&#xff0c;使用OceanBase存储&#xff0c;由于…
阅读更多...
Qt：QMetaObject::connectSlotsByName实现信号槽自动关联

Qt：QMetaObject::connectSlotsByName实现信号槽自动关联

简介 在Qt中&#xff0c;QMetaObject::connectSlotsByName 是一个便利的方法&#xff0c;它可以根据对象的对象名&#xff08;objectName&#xff09;自动将信号和槽连接起来。但是&#xff0c;要使用这个方法&#xff0c;必须确保&#xff1a; 1 控件&#xff08;如按钮&…
阅读更多...
记录仪方案_记录仪安卓主板定制_音视频记录仪PCBA定制开发

记录仪方案_记录仪安卓主板定制_音视频记录仪PCBA定制开发

记录仪主板采用了强大的联发科MTK8768处理器&#xff0c;拥有出色的性能表现。它搭载了四个主频为2.0GHz的Cortex-A53核心与四个主频为1.5GHz的Cortex-A53核心&#xff0c;确保了高效的处理速度。此外&#xff0c;主板配备了4GB的RAM(可选8GB)&#xff0c;并且内置64GB的ROM(可…
阅读更多...
Ubuntu 20.04 卸载和安装 MySQL8.0

Ubuntu 20.04 卸载和安装 MySQL8.0

卸载 首先&#xff0c;检查一下系统安装的软件包有哪些&#xff0c;使用dpkg -l | grep mysql命令&#xff1a; 为了将MySQL卸载干净&#xff0c;这些文件都需要被删除。 在Ubuntu20.04系统下&#xff0c;卸载干净MySQL8.0以确保下一次安装不会出错&#xff0c;可以按照以下…
阅读更多...
RCNN系列是如何逐步改善的

RCNN系列是如何逐步改善的

1、R-CNN的缺点&#xff1a; 1&#xff09;计算效率低下&#xff1a;RCNN需要为每一个候选框都提取特征&#xff0c;会导致大量重复的工作&#xff0c;因为候选框是原始图片的一部分&#xff0c;肯定是存在交集的。2&#xff09;需要大量的磁盘空间&#xff1a;在训练阶段&…
阅读更多...
数据结构day5：单向循环链表 代码作业

数据结构day5：单向循环链表 代码作业

一、loopLink.h #ifndef __LOOPLINK_H__ #define __LOOPLINK_H__#include <stdio.h> #include <stdlib.h>typedef int DataType;typedef struct node {union{int len;DataType data;};struct node* next; }loopLink, *loopLinkPtr;//创建 loopLinkPtr create();//…
阅读更多...
最新文章

Copyright @ 2022~2023