vue3.0 CLI – 2.1 – component 组件入门教程

Vue3.0 CLI - 2.1 - Component 组件入门教程

在Vue.js之中, Component 是构建任何类型的应用程序的核心概念之一。在本教程中,我会向你展示如何使用Vue3.0 CLI来创建并使用组件。我们将在VueCLI中的模板中构建两个简单的组件,并将它们添加到父级组件中。由此深入了解组件的工作原理。

步骤1:创建Vue3.0项目

首先,我们要使用Vue3.0 CLI创建一个新的Vue项目。请确保在安装Vue3.0 CLI之前已经安装了Node.jsnpm。口令:vue create component-tutorial

步骤2: 创建一个子级组件

现在,我们将创建一个简单的HelloWorld子级组件。使用以下命令在项目中生成新的Vue组件: 口令:vue i --save-dev @vue/cli-plugin-babel

<template>
  <div class='hello'>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld", // 组件名称
  props: {
    msg: String, //组件启动时传入的参数
  },
};
</script>

<style>
.hello {
  font-size: 2rem;
}
</style>

步骤3: 创建父级组件

现在,我们将使用父级组件来引用子级组件。我们将在父级组件App.vue中添加HelloWorld组件作为子级组件。使用以下命令更新App.vue:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld :msg="message" />
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      message: "Welcome to Your Vue.js App",
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

步骤4: 运行 Vue3.0 项目

使用以下命令在本地启动Vue3.0npm run serve

示例1:组件标题大小调整

修改子级组件HelloWorld标题的大小。在组件的<style>标签下添加 h1 标签及属性自定义调整:

<style>
.hello {
  font-size: 2rem;
}
  h1 {
  font-size: 3rem;
  font-weight: bold;
  color: #02B875;
  }
</style>

示例2:组件信息传递

修改父级组件App.vue信息内容,传入到子级组件中。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld :msg="message" :des="`使用Vue3.0构建应用程序.`" />
  </div>
</template>

在子级组件HelloWorldprops属性下,添加des参数:

<template>
  <div class='hello'>
    <h1>{{ msg }}</h1>
    <h3>{{ des }}</h3>
  </div>
</template>

<script>
export default {
  name: "HelloWorld", // 组件名称
  props: {
    msg: String,
    des: String,
  },
};
</script>

<style>
.hello {
  font-size: 2rem;
}

h1 {
  font-size: 3rem;
  font-weight: bold;
  color: #02B875;
}

h3 {
  color: #6264a7;
}
</style>

现在的Vue3.0项目将显示子级组件HelloWorld的标题调整后及信息传播完成的输出。

这是一个非常基础的Vue3.0 CLI - Component 组件入门教程。它将对刚刚接触Vue.js的学习者很有帮助。通过这个简单的教程,您现在应该有一个更好的理解,以便构建和使用组件。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue3.0 CLI – 2.1 – component 组件入门教程 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • 使用Vite2+Vue3渲染Markdown文档的方法实践

    使用Vite2+Vue3渲染Markdown文档的方法实践,可以按照以下步骤进行: 准备工作 安装Node.js,下载地址:https://nodejs.org/en/download/。 在终端中执行以下命令安装Vite:npm install -g vite。 创建一个新的Vue3项目:npm init vite@latest project-name …

    Vue 2023年5月28日
    00
  • 详解vue+axios给开发环境和生产环境配置不同的接口地址

    为了给开发环境和生产环境配置不同的接口地址,我们需要依赖于webpack。我们可以通过环境变量在编译时设置接口地址,从而在不同的环境中使用不同的接口地址。 1. 修改webpack的配置文件 在项目的根目录中找到名为vue.config.js的文件,如果不存在则通过vue-cli工具生成(vue create projectName)。在该文件中添加如下代码…

    Vue 2023年5月28日
    00
  • vite vue3 规范化与Git Hooks详解

    以下是“vite vue3 规范化与Git Hooks详解”的详细攻略。 概述 在前端开发中,如何进行规范化开发是一个十分重要的话题。同时,在团队协作中,代码的版本控制也是必不可少的一环。本文将介绍如何使用Vite和Vue3来实现前端规范化开发,并结合Git Hooks来实现代码的自动检测和提交。 Vite+Vue3规范化开发 创建项目 首先需要使用Vue …

    Vue 2023年5月28日
    00
  • 详解vue中v-for的key唯一性

    当使用 Vue 的 v-for 指令循环渲染数据时,每个渲染的元素都需要拥有唯一的 key 属性。 为什么需要 key 属性? key 属性的作用是为了帮助 Vue 识别每个节点的标识,以便高效的更新虚拟 DOM。 假如我们有如下代码: <template> <div> <ul> <li v-for="it…

    Vue 2023年5月27日
    00
  • Vue实现关联页面多级跳转(页面下钻)功能的完整实例

    下面我详细讲解一下Vue实现关联页面多级跳转的完整攻略。首先需要明确一下页面下钻的概念,它指的是用户通过某一个页面进入下一级页面,并可通过该页面进一步进入下下级页面,最终返回到原先的页面。 前置知识 实现页面下钻功能,我们需要先掌握以下知识点: Vue 路由 Vue 路由是 Vue.js 提供的一个插件,它可以让我们实现单页应用(SPA)的路由功能。首先我们…

    Vue 2023年5月28日
    00
  • js实现数据导出为EXCEL(支持大量数据导出)

    下面为你详细讲解如何使用JS实现数据导出为Excel的完整攻略。 步骤1:引入相关JS库 实现数据导出为Excel需要使用到相关的JS库,最常用的有两种,分别是SheetJS和xlsx.js。你可以根据自己的需要选择其中任何一种。 SheetJS SheetJS是一款基于开源JS库FileSaver和JSZip的纯JS后端实现的表格处理工具。它的最大优势是支…

    Vue 2023年5月27日
    00
  • vue 项目代码拆分的方案

    以下是“Vue项目代码拆分的方案”的完整攻略: 1. 为什么需要代码拆分 在一个大型的Vue项目中,随着业务的增长,代码量也不断增加。如果所有的代码都写在单个文件中,会降低代码的可维护性、阅读性和重用性,代码文件会变得非常庞大和复杂,难以维护。 而代码拆分可以将代码按照逻辑、功能等方面进行拆分,将不同的功能模块分割到不同的文件、组件中,可以让代码更为模块化、…

    Vue 2023年5月27日
    00
  • vue3学习笔记简单封装axios示例实现

    欢迎来到本文的完整攻略——《Vue3学习笔记:简单封装Axios示例实现》。 简介 在使用Vue.js开发Web应用的过程中,常常需要与后端交互数据。Vue.js提供了一个轻量级、高效的基于Promise的异步HTTP请求库——Axios。Axios能够发送GET、POST等各种类型的请求,并拥有诸多高级特性(如拦截器、并发请求、取消请求等),是Vue.js…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部