一步步教你用Vue.js创建一个组件(附代码示例)

2024-07-28 14:36:14

前言

Vue.js是一个渐进式框架，旨在以一种非常简单、直接的方式构建用户界面。它被设计成易于使用，并且足够灵活，可以处理各种各样的应用。

在本教程中，我们将向你展示如何用Vue.js创建一个简单的组件。我们还将介绍一些在使用组件时需要知道的基本概念。

我们将介绍在Vue中创建一个组件的基本语法，以及一些关于组件用途的理论。在这篇文章的最后，你应该对Vue.js的基础知识有一个扎实的了解。

到底什么是组件？

在一个传统的Web应用程序中，你有很多HTML模板在服务器上渲染。每个模板负责页面的一个特定部分，如页眉、页脚或内容区。

使用Vue.js，每一块UI都是一个单独的组件。这使得你的代码更加模块化，更容易推理。它也使得在你的应用程序的其他部分重复使用组件变得更加容易。

为什么你一定要使用组件

组件是保持你的代码有条理的一个好方法。它们还可以使你的应用程序的其他部分更容易重复使用代码。

使用组件的另一个好处是，它们可以帮助你减少你要写的代码量。例如，如果你有一个你想在你的网络应用程序的每一页上使用的页眉和页脚，你可以创建一个页眉和页脚组件。然后，你所要做的就是在你所有的其他模板中包含这些文件。

在Vue中创建一个组件

现在我们已经了解了什么是组件，以及为什么你应该使用它们，让我们来看看如何在Vue中实际创建一个组件。

有了这个框架，这个过程实际上是非常容易的。如果你使用Vue CLI，你需要做的就是创建一个.vue文件，并把它分成三个部分，组成这个框架的组件：模板、脚本和样式。

下面是一个简单组件的例子：

<template>
  <h1>Hello, {{name}}</h1>
</template>

