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

已于 2024-06-21 14:44:20 修改
阅读量971 收藏 10
点赞数 13
文章标签： 前端 javascript html vue.js
于 2024-06-19 11:45:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YUMIchenziyi/article/details/139798526
版权

第 三 方 组 件 e l e m e n t - u i在前端vue中的使用-ALOOGY WORLD (aloogychendl23.asia)

一、组件之间的传值

  • 组件可以由内部的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等多个版本。

下载好后，所以安装好的东西都会在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

YUMI～Aloogy@com
关注
vue-plugin-hiprint vue hiprint vue使用hiprint打印控件VUE HiPrint HiPrint简单使用
半只
03-07 1万+
/ 这样后续直接调用 hiprintTemplate.print({ 'canshu1': topText, 'canshu2': code }) 就可以打印了, 我这里是 方便容易阅读 就放在了方法里面。// 预览打印， 注意数据对象 { 'canshu1': topText, 'canshu2': code } 对象属性名称名称要和上面设置的一样。// 获取打印机列表, 如果在 main.js 中设置了取消自动连接客户端 是获取不到打印机列表的！// import引入的组件需要注入到对象中才能使用。
前端vue-puzzle-vcode验证码使用
qq_43235503的博客
01-04 1396
前端vue-puzzle-vcode验证码使用
uniapp富文本编辑-editor-vue2-vue3-wangeditor
Rudon滨海渔村的博客
03-08 2642
官方组件editor除了“微信小程序”，其他小程序想要实现富文本编辑，很难.vue3项目 + 官方组件editor，在初始化时有点麻烦，建议搭配第三方组件wangeditor内容另存为editor-icon.css即可 - 来自uniapp插件市场的editor的完整实例important;
vue编译原理之vue-template-compiler
热门推荐
前端精髓
08-11 1万+
vue-template-compiler是编译vue模板的包，传入模板返回AST抽象语法树。 const compiler = require('vue-template-compiler') const val = compiler.compile('<span class="active" :total="count">666</span>') 输出结果如下： const res = { ast: { type: 1, tag: 'span',
vue-plugin-hiprint使用教程【2】
一名业余前端的博客
12-22 5521
/ 文件名：printProvider.ts// 移除 旧的 customModule "元素"类型, 以避免重复// 这里不可用defaultModule，以为已经被插件占用了，如果用了，会导致与默认的provider冲突// 添加 customModule "元素"类型// 如果使用 hiprint.PrintElementTypeManager.build('.hiprintEpContainer2', "customModule") 这里会渲染这个 "常规" 分组名称。
vue-monoplasty-slide-verify自定义拼图出现位置
weixin_52651045的博客
10-12 4419
自定义拼图出现位置, 配合后台控制成功/失败触发时机 安装 vue-monoplasty-slide-verify npm install --save vue-monoplasty-slide-verify 在main.js中引入全局组件SlideVerify import Vue from 'vue'; import SlideVerify from 'vue-monoplasty-slide-verify'; Vue.use(SlideVerify); 参数详情可参考: https://gite
Vue 使用常量一定要用这个插件 vue-enum
半夏_2021的博客
04-30 1952
目前vue-enum2.0为适配vue3.0的版本，如需vue2.x的项目使用，请安装1.05版本
vue-monoplasty-slide-verify在H5页面的使用和参数说明
weixin_45781661的博客
06-17 3786
vue-monoplasty-slide-verify
vue-router(3.5.1)源码梳理
Caristop3_走在前端这条大道上
04-09 3120
如何理解vue-router源码？ vue-router 源码分析 date: 2021-03-26 1. import Vue VueRouter 进来 2. 使用Vue.use(VueRouter) 来进行router的install -> 使用mixin混入每个组件钩子“beforeCreate”&“destroyed”
手把手带你撸一遍vue-loader源码
vv_bug
07-31 3227
前言 前面写过两篇webpack实战的文章： webpack实战之（手把手教你从0开始搭建一个vue项目） 手把手教你从0开始搭建一个vue项目（完结） 强烈建议小伙伴们去看一下前面几个章节的内容， 这一节我们研究一下vue-loader。 介绍 Vue Loader 是什么？ Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件： <template> <div class="example">
Vue源码分析之-模版编译
前端高薪进击手记
07-10 438
模版编译的主要目的是将模版template 转换为 渲染函数 render。 顺便推荐几个实用网站小工具
picker插件 vue 移动端_基于 vue 的 picker 组件 vue-awesome-picker
weixin_36417344的博客
01-16 737
⚠️ DEPRECATED 本组件停止维护⚠️Vue 组件库请移步 Vant⚠️有赞前端大量坑位，内推私信vue-awesome-picker Features支持单列、多列和联级数据内置时间、日期数据滚轮 3D 效果颜色可配置DemoPS：Demo 已启用 Service Worker 试试离线访问吧Installationnpm install vue-awesome-picker --sa...
Vue源码分析——第三章
Lee的博客
09-10 590
Vue源码分析——第一章 Vue源码分析——第二章 // only used in dev mode //检测 val必需是数字 function checkDuration(val, name, vnode) { if (typeof val !== 'number') { warn( "<transition> explicit " + name + " duration is not a valid number - " + "got " + ...
水平居中的几种方法（总结）
致未来的你。的博客
09-11 757
水平居中的几种方法（总结）
基于Spring Boot构建一个点餐系统
嵌入式行业打工人，不定期更新博客。
09-08 1054
这个示例提供了一个非常基础的框架，你可以在此基础上扩展更多的功能，如用户认证、购物车管理、支付接口等。在实际开发过程中，还需要考虑诸如错误处理、事务管理、日志记录等方面的问题。此外，确保所有的API调用都是安全的，并且正确处理用户的输入数据，防止SQL注入等安全风险。如有疑问和需求，可以私信联系我。
构建高效 Python Web API：RESTful 设计与 GraphQL 实践
weixin_52392194的博客
09-11 1309
在现代 Web 开发中，API 是前后端通信的核心枢纽，设计一个高效且易于扩展的 API 是保证系统良好运行的基础。本文详细探讨 RESTful API 的设计准则，如何生成 API 文档，GraphQL 的应用，以及如何在 FastAPI 和 Django REST Framework 中实现分页、过滤、认证等功能。
计算机毕业设计 基于SpringBoot的课程教学平台的设计与实现 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
weixin_19164791635
09-12 863
本文介绍了一款基于Java、SpringBoot和Vue.js技术的课程教学平台。该平台服务于管理员、学生和教师，提供教学资源管理、课程信息浏览、作业提交与批改等功能，旨在优化教学流程，提升教育质量，促进教育资源的数字化共享，推动教育信息化发展。
（微服务项目）新闻头条——Day1
最新发布
weixin_73253843的博客
09-13 829
（微服务项目）新闻头条——Day1
Vue项目中使用gojs绘制E-R图的步骤与代码示例
在Vue项目中利用GoJS绘制E-R图是一种结合前端框架和数据可视化库的强大工具，本文将展示如何实现这个功能。首先，你需要在Vue项目中安装GoJS这个JavaScript库，它是一个用于构建交互式图表的开源工具，特别适合于...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值