【JaveWeb教程】(7)Web前端基础:Vue组件库Element介绍与快速入门程序编写并运行 示例

目录

  • Element介绍
  • 快速入门示例

在这里插入图片描述

Element介绍

不知道同学们还否记得我们之前讲解的前端开发模式MVVM,我们之前学习的vue是侧重于VM开发的,主要用于数据绑定到视图的,那么接下来我们学习的ElementUI就是一款侧重于V开发的前端框架,主要用于开发美观的页面的。

Element:是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库,用于快速构建网页。

Element 提供了很多组件(组成网页的部件)供我们使用。例如 超链接、按钮、图片、表格等等。如下图所示就是我们开发的页面和ElementUI提供的效果对比:可以发现ElementUI提供的各式各样好看的按钮

在这里插入图片描述

ElementUI的学习方式和我们之前的学习方式不太一样,对于ElementUI,我们作为一个后台开发者,只需要学会如何从ElementUI的官网拷贝组件到我们自己的页面中,并且做一些修改即可。其官网地址:https://element.eleme.cn/#/zh-CN,我们主要学习的是ElementUI中提供的常用组件,至于其他组件同学们可以通过我们这几个组件的学习掌握到ElementUI的学习技巧,然后课后自行学习。

快速入门示例

首先我们要掌握ElementUI的快速入门,接下来同学们就一起跟着步骤来操作一下。

首先,我们先要安装ElementUI的组件库,打开VS Code,停止之前的项目,然后在命令行输入如下命令:

npm install element-ui@2.15.3 

具体操作如下图所示:

在这里插入图片描述

然后我们需要在main.js这个入口js文件中引入ElementUI的组件库,其代码如下:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

具体操作如图所示:

在这里插入图片描述

然后我们需要按照vue项目的开发规范,在src/views目录下创建一个vue组件文件,注意组件名称后缀是.vue,并且在组件文件中编写之前介绍过的基本组件语法,代码如下:

<template></template><script>
export default {}
</script><style></style>

具体操作如图所示:

在这里插入图片描述

最后我们只需要去ElementUI的官网,找到组件库,然后找到按钮组件,抄写代码即可,具体操作如下图所示:

在这里插入图片描述

然后找到按钮的代码,如下图所示:

在这里插入图片描述

紧接着我们复制组件代码到我们的vue组件文件中,操作如下图所示:

在这里插入图片描述

最后,我们需要在默认访问的根组件src/App.vue中引入我们自定义的组件,具体操作步骤如下:

在这里插入图片描述

然后App.vue组件中的具体代码如下,代码是我们通过上述步骤引入element-view组件时自动生成的

<template><div id="app"><!-- {{message}} --><element-view></element-view></div>
</template><script>
import ElementView from './views/Element/ElementView.vue'
export default {components: { ElementView },data(){return {"message":"hello world"}}
}
</script>
<style></style>

然后运行我们的vue项目,浏览器直接访问之前的7000端口,展示效果如下图所示:
在这里插入图片描述

到此,我们ElementUI的入门程序编写成功

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL-体系结构

第一层&#xff1a;连接层 接收客户端的连接&#xff0c;完成一些连接的处理&#xff0c;认证授权(校验我们的用户密码)的相关操作&#xff0c;相关的一些安全方案&#xff0c;检查是否超过最大连接数等。 第二层&#xff1a;服务层 &#xff1a;主要完成大多数的核心服务功能&…

SpringFrameWork

SpringFrameWork简介 介绍springFrameWork框架 Spring Framework是一个为企业级应用程序开发提供全面基础设施支持的开源框架&#xff0c;通过集成IoC、DI和AOP等技术&#xff0c;使得应用程序的开发更加灵活、可维护和可扩展。Spring MVC、SpringBoot、Spring Cloud、Spring D…

PMP过了就是中级职称?

&#x1f33b;PMP项目管理专业人士认证在全球范围内受到广泛认可&#xff0c;许多人就误以为获得PMP证书就等同于获得中级职称。但是&#xff0c;事实真的如此吗❓ 1️⃣PMP不属于职称认证 ✅PMP证书&#xff1a; 是由美国项目管理协会(PMI)颁发的专业认证&#xff0c;旨在证明…

vivado工作在工程模式

使用项目 概述 在项目模式下工作时&#xff0c;可以使用各种项目类型输入设计。第章介绍了每种项目类型&#xff0c;并解释了如何创建和管理项目。它还介绍了“项目摘要”、“项目设置”以及如何使用Tcl脚本创建项目。 项目类型 使用AMD Vivado™ Design Suite&#xff0c;…

ckplayer如何设置键盘的方向左和方向右是快退或快进多少秒?

默认是20秒&#xff0c;那怎么按照自定义的配置呢&#xff1f; 打开文件&#xff1a;“.\ckplayer\js\ckplayer.js” 然后在下面的函数中修改就可以了&#xff1a; 下面的代码我已经修改为了按一次方向左键为快退3秒&#xff0c;按一次方向右键为快进5秒。 /** fastBack* 功能&…

用js计算 m-n 之间所有数的和