<script>
export default {
  data() {
    return {
      name: 'John'
    }
  }
</script>

<style>
  h1 {
    color: red;
  }
</style>

这个例子将渲染一个H1，里面有一个变量 "name"。但它究竟是如何工作的呢？让我们来看看这些部分分别做什么。

模板部分

当使用Vue时，模板是你放置HTML代码的地方。这一部分将决定你的组件看起来是什么样子。

<template>
  <h1>Hello, {{name}}</h1>
</template>

在上面的例子中，我们有一个非常简单的模板，只是渲染了一个H1标签。

通过选择使用Vue，我们的HTML可以使用一些工具，如单向和双向绑定，这使我们能够以更直接的方式与我们的JavaScript代码沟通应用程序的这一面，与vanilla JS应用程序相比。

这就是我们看到的 "小胡子 "语法：H1将渲染存储在我们JavaScript代码中的数据。这将我们引向...

脚本部分

脚本部分是你要放置你的JavaScript代码的地方。这是你的代码的一部分，它将允许你控制你的组件的行为方式：

<script>
export default {
  data() {
    return {
      name: 'John'
    }
  }
</script>

在我们的例子中，我们有一个非常简单的脚本，只是定义了一个数据对象。这个数据对象将在我们的模板中使用，并且可以以许多不同的方式与我们的HTML相结合。

截至目前，Vue.js正沉浸在一个相当巨大的转型中，这实际上意味着我们有两种完全不同的方式来用Vue.js编写我们的JavaScript代码。让我们来简单看看它们各自的情况。

选项API：旧的方式

Options API是Vue.js过去处理组件的方式。它在V2和V3中仍然被支持，但它不再是推荐的方式了。然而，很多生产应用仍然在使用这种语法，所以学习如何使用它仍然是一个好主意。

放弃Options API的原因是它会变得非常冗长和重复，这会使你的代码难以阅读和维护。

顺便说一下，Options API是我们在以前的例子中使用的版本。

正如你所看到的，Options API是相当啰嗦的。你必须以一种非常特殊的方式来构造你的组件，以便它们能够工作。这可能很快就会让人不知所措，特别是当你在一个有大量数据的大项目上工作时。

合成API：现在和未来

为了简化我们编写组件的方式，Vue团队想出了Composition API。这是一种新的编写组件的方式，更加灵活和容易理解。让我们来看看我们如何使用Composition API重写我们之前的例子。

<script setup>
import {ref} from 'vue';

const name = ref('John');
</script>

乍一看，我们用Composition API编写脚本代码的方式比Options版本更类似于vanilla JS。我们可以用let和const来声明我们的变量，尽管我们确实需要使用一个叫做ref的工具，它与React的useState非常相似。

风格部分

样式部分是你将放置你的CSS代码的地方。这一部分将决定你的组件看起来如何。

这里你可以看到一个非常简单的样式部分，它只是对我们的H1标签应用了一些基本的样式。

<style>
  h1 {
    color: red;
  }
</style>

需要注意的是，在Vue中，除非你使用 "范围 "装饰器，否则你的样式会应用到每一个组件。

正如你所看到的，在Vue中创建一个组件的过程是非常简单的。你所需要做的就是创建一个.vue文件，并把它分成三个部分：模板、脚本和样式。

这就是它的全部内容!通过遵循这些简单的步骤，你应该不难用Vue创建你自己的自定义组件

总结

到此这篇关于用Vue.js创建一个组件的文章就介绍到这了,更多相关Vue.js创建组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

一篇文章带你了解Vue组件的创建和使用

目录一.什么是组件? 二.创建全局组件方式一 1.Vue.extend 2.Vue.component 方式二直接使用Vue.component 方式三三. 创建局部组件四.组件中的data 和 methods 五.组件间的通信方式 props/$emit 通过事件形式总结一.什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能. 二.创
vue 动态创建组件的两种方法

Vue动态创建组件实例并挂载到body 方式一 import Vue from 'vue' /** * @param Component 组件实例的选项对象 * @param props 组件实例中的prop */ export function create(Component, props) { const comp = new (Vue.extend(Component))({ propsData: props }).$mount() document.body.appendChild(c
Vue组件创建和传值的方法

## 创建组件的3种方法 # 第一种: + Vue.extend()函数返回一个组件的构造器,里面包含一个参数,参数是对象,对象里面是一些配置项 + Vue.component()函数利用Vue.extend()返回的构造器创建一个组件的实例,有两个参数.; 参数1:组件名字,参数2:组件构造器注意: 模板template中只能有一个根节点组建的名字采用驼峰命名的话,使用时,就要加上"-"; 例如:组件名字indexA-->index-a; ## 第二种: +
vue组件创建的三种方式小结

1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 template : "<h3>使用vue.extend创建的组件</h3>" }) //1.2使用Vue.component('组件名称',创建出来的组件模板对象) Vue.component('myCom1',com1) 把名称以标签的形式放到页面中<m
vue 怎么创建组件及组件使用方法

什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 我知道vue中核心就是组件,但是组件是什么呢?组件有什么用呢? 这里来说说怎么用组件?怎么样创建自己的组件?: 1)创建自己的组件通过vue.extend("template");通过vue构造器去拓展一个模板,
Vue创建头部组件示例代码详解

Vue.js 组件组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title
Vue 创建组件的两种方法小结(必看)

创建组件的两种方法小结 1.全局注册 2.局部注册 var child=Vue.extend({}) var parent=Vue.extend({}) Vue.extend() 全局方法生成构造器,创建子类使用基础 Vue 构造器,创建一个"子类". 这样写非常繁琐.于是vue进行了简化使用Vue.component()直接创建和注册组件: Vue.component(id,options) 全局方法用来注册全局组件 id 是string类型,即是注册组件的名称 option
一步步教你用Vue.js创建一个组件(附代码示例)

目录前言到底什么是组件? 为什么你一定要使用组件在Vue中创建一个组件模板部分脚本部分选项API:旧的方式合成API:现在和未来风格部分总结前言 Vue.js是一个渐进式框架,旨在以一种非常简单.直接的方式构建用户界面.它被设计成易于使用,并且足够灵活,可以处理各种各样的应用. 在本教程中,我们将向你展示如何用Vue.js创建一个简单的组件.我们还将介绍一些在使用组件时需要知道的基本概念. 我们将介绍在Vue中创建一个组件的基本语法,以及一些关于组件用途的理论.在这篇文章的最
使用Vue.js创建一个时间跟踪的单页应用

Vue.js很简单.正因为如此简单,人们常常认为其适合于小项目.虽然真正的Vue.js核心知识只是一个视图层库,实际上有一组工具,将使您能够使用Vue.js构建完整的大规模SPA(单页应用程序). SPA应用可以在不完全重新加载网页,产生一个更流畅的用户体验到的用户交互响应.还有好的副作用,SPA还鼓励后端专注于展示数据端点,这使得整体架构更加分离,并且对于其他类型的客户端可能是可重用的. 从开发人员的角度来看,SPA和传统的后端呈现应用程序之间的主要区别是,我们必须将客户端视为具有自己架构的应
JS框架之vue.js(深入三:组件1）

这个要单独写,原文是这么描述vue的组件的:组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 这个特性我感觉比较难理解,一步步来,看看组件到底是个什么东西? 1.举个栗子 //model层: // 通过extend方式定义一个Vue组件 var MyComponent = Vue.exten
基于vue.js轮播组件vue-awesome-swiper实现轮播图

一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似. 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js: import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.u
详解Vue.js——60分钟组件快速入门（上篇）

组件简介组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢? 组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素. 由于组件的篇幅较大,我将会把组件的入门知识分为两篇来讲解,这样也便于各位看官们快速消化. 组件的创建和注册基本步骤 Vue.js的组件的使用有3个步骤:创建组件构造器.注册组件和使用组件. 下面的代码演示了这3个步骤: <
vue.js实例对象+组件树的详细介绍

vue的实例对象首先用js的new关键字实例化一个vue el: vue组件或对象装载在页面的位置,可通过id或class或标签名 template: 装载的内容.HTML代码/包含指令或者其他组件的HTML片段,template将是我们使用的模板 **data:** 数据通过data引入到组件中在组件中的data要以函数的形式返回数据,当不同的界面用了同一个组件时,才不会以为一个组件的值发生改变而改变其他页面的内容. {{ }} 双括号语法里面放入数据的变量组件注册语法糖全局组件 A方
解析Vue.js中的组件

介绍在使用Vue.js时,Vue.js组件非常重要.在本教程中,我们将深入研究Vue.js组件,理解基础知识并将其应用于应用程序.让我们开始吧. 什么是组件? 组件使我们能够将复杂的应用程序分解成小块.例如,典型的Web应用程序将具有标题,侧边栏,内容和页脚等部分. Vue.js允许我们将每个部分分解成单独的模块化代码,称为组件.这些组件可以扩展,然后附加到你正在处理的应用程序. 使用组件是在整个应用程序编写中重用代码的好方法. 假设你有一个博客应用程序,并且你想要显
vue.js单文件组件中非父子组件的传值实例

最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊:官网中说明如下: 非父子组件通信: 有时候两个组件也需要通信 (非父子关系).在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线: var bus = new Vue(): // 触发组件 A 中的事件 bus.$emit('id-selected', 1) // 在组件 B 创建的钩子中
Vue.js的动态组件模板的实现

组件并不总是具有相同的结构.有时需要管理许多不同的状态.异步执行此操作会很有帮助. 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件.让我们来一起看一下评论,看一下我表达的意思是什么. 评论现在不再仅仅是简单的文本字段.您希望能够发布链接,上传图像,集成视频等等.必须在此注释中呈现所有这些完全不同的元素.如果你试图在一个组件内执行此操作,它很快就会变得非常混乱. 处理方式我们该如何处理这个问题?可能大多数人会先检查所有情况,然后在此之后加载特定组件.像这样的东西: <templat
vue.js内置组件之keep-alive组件使用

keep-alive是Vue.js的一个内置组件.<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. 当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行. 它提供了include与exclude两个属性,允许组件有条件地进行缓存. 举个栗子 <keep-alive> <router-view