第 三 方 组 件 e l e m e n t - u i[Vue]

一、组件之间的传值

  • 组件可以由内部的Data提供数据,也可以由父组件通过prop的方式传值。

  • 兄弟组件之间可以通过Vuex等统一数据源提供数据共享

第一种

Movie.vue
 <template><div><h1>我才不要和你做朋友</h1></div></template>​
App.vue
 <template><div id="app"><Movie></Movie></div></template>​<script>import Movie from './components/Movie.vue'​export default {name: 'App',components: {Movie}}</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>​

image-20240618174143563

第二种

Movie.vue
 <template><div><h1>{{title}}</h1></div></template>​<script>export default {name: "Movie",data:function(){return{title:"我才不要跟你做朋友"}}}</script>​
App.vue
 <template><div id="app"><Movie></Movie></div></template>​<script>import Movie from './components/Movie.vue'Movie.name //export default {name: 'App',components: {Movie}}</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>​

第三种

Movie.vue
 <template><div><h1>{{title}}</h1></div></template>​<script>export default {name: "Movie",props:["title"],data:function(){return{}}}</script>​
App.vue
 <template><div id="app"><Movie title="我才不要跟你做朋友"></Movie></div></template>​<script>import Movie from './components/Movie.vue'Movie.nameexport default {name: 'App',components: {Movie}}</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>​
显示效果(前三种一样):

b375165daf73c30aaadd4e40270a755

第四种:

Movie.vue
 <template><div><h1>{{title}}</h1><span>{{rating}}</span></div></template>​<script>export default {name: "Movie",props:["title","rating"],data:function(){return{}}}</script>​
App.vue
 <template><div id="app"><Movie title="我才不要跟你做朋友" rating="6.8"></Movie></div></template>​<script>import Movie from './components/Movie.vue'Movie.nameexport default {name: 'App',components: {Movie}}</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>​
显示效果:

image-20240618175921416

第五种(关于组件的传值):

Movie.vue
 <template><div><h1>{{title}}</h1><span>{{rating}}</span></div></template>​<script>export default {name: "Movie",props:["title","rating"],data:function(){return{}}}</script>​
App.vue
 <template><div id="app"><Movie  v-for="movie in movies" :key="movie.id" :title="movie.title" :rating="movie.rating"></Movie></div></template>​​<script>import Movie from './components/Movie.vue'Movie.nameexport default {name: 'App',data:function(){return{movies:[{id:1,title:"我才不要跟你做朋友1",rating:8.8},{id:2,title:"我才不要跟你做朋友2",rating:8.9},{id:3,title:"我才不要跟你做朋友3",rating:8.7},]}},components: {Movie}}</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>​
显示效果:

image-20240618201715098

第六种(加按钮,弹窗):

Movie.vue
 <template><div><h1>{{title}}</h1><span>{{rating}}</span><button @click="fun">点击收藏</button></div></template>​<script>export default {name: "Movie",props:["title","rating"],data:function(){return{}},methods:{fun(){alert("收藏成功")}}  }</script>​
App.vue
 <template><div id="app"><Movie  v-for="movie in movies" :key="movie.id" :title="movie.title" :rating="movie.rating"></Movie></div></template>​​<script>import Movie from './components/Movie.vue'Movie.nameexport default {name: 'App',data:function(){return{movies:[{id:1,title:"我才不要跟你做朋友1",rating:8.8},{id:2,title:"我才不要跟你做朋友2",rating:8.9},{id:3,title:"我才不要跟你做朋友3",rating:8.7},]}},components: {Movie}}</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>
显示效果:

image-20240618202514651

第七种(兄弟组件)

Movie.vue
 <template><div><h1>{{title}}</h1><span>{{rating}}</span><button @click="fun">点击收藏</button></div></template>​<script>export default {name: "Movie",props:["title","rating"],data:function(){return{}},methods:{fun(){alert("收藏成功")}}  }</script>​
APP.vue
 <template><div id="app"><Movie  v-for="movie in movies" :key="movie.id" :title="movie.title" :rating="movie.rating"></Movie><Hello></Hello></div></template>​​<script>import Movie from './components/Movie.vue'import Hello from './components/Hello.vue'Movie.nameexport default {name: 'App',data:function(){return{movies:[{id:1,title:"我才不要跟你做朋友1",rating:8.8},{id:2,title:"我才不要跟你做朋友2",rating:8.9},{id:3,title:"我才不要跟你做朋友3",rating:8.7},]}},components: {Movie,Hello}}</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>​
Hello.vue
 <template><h3>hello</h3></template>
显示效果:

image-20240618203326932

二、element-ui介绍

Element是国内饿了么公司提供的一套开源前端框架,简洁优雅,提供了Vue、React、Angular等多个版本。

  • 文档地址:Element - The world's most popular Vue UI framework[提供很多现成的组件]

  • 安装:npm i element-ui

    image-20240618204223845

下载好后,所以安装好的东西都会在node_mdules目录下

image-20240618204103477

  • 引入 Element(在main.js):

 import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';​Vue.use(ElementUI);​new Vue({el: '#app',render: h => h(App)});