<script>let mprompt(输入小值)let nprompt(输入大值)function fn(min,max){let sum0for(let imin;i<max;i){sumi}return sum}let allfn(m,n)console.log(和&#xff1a;${all})</script> 效果&#xff1a;

音频筑基:巴克谱和梅尔谱辨析

音频筑基&#xff1a;巴克谱和梅尔谱辨析 是什么深入了解相关参考 在音频信号处理中&#xff0c;巴克谱和梅尔谱是我们经常遇到的概念&#xff0c;也是语音处理中常用到的频域特征&#xff0c;这里谈谈自己对它们的理解。 是什么 巴克谱又称Bark Spectrum&#xff0c;梅尔谱又…

Java反射之获取构造方法,成员变量,成员方法以及反射的作用

目录 1.什么是反射2.获取Class对象的三种方式3.反射获取构造方法4.反射获取成员变量5.反射获取成员方法6.反射的作用 1.什么是反射 在Java中&#xff0c;反射是指程序在运行时动态地获取类的信息、调用方法和访问属性的能力。 通过反射&#xff0c;可以在运行时获取类的构造函数…

1_工程设计模式-简单工厂设计

工程设计模式 一.简单工程设计模式 1.概念 简单工厂模式( Simple Factory Pattern )是指由一个工厂对象决定创建出哪一种产品类的实例。 但它不属于 GOF 23 种设计模式。简单工厂适用于工厂类负责创建的对象较少的场景&#xff0c;且客户端只需要传入工厂类的参数&#xff…

测试组合生成器-allpairspy

1、前言 在我们写功能用例时&#xff0c;常常会遇到多个参数有很多的选项&#xff0c;而如果想把这些参数值都要覆盖执行的话&#xff0c;工作量可想而知。那有没有什么办法既可以减少用例数量&#xff0c;也可以保证用例质量又降低测试时间成本&#xff0c;本篇将介绍一款工具…

两个bash函数创建一个数据库

echo ” $1,$2”> database grep “^$1,” database| sed -e "s/^$1", //" | tail -n 1 echo ” $1,$2”> database echo: echo 是一个常用的命令行工具&#xff0c;用于将文本输出到终端或者重定向到文件中。 $1 和 $2: 这是 shell 脚本中的位置参数。…

65.Slice处理工具【Sort、Contains、Find】

文章目录 一、排序1、sort包介绍2、对自定义结构体集合进行排序3、sort包的相关函数4、sort包已经支持的内部数据类型排序1、IntSlice 类型及[]int 排序2、Float64Slice 类型及[]float64 排序与IntSlice类似3、StringSlice 类型及[]string 排序 5、自定义结构体的简单化排序 二…

蟹目标检测数据集VOC格式400张

蟹&#xff0c;一种独特的海洋生物&#xff0c;以其强壮的身体和独特的生活习性而闻名。 蟹的身体宽厚&#xff0c;有一对锐利的大钳子&#xff0c;这使得它们在寻找食物和保护自己时非常有力。蟹的外观颜色多样&#xff0c;有绿色、蓝色、棕色和红色等&#xff0c;这使得它们在…

【软件测试】黑盒测试

《等价类划分法》 有效等价类无效等价类 &#xff08;输入条件&#xff09;10 < x < 100&#xff08;有效等价类&#xff09;10 < x < 100&#xff08;无效等价类&#xff09;x < 10 和 x >100 《边界值分析法》 基本原则 如果输入条件规定了取值范围&…

SpringIOC之support模块DelegatingMessageSource

博主介绍&#xff1a;✌全网粉丝5W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…

React Three Fiber动画

使用静态对象和形状构建 3D 场景非常酷,但是当你可以使用动画使场景栩栩如生时,它会更酷。 在 3D 世界中,有一个称为角色装配的过程,它允许你创建称为骨架的特殊对象,其作用类似于骨骼和关节系统。 这些骨架连接到一块 3D 几何体上,例如人、动物或其他任何物体,并允许你…

UFW 要点:常见防火墙规则和命令

前些天发现了一个人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;最重要的屌图甚多&#xff0c;忍不住分享一下给大家。点击跳转到网站。 UFW 要点&#xff1a;常见防火墙规则和命令 介绍 UFW&#xff08;uncomplicated fire wall&#xff09;是一个…

Java学习——设计模式——结构型模式2

文章目录 结构型模式装饰者模式桥接模式外观模式组合模式享元模式 结构型模式 结构型模式主要涉及如何组合各种对象以便获得更好、更灵活的结构。虽然面向对象的继承机制提供了最基本的子类扩展父类的功能&#xff0c;但结构型模式不仅仅简单地使用继承&#xff0c;而更多地通过…

ssm基于BS的项目监管系统+jsp论文

摘 要 信息数据从传统到当代&#xff0c;是一直在变革当中&#xff0c;突如其来的互联网让传统的信息管理看到了革命性的曙光&#xff0c;因为传统信息管理从时效性&#xff0c;还是安全性&#xff0c;还是可操作性等各个方面来讲&#xff0c;遇到了互联网时代才发现能补上自古…

NX/UG二次开发—C\C++开发单个DLL支持多版本NX一种方法

1、去除附加包含目录下的NX相关的lib文件&#xff1a; 2、从对应的dll导出ufun函数和NXopen函数&#xff1a; libufun.dll; libufun_cam.dll; libufun_cae.dll; libufun_die.dll; libufun_vdac.dll; libufun_weld.dll; libugopenint.dll; libugopenint_cae.dll; libugopenint_…