第 三 方 组 件 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.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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

怎么为自己的VPS选择合适的CPU和RAM？

怎么为自己的VPS选择合适的CPU和RAM？

为网站选择VPS&#xff08;虚拟专用服务器&#xff09;与为家庭或办公室选择台式机或笔记本电脑没有什么不同。基本上&#xff0c;您要做的就是查看硬件配置并比较功能和价格。 然而&#xff0c;虽然您可能对个人计算机所需的资源类型有一个粗略的估计&#xff0c;但为服务器获…
阅读更多...
API接口测试要注意什么？API接口如何开发？

API接口测试要注意什么？API接口如何开发？

API接口怎么保证数据安全&#xff1f;如何安全调用邮件API接口&#xff1f; API接口不仅能够确保系统的稳定性和可靠性&#xff0c;还能提高开发效率和用户满意度。然而&#xff0c;要进行有效的API接口测试&#xff0c;需要注意多个方面。AokSend将介绍一些关键点&#xff0c…
阅读更多...
全面赋能，永久免费！讯飞星火API能力正式免费开放

全面赋能，永久免费！讯飞星火API能力正式免费开放

2023年5月&#xff0c;讯飞星火正式发布&#xff0c;迅速成为千万用户获取知识、学习知识的“超级助手”&#xff0c;成为解放生产力、释放想象力的“超级杠杆”。 2024年5月&#xff0c;讯飞星火API能力正式免费开放&#xff0c;携手生态开发者加快大模型赋能刚需场景。 领…
阅读更多...
【软件工程】【22.10】p1

【软件工程】【22.10】p1

关键字&#xff1a; 软件需求分类、性能需求、数据流图加工、用例关系、捕获系统功能用例、RUP设计层术语、故障、调试、集成测试、需求分析过程、CMMI实践部件、CMMI能力等级 软件需求规约基本性质、模块控制、协作、UML结点、事件、RUP体系结构、RUP移交、静态评估技术、测…
阅读更多...
Java共享台球室无人系统支持微信小程序+微信公众号

Java共享台球室无人系统支持微信小程序+微信公众号

共享台球室无人系统 &#x1f3b1; 创新台球体验 近年来&#xff0c;共享经济如火如荼&#xff0c;从共享单车到共享汽车&#xff0c;无一不改变着我们的生活方式。而如今&#xff0c;这一模式已经渗透到了更多领域&#xff0c;共享台球室便是其中之一。不同于传统的台球室&a…
阅读更多...
DOPE-FITC在细胞定位、动态追踪等方面的应用-星戈瑞

DOPE-FITC在细胞定位、动态追踪等方面的应用-星戈瑞

DOPE-FITC作为一种荧光标记磷脂&#xff0c;在细胞生物学研究中发挥着科研作用。其荧光特性和与细胞膜的亲和性&#xff0c;使其成为细胞定位、动态追踪等方面的工具。 细胞定位 DOPE-FITC能够有效地标记细胞膜&#xff0c;使得细胞膜在荧光显微镜下呈现出明亮的绿色荧光。这种…
阅读更多...
triton矩阵乘以及缓存优化

triton矩阵乘以及缓存优化

这里triton.cdiv(M, META[BLOCK_SIZE_M]) * triton.cdiv(N, META[BLOCK_SIZE_N])&#xff0c;所以grid的形状是一维的。 观察函数内部 pid tl.program_id(axis0)&#xff0c;因为grid是一维的&#xff0c;所以这里就是总块数&#xff0c;我们假设实际A*BC&#xff0c; A&…
阅读更多...
ubuntu链接mysql

ubuntu链接mysql

C链接mysql 报错 sudo apt-get update sudo apt-get install libmysqlclient-dev 指令编译 g -o mysql_example mysql_example.cpp -I/usr/include/mysql -lmysqlclient g mysql_test.cpp mysql_config --cflags --libs 安装mysql sudo apt updatesudo apt install mysql-…
阅读更多...
跟着ChatGPT4o学全栈，我看到未来“学习”的模样

跟着ChatGPT4o学全栈，我看到未来“学习”的模样

引言 大模型是否会取代人类&#xff0c;以及它将取代哪些工作&#xff0c;这或许是许多人焦虑的问题。对此&#xff0c;众说纷纭&#xff0c;网络上各种观点层出不穷。虽然这些问题对未来的重要性不容忽视&#xff0c;但它们对于当下的我们缺少实际的指导意义。因此&#xff0…
阅读更多...
SpringMVC系列十一: 文件上传与自定义拦截器

SpringMVC系列十一: 文件上传与自定义拦截器

文章目录 SpringMVC文件上传基本介绍需求分析 / 图解应用实例-代码实现 自定义拦截器什么是拦截器自定义拦截器执行流程分析图自定义拦截器应用实例快速入门注意事项和细节Debug执行流程 多个拦截器多个拦截器执行流程示意图应用实例1代码实现注意事项和细节 应用实例2 作业布置…
阅读更多...
[创业之路-118] ：制造业企业的必备管理神器-ERP-制造业的基本方程式与ERP的发展历程，哪些企业需要ERP?