三、组件的使用

main.js

 import Vue from 'vue'import App from './App.vue'import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css';​Vue.config.productionTip = falseVue.use(ElementUI);new Vue({render: h => h(App),}).$mount('#app')​

Hello.vue

 <template><div><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="id"label="编号"width="180"></el-table-column><el-table-columnprop="username"label="姓名"width="180"></el-table-column><el-table-columnprop="birthday"label="生日"></el-table-column></el-table><el-date-pickerv-model="value1"type="date"placeholder="选择日期"></el-date-picker><i class="fa fa-camera-retro"></i></div></template>​<script>​export default {methods: {tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';}},created:function(){this.$http.get("/user/findAll").then((response)=>{this.tableData = response.data})},data() {return {tableData: []}}}</script>​<style>.el-table .warning-row {background: oldlace;}​.el-table .success-row {background: #f0f9eb;}</style>
显示结果:

image-20240619003048552

修改Hello.vue(隔行颜色不同)

 <template><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></template><script>export default {methods: {tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';}},data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}]}}}</script><style>.el-table .warning-row {background: oldlace;}​.el-table .success-row {background: #f0f9eb;}</style>​
测试结果:

image-20240619003501952

修改Hello.vue(添加日期选择器)

 <template><div><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table><el-date-pickerv-model="value1"type="date"placeholder="选择日期"></el-date-picker></div></template>
显示结果

+-

四、图标的使用

第三方图标库

由于Element UI提供的字体图符较少,一般会采用其他图表库,如著名的FontAwesome

Font Awesome提供了675个可缩放的矢量图标,可以使用CSS所提供的所有特性对它们进行更改,包括大小、颜色、阴影或者其他任何支持的效果。

文档地址:http://fontawesome.dashgame.com/

  • 安装:npm install font-awesome

image-20240619004211013

image-20240619004659454

  • 使用:import 'font-awesome/css/font-awesome.min.css

测试结果(添加图标):

image-20240619005055677

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

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

相关文章

嵌入式开发十九:SysTick—系统定时器

在前面实验中我们使用到的延时都是通过SysTick进行延时的。 我们知道&#xff0c;延时有两种方式&#xff1a;软件延时&#xff0c;即CPU 循环等待产生的&#xff0c;这个延时是不精确的。第二种就是滴答定时器延时&#xff0c;本篇博客就来介绍 STM32F4 内部 SysTick 系统定时…

高德地图轨迹回放/轨迹播放

前言 本篇文章主要介绍高德地图的轨迹回放或播放的实现过程&#xff0c;是基于vue2实现的功能&#xff0c;同时做一些改动也是能够适配vue3的。其中播放条是用的是element UI中的el-slider组件&#xff0c;包括使用到的图标也是element UI自带的。可以实现轨迹的播放、暂停、停…

【windows|004】BIOS 介绍及不同品牌电脑和服务器进入BIOS设置的方法

&#x1f341;博主简介&#xff1a; &#x1f3c5;云计算领域优质创作者 &#x1f3c5;2022年CSDN新星计划python赛道第一名 &#x1f3c5;2022年CSDN原力计划优质作者 ​ &#x1f3c5;阿里云ACE认证高级工程师 ​ &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社…

【ARM】如何通过Keil MDK查看芯片的硬件信息

【更多软件使用问题请点击亿道电子官方网站】 1、文档目标&#xff1a; 解决在开发过程中对于开发项目所使用的的芯片的参数查看的问题 2、问题场景&#xff1a; 在项目开发过程中&#xff0c;经常需要对于芯片的时钟、寄存器或者一些硬件参数需要进行确认。大多数情况下是需…

wps-文档-js宏-批量修改表格格式

目录 前言开启JS宏我的脚本参考API文档 前言 由于需要修改word的表格的格式&#xff0c;一个一个的修改太慢了&#xff0c;所以需要通过宏的方式来修改&#xff0c;需要注意的是低版本可能没有JS宏… 开启JS宏 切换到工具–>点击开发工具 点击之后功能栏会变化成这样 选…

21、架构-持久化存储

1、Kubernetes存储设计 Kubernetes在存储设计上秉承声明式API和资源抽象的理念&#xff0c;用户通过声明存储需求&#xff0c;Kubernetes负责调度和管理实际的存储资源。以下是Kubernetes存储设计中的核心概念和机制。 Mount和Volume 在Kubernetes中&#xff0c;Volume和Moun…

渗透测试基础(二) Linux+Win常用命令介绍

1. Linux常用命令 1.1 解压缩相关 1.1.1 tar命令 解包&#xff1a;tar zxvf FileName.tar 打包&#xff1a;tar czvf FileName.tar DirName1.1.2 gz命令 对于.gz格式的解压1&#xff1a;gunzip FileName.gz解压2&#xff1a;gzip -d FileName.gz压缩&#xff1a;gzip FileN…

HJ39判断两个IP是否属于同一子网

提示&#xff1a;文章 文章目录 前言一、背景二、 2.1 2.2 总结 前言 HJ39判断两个IP是否属于同一子网 一、 代码&#xff1a; 第一版代码没有对掩码网络号进行处理。一开始对非法字段的理解就是value大于255。然后执行示例&#xff0c; 254.255.0.0 85.122.52.249 10.57.…

Dell戴尔灵越Inspiron 16 Plus 7640/7630笔记本电脑原装Windows11下载,恢复出厂开箱状态预装OEM系统

灵越16P-7630系统包: 链接&#xff1a;https://pan.baidu.com/s/1Rve5_PF1VO8kAKnAQwP22g?pwdjyqq 提取码&#xff1a;jyqq 灵越16P-7640系统包: 链接&#xff1a;https://pan.baidu.com/s/1B8LeIEKM8IF1xbpMVjy3qg?pwdy9qj 提取码&#xff1a;y9qj 戴尔原装WIN11系…

如何优雅的一键适配Ubuntu20.04的OpenHarmony环境?请关注【itopen:openharmony_env_init】...

itopen组织&#xff1a;1、提供OpenHarmony优雅实用的小工具2、手把手适配riscv qemu linux的三方库移植3、未来计划riscv qemu ohos的三方库移植 小程序开发4、一切拥抱开源&#xff0c;拥抱国产化 一、概述 本工程的作用主要是基于Ubuntu20.04版本一键自动初始化Ubunt…

【CAPL】XMLTestModule XML文件模板

<?xml version"1.0" encoding"iso-8859-1" standalone"yes"?> <testmodule title"XML Test Module" version"1.1"><description>XML Test Module</description><testgroup title"checks …

C语言从头学22——main( )函数

C语言中的 main( ) 是程序的入口函数。即所有的程序一定要包含一个 main( ) 函数。程序总是从这个函数开始执行&#xff0c;如果没有这个函数&#xff0c;程序就无法启动。其他函数都是通过它引入程序的。 main( ) 的写法与其他函数是相同的。main函数的返回值是 int 类…

CFD笔记

CFD 定常流动与非定常流动 定常流动&#xff1a;流体流动过程中各物理量均与时间无关; 非定常流动&#xff1a;流体流动过程中某个或某些物理量与时间有关. 运动黏度 运动粘度定义&#xff1a; v μ ρ v \frac{\mu}{\rho} vρμ​&#xff0c;其中 μ \mu μ​表示粘度…

Node.js进阶——数据库

文章目录 一、步骤1、安装操作 MySQL数据库的第三方模块(mysql)2、通过 mysql 模块连接到 MySQL 数据库3、测试 二、操作 mysql 数据库1、查询语句2、插入语句3、插入语句快捷方式4、更新数据5、更新语句快捷方式6、删除数据7、标记删除 二、前后端的身份认证1、web开发模式1&a…

如何用python调用C++处理图片

一. 背景 用pyhton可直接调用C&#xff0c;减少重写的工作量&#xff1b;部分逻辑运算&#xff0c;C的执行效率高&#xff0c;可进行加速。 下面就一个简单的C滤镜&#xff08;彩色图转灰度图&#xff09;为例&#xff0c;展示python调用C 二. 代码实现 代码结构如下&#x…

Java面试题:对比ArrayList和LinkedList的内部实现,以及它们在不同场景下的适用性

ArrayList和LinkedList是Java中常用的两个List实现&#xff0c;它们在内部实现和适用场景上有很大差异。下面是详细的对比分析&#xff1a; 内部实现 ArrayList 数据结构&#xff1a;内部使用动态数组&#xff08;即一个可变长的数组&#xff09;实现。存储方式&#xff1a;…

MybatisPlus 的入门与实践:BaseMapper 实现 CRUD

MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集&#xff0c;可以使用简单的 XML 或注解来配置和映射原始类型、接口和 Java POJO&#xff08;Plain Old Java Objects&#xff0c;普通的 Java 对象&#xff09;为数据库中的记录。 下面我们将详细探讨 MyBati…

如何解决跨区域文件传输存在的安全管控问题?

⼤型企业和集团为扩⼤市场份额、优化资源配置&#xff0c;会在不同地区设⽴多级下属分⽀机构、研发中心、实验室等&#xff0c;存在研发数据横向或纵向流转的需求&#xff0c;研发数据进行跨区域文件传输的场景。跨区域可能是网络区域&#xff0c;也可能是地理区域&#xff0c;…

2-10 基于matlab的动态时间归整(DTW)算法

基于matlab的动态时间归整&#xff08;DTW&#xff09;算法。16页的试验文档。以一个能识别数字0&#xff5e;9的语音识别系统的实现过程为例&#xff0c;阐述了基于DTW算法的特定人孤立词语音识别的基本原理和关键技术。其中包括对语音端点检测方法、特征参数计算方法和DTW算法…

MT1318 完美平方

题目 输入正整数N&#xff0c;检查它是否为完美平方。完美平方数是指1个平方数可以分成两部分后&#xff0c;每个部分仍然是平方数。如497 * 7&#xff0c;分成4和9&#xff0c;4和9都是平方数。再如168141*41&#xff0c;1681分成16和81&#xff0c;也都是平方数。 格式 输…