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

news2024/12/24 9:00:50

一、组件之间的传值

  • 组件可以由内部的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.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>
 ​
显示效果(前三种一样)：

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.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>
 ​
显示效果：

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.name
 export 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.name
 export 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.name
 export 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 = false
 Vue.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-column
       prop="id"
       label="编号"
       width="180">
     </el-table-column>
     <el-table-column
       prop="username"
       label="姓名"
       width="180">
     </el-table-column>
     <el-table-column
       prop="birthday"
       label="生日">
     </el-table-column>
   </el-table>
    <el-date-picker
       v-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-column
       prop="date"
       label="日期"
       width="180">
     </el-table-column>
     <el-table-column
       prop="name"
       label="姓名"
       width="180">
     </el-table-column>
     <el-table-column
       prop="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-column
       prop="date"
       label="日期"
       width="180">
     </el-table-column>
     <el-table-column
       prop="name"
       label="姓名"
       width="180">
     </el-table-column>
     <el-table-column
       prop="address"
       label="地址">
     </el-table-column>
   </el-table>
   <el-date-picker
       v-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.coloradmin.cn/o/1842321.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

.NET C# 操作Neo4j图数据库

.NET C# 操作Neo4j图数据库

.NET C# 操作Neo4j图数据库 目录 .NET C# 操作Neo4j图数据库环境Code 环境 VisualStudio2022 .NET 6 Neo4j.Driver 5.21 Code // 连接设置 var uri "bolt://localhost:7687"; var user "neo4j"; var password "password"; // 请替换为你的…
阅读更多...
丹尼尔·T·琼斯：精益生产到底是什么？

丹尼尔·T·琼斯：精益生产到底是什么？

本文摘要自《精益思想》、《改变世界的机器》作者之一丹尼尔T琼斯的文章。丹尼尔T琼斯是一位学者、英国作家和研究员。他曾多次获得瑞士山吉奥卓越运营奖研究与专业出版类别的奖项&#xff0c;也包括了国际精益六西格玛研究所&#xff08;ILSSI&#xff09;[1]的"精益思想…
阅读更多...
ChatGPT在社工攻击和反钓鱼中的应用

ChatGPT在社工攻击和反钓鱼中的应用

概述 ChatGPT是一种基于神经网络的自然语言处理模型&#xff0c;可以生成自然流畅的文本或对话。在钓鱼攻击中&#xff0c;攻击者可以使用ChatGPT生成虚假电子邮件或消息&#xff0c;更好地伪装成受害者所信任的个人或组织&#xff0c;从而获取受害者的个人信息。这种行为对个…
阅读更多...
网络编程（一）基本概念

网络编程（一）基本概念

文章目录 一、概念&#xff08;一&#xff09;网络发展阶段1. ARPAnet阶段2. TCP/IP两个协议阶段3. 网络体系结构和OSI开放系统互联模型4. TCP/IP协议簇体系结构&#xff08;1&#xff09; 应用层&#xff1a;&#xff08;2&#xff09;传输层&#xff1a;&#xff08;3&#x…
阅读更多...
vue3面试题八股集合——2024

vue3面试题八股集合——2024

vue3比vue2有什么优势&#xff1f; 性能更好&#xff0c;打包体积更小&#xff0c;更好的ts支持&#xff0c;更好的代码组织&#xff0c;更好的逻辑抽离&#xff0c;更多的新功能 描述Vu3生命周期 Options API的生命周期&#xff1a; beforeCreate: 在实例初始化之后、数据观…
阅读更多...
NSSCTF-Web题目11

NSSCTF-Web题目11

目录 [鹤城杯 2021]EasyP 1、题目 2、知识点 3、思路 [SWPUCTF 2022 新生赛]numgame 1、题目 2、知识点 3、思路 [鹤城杯 2021]EasyP 1、题目 2、知识点 php代码审计 3、思路 打开题目&#xff0c;出现一段代码&#xff0c;我们对代码进行审计 这里出现了很多不懂的…
阅读更多...
VBA学习(14):给1000个文件重命名

VBA学习(14):给1000个文件重命名

如下图所示&#xff0c;一个文件夹内包含了大量文件&#xff0c;现在需要在每个文件前面增加前缀"星光牌-" 为了使代码更具有通用性&#xff0c;更方便大家使用&#xff0c;我们还是采用两步走的方式。 首先&#xff0c;使用以下代码&#xff0c;将该文件夹内的文件…
阅读更多...
数据结构：3.3.4遍历应用例子

数据结构：3.3.4遍历应用例子

应用例子一&#xff1a; 改一下先序遍历的程序 例子二&#xff1a;求二叉树的高度 怎么求&#xff1f;树是递归定义的&#xff0c;所以思考求二叉树高度能不能用递归做。 二叉树的高度和左右高度有什么关系&#xff1f;二叉树的高度等于左右子树的最大高度加上一 求树高的前…
阅读更多...
废品回收小程序的优势？有什么开发功能？