[创业之路-118] ：制造业企业的必备管理神器-ERP-制造业的基本方程式与ERP的发展历程，哪些企业需要ERP?

目录 一、制造业的基本方程式 1.1 基本方程式 1.2 制造的数学模型 二、ERP的发展历程 2.1 发展历程 2.2 比较 三、过往产品回顾 3.1 定货点法 3.2 时段式ERP 3.3 闭环式MRP 3.4 ERP 四、哪些企业需要ERP 4.1 概述 4.2 软件企业需要ERP吗&#xff1f; 一、制造业的…
阅读更多...
【计算机网络篇】数据链路层（6）共享式以太网_网络适配器_MAC地址

【计算机网络篇】数据链路层（6）共享式以太网_网络适配器_MAC地址

文章目录 &#x1f354;网络适配器&#x1f354;MAC地址&#x1f5d2;️IEEE 802局域网的MAC地址格式&#x1f4d2;IEEE 802局域网的MAC地址发送顺序&#x1f95a;单播MAC地址&#x1f95a;广播MAC地址&#x1f95a;多播MAC地址&#x1f50e;小结 &#x1f354;网络适配器 要将…
阅读更多...
汇川h3U用modbus配置扩展IO

汇川h3U用modbus配置扩展IO

扩展IO模块为4个艾莫迅RTU简易版&#xff0c;16输入&#xff0c;16输出。物理连接为RS485&#xff0c;A B两根线。 下面为H3Umodbus配置&#xff0c;关键是协议选择为&#xff1a;MODBUS主站配置。协议配置&#xff1a;和从站保持一致 通过下图的程序及配置&#xff0c;已经可…
阅读更多...
VB打开word文档

VB打开word文档

在编码之前&#xff0c;先安装Microsoft.Office.Interop.Word Imports Microsoft.Office.InteropModule Module1Sub Main() 创建Word应用程序实例Dim wordApp As New Word.Application() 设置为可见wordApp.Visible True 打开指定的Word文档Dim doc As Word.Document wordA…
阅读更多...
期货分仓软件的搭建流程

期货分仓软件的搭建流程

期货分仓软件的搭建流程&#xff0c;是一个涉及多个环节的复杂过程。首先&#xff0c;明确功能需求是至关重要的&#xff0c;这有助于更好地规划软件的开发和设计。接下来&#xff0c;技术选型是关键一步&#xff0c;需要根据开发经验和项目需求&#xff0c;选择适合的编程语言…
阅读更多...
maven archetype项目构架

maven archetype项目构架

1、设置环境变量 set MAVEN_HOMED:\SF\java\apache-maven-3.6.3 set path%path%;%MAVEN_HOME%\bin;2、制作archetype mvn -s "D:\SF\java\apache-maven-3.6.3\conf\settings.xml" archetype:create-from-project -DpackageNamecom.demo.esb-s:指定maven的setting文…
阅读更多...
华为---VLAN-配置Eth-Trunk链路聚合（三）

华为---VLAN-配置Eth-Trunk链路聚合（三）

6.3 配置Eth-Trunk链路聚合 6.3.1 原理概述 在没有使用Eth-Trunk前&#xff0c;百兆以太网的双绞线在两个互连的网络设备间的带宽仅为100Mbit/s。若想达到更高的数据传输速率&#xff0c;则需要更换传输媒介&#xff0c;使用千兆光纤或升级成为千兆以太网。这样的解决方案成本…
阅读更多...
肩背筋膜炎怎么治疗最有效

肩背筋膜炎怎么治疗最有效

肩背筋膜炎是一种常见的肌肉骨骼疾病&#xff0c;其症状主要包括&#xff1a;肩背区域疼痛&#xff1a;由于筋膜组织受到损伤&#xff0c;肩背部位会出现明显的疼痛&#xff0c;疼痛可能会放射到周围的其他部位&#xff0c;严重时会影响睡眠和休息。肌肉紧张和僵硬&#xff1a;…
阅读更多...
【计算机网络仿真实验-实验3.1、3.2】交换路由综合实验

【计算机网络仿真实验-实验3.1、3.2】交换路由综合实验

实验3.1 交换路由综合实验——作业1 一、实验目的 运用实验二&#xff08;可前往博主首页计算机网络专栏下查看&#xff09;中学到的知识&#xff0c;将这个图中的PC机连接起来组网并分析&#xff0c;本篇涉及代码以截图展示&#xff0c;过于简单的代码及操作不再详细介绍&…
阅读更多...
领航未来！信息技术服务管理体系如何点燃企业数字化转型的“火箭引擎”

领航未来！信息技术服务管理体系如何点燃企业数字化转型的“火箭引擎”

在当今这个数字化飞速发展的时代&#xff0c;信息技术已经成为企业运营和管理的核心驱动力。随着企业对于信息化、智能化的需求日益增长&#xff0c;如何构建一套科学、高效的信息技术服务管理体系&#xff0c;不仅关乎企业内部的运营效率&#xff0c;更直接影响着企业的市场竞…
阅读更多...
最新文章

Copyright @ 2022~2023