setup 中实现响应式数据<template> <img alt="Vue logo" src="./assets/logo.png"> <h2>a:{{a}}</h2> <button @click="add">vue3</button> </template> <script> im
Element UI 项目分析讲过 vue 的插件开发原理,迫不及待的想要搭建一套自己的 插件库,那就从熟悉市面上最常用到的 vue UI 组件 ———— Element UI 开始吧。使用 vue init webpack-simple productName 初始化项目前提环境: node npm vue-cli# init vue init webpack-simple my-project
转载 2024-06-02 17:09:52
520阅读
文章目录组件介绍开发思路组件安装与使用标准用法自定义背景色和字体颜色点击和关闭的回调组件代码参数说明事件关于dxui组件组件介绍“Tag” 组件是一种常见的用户界面元素,通常用于显示标签或标记,以标识或分类内容、数据、选项或元素。标签通常用于给用户提供快速的视觉参考,帮助他们理解、筛选、组织或分类信息。以下是关于 “Tag” 组件的介绍和特点:标签显示:“Tag” 组件通常以文本或小图标的形
1、组件上使用v-model 官网解释:允许一个自定义组件在使用 v-model 时定制 prop 和 event。 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event, 但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。 使用 model 选项可以回避这些情况产生的冲突。 简单来讲就是
一、vue-video-player1.安装cnpm install vue-video-player -S cnpm install 'video.js' -S2.导入使用在main.js中导入:import VueVideoPlayer from 'vue-video-player'; import 'video.js/dist/video-js.css'; Vue.use(VueVideo
转载 2024-09-24 14:36:45
417阅读
文章目录组件介绍开发思路安装与使用组件代码参数说明事件关于dxui组件组件介绍“Dialog” 组件是一种用户界面元素,通常用于显示模态对话框或弹出窗口,以展示重要信息、提示、确认、表单填写或其他互动内容。这种组件提供了一种方式来引导用户的注意力,以进行特定任务或获取用户的响应。以下是关于 “Dialog” 组件的介绍和特点:模态对话框:“Dialog” 通常是模态的,这意味着在对话框打开时
利用axios拿到后台城市数据,定义两个数据,一个为右边索引栏的字母数组(大写),一个为索引和城市的对象数组先将右侧索引栏字母定义出来,遍历数据的拼音,取出首字母,排序,转大写再定义第二个数组,做一个双for循环,先循环索引的字母,将字母以对象的形式插入到空数组中,再循环数据中拼音的首字母大写,若找出数据中的首字母大写与索引的字母一样的话就进行插入,以对象的形式插入到刚刚的数组中,最后用v-for
转载 1月前
353阅读
结构及样式先拆分一下日历, 可将其上下拆分成两部分, 上面的 星期 部分, 和下面的 数据 部分, 一周7天限定了列数为7列, 行数会随当月天数及1号所在位置而有所不同.移动端亦应根据屏幕宽度自适应布局, flex布局就是一个很好的选择, 我们对数据部分进行下模拟, 先造一个长度为40数据都为0的数组如下:const dataArr = Array(40).fill(0, 0, 40)现在, 我们
在做vue3项目中时,每次使用都需要先进行引入,用ts的还好,会有爆红提示,如果是使用js开发的很多时候都会等到编译的时候才发现哪里哪里又没有引入,就会很浪费时间,偶然发现一款好用的组件可以帮助我们很好的解决这种问题。首先下载安装yarn add unplugin-auto-import -D  引入在vite.config.ts中 因为是插件 所以在我们的plugins下 写
转载 2024-06-26 08:38:24
1042阅读
前言最近刚刚结束项目,感觉收益颇多,因此记录一下,希望可以帮助到大家(我踩过的坑,大家就踩着我过去就行)背景本人java后端开发,公司临时需求需要弄一套权限管理系统,后端肯定没有问题,前端根据之前我使用的HTML,CSS感觉特别的繁琐和丑陋(主要本人不是专业前端),因此通过浏览相关资料,发现了vue+element+Admin(完美的后台前端解决方案),它基于vue+elementui 实现,详细
转载 2024-04-16 11:13:16
155阅读
一、vue组件之间存在什么样的关系?我们可以Vue组件之间的关系为如下两类:1)父子组件之间通信。2)非父子组件之间通信(兄弟组件、隔代关系组件等)。二、Vue中的组件通信方式1)父子组件之间通信:1. pros / $emit父组件通过props的方式向子组件传递数据,而通过$emit 子组件可以向父组件通信。注意:props 只可以从上一级组件传递到下一级组件(父子组件),即所谓的
转载 2024-09-25 15:12:18
93阅读
ElementUI是一套基于VUE2.0的桌面端组件库,ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格
原创 2023-10-08 10:46:08
285阅读
1:背景是一个web端的电商网站,根据点击的导航选项卡呈现不同得种类商品,首先这里说下我的路由结构是导航是一个组件,选项卡的内容又是单独的一个组件。这是导航组件的内容,这里主要通过v-for循环生成导航,没什么好说的,需要注意的是,这因为选项卡需要知道用户所点击的是哪个模块,所以在数据中有个typeId属性,这里需要把该属性值传给选项卡组件。<template> <ul cl
upload组件的参数属性action必选参数,上传的地址string——headers设置上传的请求头部object——multiple是否支持多选文件boolean——data上传时附带的额外参数object——name上传的文件字段名string—filewith-credentials支持发送 cookie 凭证信息boolean—falseshow-file-list是否显示已上传文件列
本文是在官方文档的基础上,更加细致的说明,代码更多更全。简单来说,更适合新手阅读 ①简单来说: 就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示。 ②动态切换: 在挂载点使用component标签,然后使用v-bind:is=”组件名”,会自动去找匹配的组件名,如果没有,则不显示;改变挂载的组件,只需要修改is指令的值即可。
vue自定义小日历组件一、前言自己开发的项目需要用到类似博客侧边栏小日历组件,觉得自己造一个比较随心所欲,更能满足自己的需求,所以决定自己开发一个。最终效果如图所示。二、日历样式我的这个日历组件主要分为导航栏区和主要内容区,导航栏按钮样式什么的都是自定义的,很简单,源码有就不罗嗦。主要讲一下日历内容的样式设计。日历内容都是用<ul>和<li>标签实现的,星期栏和日期栏分别为
12.ElementElement:是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库,用于快速构建网页。Element 提供了很多组件(组成网页的部件)供我们使用。例如 超链接、按钮、图片、表格等等~如下图左边的是我们编写页面看到的按钮,上图右边的是 Element 提供的页面效果,效果一目了然。我们学习 Element 其实就是学习怎么从官网拷贝组件到我们自己的页面并进行修改,官网网
目的:Vue 推荐在绝大多数情况下使用模板(template)来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数,它比模板更接近编译器。 render函数是什么:简单的说,在vue中我们使用模板 (template) 语法组建页面的,也可以使用 Render函数利用js语言来构建DOM因为Vue是虚拟DOM,所以在拿
转载 2月前
428阅读
在后台管理系统中,开发人员面临最多的开发任务,table 数据管理应有一席之地。而随之而来的,就是数不清的筛选,排序操作。而且每个table,都会配置一个分页用来更好的显示数据。本文就从这个需求触发,来聊一聊时间组件和分页组件的二次封装。为什么要二次封装elementui 的各种组件做的很友好,但偶尔神经的产品就是不喜欢大众风格,非得独树一帜这时候,在每个有 table 的位置都去做一个繁琐的分页
转载 2024-04-18 12:00:40
133阅读
组件封装的步骤1、确定组件结构 2、新增组件页面 3、修改新增的组件页面和HOME页面 4、HOME文件引入模块 5、测试【注】完成之前没做完的准备工作 因为以前写文件名都是采用驼峰法写,采用的是小写开头,但据观察VUE文件普遍采用的是大写开头,所以要把所有vue文件的文件名都改成大写开头,并在router/index.js中修改组件结构【注】你也可以不将Home文件另存为,个人习惯问题新增文件并
转载 2024-04-30 18:15:40
67阅读
  • 1
  • 2
  • 3
  • 4
  • 5