废品回收小程序的优势？有什么开发功能？

随着环保意识的增强&#xff0c;废品回收市场备受大众关注。我国是人口大国&#xff0c;回收市场拥有巨大的发展空间&#xff0c;对于商家来说&#xff0c;废品回收市场的利润空间也非常大。 在科技快速发展时代&#xff0c;为促进我国资源回收利用&#xff0c;让居民便捷回收…
阅读更多...
开发环境安装---Visual Studio Code

开发环境安装---Visual Studio Code

开发环境安装---Visual Studio Code 1.官网下载Visual Studio Code2.安装步骤3.安装插件 1.官网下载Visual Studio Code VScode: https://code.visualstudio.com/ Visual Studio Code 简称 VSCode &#xff0c;2015 年由微软公司发布。可用于 Windows&#xff0c;macOS 和 Li…
阅读更多...
pycharm不能安装包的解决方法

pycharm不能安装包的解决方法

一直使用VScode写python&#xff0c;最近使用pycharm&#xff0c;但是pycharm不能安装包&#xff0c;类似这种 后面直接使用ALT F12跳转终端&#xff1a; pip install 需要添加的包 -i https://pypi.tuna.tsinghua.edu.cn/simple不报错了
阅读更多...
如何优雅地使用 console.log 打印数组或对象

如何优雅地使用 console.log 打印数组或对象

一、背景 使用 console.log 在控制台中打印数组或者对象时&#xff0c;很多时候它们的字段都是默认关闭的&#xff0c;需要手动一个个的点开&#xff0c;非常不直观且麻烦。 二、解决方案 使用 JSON.stringify() 的第三个参数 我们来看一下官方对于 JSON.stringify 的介绍 三、…
阅读更多...
【SQL每日一练】HackerRan-Basic Join-Challenges练习

【SQL每日一练】HackerRan-Basic Join-Challenges练习

文章目录 题目题析题解1.sqlserver 题目 编写一个查询来打印 hacker _ id、 name 和每个学生创建的挑战的总数。按照挑战的总数按降序对结果进行排序。如果不止一个学生创建了相同数量的挑战&#xff0c;那么按 hacker _ id 对结果进行排序。如果不止一个学生创建了相同数量的…
阅读更多...
NGINX_十二 nginx 地址重写 rewrite

NGINX_十二 nginx 地址重写 rewrite

十二 nginx 地址重写 rewrite 1 什么是Rewrite Rewrite对称URL Rewrite&#xff0c;即URL重写&#xff0c;就是把传入Web的请求重定向到其他URL的过程。URL Rewrite最常见的应用是URL伪静态化&#xff0c;是将动态页面显示为静态页面方式的一种技术。比如 http://www.123.com…
阅读更多...
odoo 入库发票三大凭证

odoo 入库发票三大凭证

注意对应科目 库存计价凭证 原材料 成品 供应商账单凭证 银行账单凭证
阅读更多...
分布式系列之限流组件

分布式系列之限流组件

概述 在高并发场景下&#xff0c;请求量瞬间到达&#xff0c;后端服务器即使有缓存、集群主备、分库分表、容错降级等措施&#xff0c;也有可能扛不住这请求量&#xff0c;因此可考虑引入限流组件。限流的目的&#xff1a;防止恶意请求流量或流量超出系统承载。 应用场景&…
阅读更多...
1.搭建SpringBoot项目三种方式

1.搭建SpringBoot项目三种方式

目录 1.使用Spring Initializr 1.1访问Spring Initializr: 1.2填写项目基本信息 1.3配置项目元数据: 1.4添加依赖: 1.5生成项目: 1.6下载项目: 1.7解压项目: 1.8导入项目到IDE: 1.9运行项目: 1.10创建控制器: 1.11访问应用 2.使用IDE&#xff08;集成开发环境&…
阅读更多...
秒杀技术方案

秒杀技术方案

参考文档&#xff1a; 面试必考&#xff1a;秒杀系统要如何设计&#xff1f;
阅读更多...
gorm 一对多

gorm 一对多

type Author struct {AID int gorm:"primary_key;AUTO_INCREMENT"Name stringAge stringSex string//关联关系Article []Article gorm:"ForeignKey:Auid;AssociationForeignKey:AID" } type Article struct {ArId int gorm:"primary_key;AUTO_I…
阅读更多...
MySQL Server和Server启动程序（二）

MySQL Server和Server启动程序（二）

mysql.server — MySQL Server启动脚本 Unix和类Unix系统上的MySQL发行版包括一个名为MySQL.server的脚本&#xff0c;该脚本使用mysqld_safe启动MySQL服务器。它可以在Linux和Solaris等系统上使用&#xff0c;这些系统使用System V风格的运行目录来启动和停止系统服务。它也被…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023