ui库会对主要的单选框,多选框,级联选择器,滑块,日期/时间选择器,进度条,分页,弹框,通知,导航菜单,步骤条等截图比较 一、前台UI组件库 1.Element 优点:中文文档,ui种类比较全,ui...5.Quasar 构建响应式网站,PWA,混合移动应用程序 打不开,应该是被墙了,无法评论,只有项目 6.Buefy 优点:时间选择器数字很大有特点 缺点:非中文文档 ? ? ? ? ? ? ? ?...19.vue2-calendar ★181 - 支持lunar和日期事件的日期选择器 ? ? 20.vue-datepicker ? 21.vue-datepicker ?...26.vue-quill-editor ★149 - 基于Quill适用于Vue2的富文本编辑器 ? 27.vue-chartkick ★22 - VueJS一行代码实现优美图表 ?...30.vuwe ★107 - 基于微信WeUI所开发的专用于Vue2的组件库 ? 31.cubeex ★33 - 包含一套完整的移动UI ? ? ? ? ?
对于上下文,它是一个表单组件,用于跟踪其输入的有效性状态。 下面的代码片段是以Options API格式编写的,但除了指定的地方外可以在Vue2 和 Vue2中使用。...,可以使用 sumit 事件 ,但我更喜用 input 事件。...表单事件7个: focus, blur, input, select, change, reset, submit 等,具体详解看这篇文章:https://blog.csdn.net/qq_4379.....我们将监听器附加到父元素()上,当事件发生在它的子元素(、、等)上时就会被触发。...此外,由于使用的是作用域槽,我们将表单的状态提供给父级,所以父级可以对有效性的变化做出反应。
需要手动设置样式保持表单对齐 Bug Fixes Popconfirm: 修复确认框中按钮默认大小 Upload: 修复上传中状态文案 Popup: 修复 hideEmptyPopup 在动态改变内容时不生效的问题...for Web 发布 0.39.1 版 Bug Fixes Upload: 修复 success 事件先于 progress 事件触发时,上传文件 loadingFile 值不正确的问题 修复最大数量限制...、load 时选中项显示的问题 修正 TreeSelect 的交互行为,与 Select 保持一致 修复 filter 状态下,树无法折叠的问题;修复 lazy 状态下,无法正确展示 label 的问题...(改动之前为:滚动一直触发) Table: 自定义列配置功能:多级表头和列显示配置同时存在时,无法进行正确的列配置的问题,列配置仅显示了第一层表头 verticalAlign 不生效问题 右上角出现文字穿透问题...Datepicker: 修复区间选择时间,月份/年份选择时间类型异常的问题 InputNumber: 修复不能输入小数点问题 Popconfirm: 修复按需加载样式丢失问题 Select: 修复首次
849 - 管理大列表的vue-recyclerview VueCircleMenu ★838 - 漂亮的vue圆环菜单 vue-infinite-scroll ★779 - VueJS的无限滚动指令 buefy...- vue轻量级进度条 Gokotta ★375 - 简单的音乐播放器 vue-sortable ★373 - 轻松添加拖拽排序 vue-picture-input ★352 - 移动友好的图片文件输入组件...组件 vue-impression ★134 - 移动Vuejs2 UI元素 vue-mdEditor ★131 - 基于VUE的markdown文本编辑器 vue-typer ★130 - 模拟用户输入选择和删除文本的...的图片输入框 vue-video ★96 - Vue.js的HTML5视频播放器 vue-touch-ripple ★95 - vuejs的触摸ripple组件 vue-event-calendar ★...vue-truncate-filter ★10 - 截断字符串的VueJS过滤器 vue-router-storage ★9 - vue历史路由持久化的解决方案 vue-input-autosize ★9 - 基于内容自动调整文本输入的大小
总体概述 优点都是比较比出来的,那么 Vue3 对比 Vue2 优势有 更小、更快、更友好、优化方案 typeScript支持 API 设计一致性 自身可维护性 开放更多底层功能 1.更小 移除不常用功能...,引入 tree-shaking ,打包体积更小 2.更快 优化 diff 算法、静态提升、事件监听缓存、ssr优化等 3.更友好 提出 composition Api,无论代码的编写还是查看都更加清晰方便...根据功能将不同的模块拆分到 packages 目录下面不同的子目录中 Vue3是基于 typeScript 编写的,提供了更好的类型检查,能支持复杂的类型推导 2)性能优化 体积优化、编译优化、数据劫持优化 在 vue2...并不能检测对象属性的添加和删除 vue3 是通过 proxy 监听整个对象,那么对于删除还是监听当然也能监听到 算法优化 vue3 标记了动态节点,在patch阶段,只会比较动态节点,静态的直接略过了 而 vue2...context) { /* * 使用 `toRefs` 创建对prop的 `author` property 的响应式引用 * 确保我们的侦听器能够对 author prop 所做的更改做出反应
组件库 Vue2 for Web 发布 0.34.0 版 Tag variant :属性可选值更改,存在不兼容更新 Calendar: 控制区域相关问题修复 Select : 搜索、过滤场景相关问题修复...//github.com/Tencent/tdesign-vue/releases/tag/0.34.0 Vue3 for Web 发布 0.8.0 版 Tag variant :属性可选值更改,存在不兼容更新...Slider :修复双向绑定值失效 Calendar :控制区域相关问题修复 Select:修复可过滤状态下,需要双击背景才可关闭下拉框 Input :修复输入框相关样式重复引入的问题 详情见:https...github.com/Tencent/tdesign-vue-next/releases/tag/0.8.0 React for Web 发布 0.24.2 版 Tag :variant 属性可选值更改,存在不兼容更新...Form : 调整 reset 事件逻辑,存在不兼容更新 Tree : 修复按需引入央视丢失问题 Select :修复 Option.name 丢失导致类型判断失效问题 Popup :修复 zIndex
组件库Vue2 for Web 发布 0.42.0BREAKING CHANGESDialog:移除 transform 定位实现方案,如有覆盖 Dialog 组件样式的情况请注意 DOM 结构有变动,...存在不兼容更新FeaturesTable:筛选对话框输入筛选内容之后按回触发筛选过滤筛选功能支持自定义组件方式,示例:columns:[{ filter:{ component:DatePicker,...props:{} } }]拖拽调整宽度,支持设置最小宽度和最大宽度 column.resize拖拽排序事件,新增参数 data 和 newData,分别表示变更前后的数据Popup:支持动态设置 trigger...& placementSelect:select组件支持虚拟滚动重构为 composition API 实现,组件底层基于 SelectInput 实现Upload:图片上传文案支持自定义新增 InputAdornment...组件Bug FixesPopup:修复初始化 visible 为 true 时的定位抖动问题Table:修复树形结构拖拽排序引起展开收起异常问题修复动态数据场景下合并单元格支持Select:修复 inputProps
组件库 ---- Vue2 for Web 发布 0.38.0 版 ⚠️BREAKING CHANGES Input/Textarea: Input 外部传入样式挂载至 t-input__wrap 层级的...allowUploadDuplicateFile 属性,支持重复文件名的文件上传 详情见:https://github.com/Tencent/tdesign-vue/releases/tag/0.38.0 Vue2...for Web 发布 0.38.1 版 Bug Fixes SelectInput: 实现 enter 事件 Features SelectInput: 修复单选可输入状态下的 focus 时 input...0.29.0 版 ⚠️BREAKING CHANGES Input: 外部传入样式挂载至 t-input__wrap, 如需挂载到 t-input,请使用 inputClass api Bug Fixes Select...0.7.1 版 Bug Fixes Loading: 修复 loading 默认值为 true 但不显示的问题 Stepper: 修复图标偏移的问题 Search: 修复 action-click 事件不生效的问题
此处我们先用v-bind:(解析属性标签举例子) 功能:用于解析标签(包括:标签属性、标签体内容、绑定事件.....)。 ...} } 以上的结果是在浏览器中如果在input框中输入东西是...·如果此时我们同时写了两个绑定事件(v-bind:和v-model:)这时我们要是改变v-model:的input框中的数据 ·v-bind:的input框中的数据也会随之改变,因为这是一个连锁反应...·注意:v-model:这个双向绑定只能应用到表单类元素上(输入类元素) 总结:vue2有两种数据绑定的方式: 1.单项数据绑定(v-bind:)数据只能从data流向页面...备注: 1.双向绑定一般都是应用在表单雷元素上(如:input、select等) 2.v-model:value可以简写成v-model
组件库 Vue2 for Web 发布 0.40.3 版 Bug Fixes Timepicker: 修复手动清空 value 时异常的问题 Textarea: 修复输入数字零时显示异常的问题 Menu...: 修复局部注册组件时报错的问题 Select: 修复可过滤的选择器提前换行的问题 Features Form: 默认渲染 extra DOM 节点 Dialog: 新增 showInAttachedElement...: 修复 max 数值过大浏览器崩溃问题 Breadcrumb: 修复面包屑初始样式被覆盖问题 GlobalConfig: 修复 ts 类型问题 Menu: 修复 MenuGroup 嵌套时样式问题 Select...: 修复输入事件异常 Dialog: 修复 destory 函数未真正销毁组件问题 Features Form: 新增动态表单能力,可使用 FormList 组件管理表单项 Popconfirm: 移除...tdesign-react/releases/tag/0.31.0 Miniprogram for WeChat 发布 0.8.0 版 ⚠️BREAKING CHANGES CheckboxGroup: change 事件返回的
组件库Vue2 for Web 发布 0.46.3 FeaturesGrid: align 可选值新增 start/end/center,修复 justify和 align 同为 center 属性冲突问题...Input: 优化 clearable 按钮显示逻辑,区分 password 输入框Popconfirm/Table : 组件样式优化Watermark: 新增Watermark 水印组件 Bug FixesuseModel...: 兼容因 v-model 初始值为 undefined 导致 useModel 失效的问题Table:修复 editableCellState 表现与预期相反的问题修复多级表头下不支持调整列宽的问题Select...Bug FixesTable:修复了editableCellState 表现与预期相反的问题允许在表头分割线一定范围内触发列宽调整逻辑Cascader:修复单选模式下 clearIcon无法删除修复在输入时...Alert: 增加关闭动画 && 修复 onClosed 回调事件Select: option 设置 content 未生效问题Table:修复 tree-select 首次渲染出现 key 为 undefined
组件库Vue2 for Web 发布 0.43.0Breaking Changes默认移除全局 reset 样式引入,可从 tdesign-vue/dist/reset.css 中单独引入,存在不兼容更新...Enter 时不触发新标签InputNumber: 修复enter事件不触发的问题Affix: 节点挂载后吸顶没有执行的问题详情见:https://github.com/Tencent/tdesign-vue...Select: 修复使用 onEnter 事件报错Select: 修复远程搜索功能失效了Cascader: 修复可过滤情况下,结果为空时候的 popup 宽度问题Input: 修复 type 为 password...时 clearable 属性不生效Form: submit 和 reset 现在不会触发 submit 和 reset 事件Form: submit 实例方法兼容 safari 浏览器 (https:...: 修复输入部分特殊符号过滤时组件崩溃的问题Table: 修复仅有firstFullRow渲染为空的问题Select: onChange事件回调参数缺失Form: 修复 number 校验无效问题详情见
组件库 Vue2 for Web 发布 0.41.6 Features ColorPicker:新增颜色选择器,使用请参照 官网 Bug Fixes Table: EnhancedTable,树形结构中...:新增事件 onPopupVisibleChange Select:新增 onChange 事件参数,trigger,用于表示当次变化的触发来源 Bug Fixes test:renderTNode 默认参数和...toggleExpandData 和 expandAll/FoldAll 混合使用时,树形结构展开有误 Slider:修复slider部分tooltip属性设置无法生效问题 Input:清除操作触发了非必要事件...onBlur Drawer:修复按键 ESC 关闭无法触发 Select:修复使用 creatable 创建新条目时,会出现额外空选项 Select:修复 showArrow 属性设置为 false,...github.com/Tencent/tdesign-vue-next/releases/tag/0.15.1 React for Web 发布 0.34.3 Bug Fixes Table:处理table过滤输入失焦问题
在vue3中,对于不参与更新的vnode,会做静态提升,只会被创建一次,在re-render时直接复用。 静态提升可以理解为第一次render不参与更新的vnode节点的时候,保存它们的引用。...事件侦听缓存 在vue2中,我们写的@click="onClick"也是被当作动态属性,diff的时候也要对比。但我们知道它不会变化,比如变成@click=“onClick2”,绑定别的值。...这样在render和diff两个阶段,事件侦听属性都节约了不必要的性能消耗。...两者有点不匹配。...也做出了很多优化,Compostion API让代码的组织形式更好。vite开发构建工具让开发体验更好,Tree shaking让包更小、性能更优。
在vue3中,对于不参与更新的vnode,会做静态提升,只会被创建一次,在re-render时直接复用。 静态提升可以理解为第一次render不参与更新的vnode节点的时候,保存它们的引用。...事件侦听缓存 在vue2中,我们写的@click="onClick"也是被当作动态属性,diff的时候也要对比。但我们知道它不会变化,比如变成@click="onClick2",绑定别的值。...这样在render和diff两个阶段,事件侦听属性都节约了不必要的性能消耗。 我曾经维护过一个拥有很庞大dom树的页面。...四,更好的TS支持 vue2不适合使用ts,原因在于vue2的Option API风格。options是个简单对象,而ts是一种类型系统、面向对象的语法。两者有点不匹配。...也做出了很多优化,Compostion API让代码的组织形式更好。vite开发构建工具让开发体验更好,Tree shaking让包更小、性能更优。
组件库Vue2 for Web 发布 0.43.3 FeaturesCascader: 基于 select-input 重构, 文本过长省略使用原生 title 展示全文本,不再使用 tooltip 组件增加...TimeRangePicker 修复允许输入的缺陷Select: 修复远程搜索动态生成选项失败的缺陷虚拟滚动支持远程搜索场景Dialog: 修复阻止冒泡导致 popup 无法正常关闭Drawer: 修复头部渲染异常问题...避免高频输入场景与滚动事件重复更新 value 的异常Tree: 取消修改 value 类型, 将传入 TCheckBox 组件的 name 转为 string 类型Cascader: 修复筛选无法输入问题...bugSlider: 修复 tooltipProps 为布尔值时丢失响应性问题Select: 多选下 hover 出现换行的异常Dialog: 内部样式未使用prefix导致替换前缀方式的样式丢失Input...Bug FixesMessage: 优化用法,支持 v-modelDateTimePicker: 修复DateTimePicker组件value为空时无法正常展示的问题Search: 修复 blur 事件参数返回错误的问题
组件库Vue2 for Web 发布 0.43.2 FeaturesForm:添加内置校验方法 whitespace新增校验触发方式 trigger: 'blur' - 现在FormItem.label...: 修复多选下换行提前占满一行的问题Upload: 修复 disabled 依然可删除问题colorPicker: 修复在 ColorTrigger 输入色值时,自动format输入值并回填的问题table...属性不生效的问题NoticeBar: 修复公告不滚动问题Dialog: 修复点击遮罩层不会触发 close 事件的问题详情见:https://github.com/Tencent/tdesign-miniprogram...cancel 事件更名为 action-click新增 blur 和 focus 事件Collapse:存在不兼容更新accordion 更名为 expandMutex移除 title、labelWidth...headerRightContent移除 labelWidth、headerClickable 属性新增 default、expandIcon 属性移除 click 事件Drawer: 存在不兼容更新移除
组件库 Vue2 for Web 发布 0.41.0 版 ⚠️BREAKING CHANGES Table:拖拽排序修改为 drag=sort 表示列拖拽排序,drag=row 表示行拖拽排序,drag...TdPrimaryTableProps 关于 onCellClick 的 TS 类型冲突 Alert:修复 ts 类型错误 Cascader: 修复可过滤状态下的下拉面板拉起闪烁的问题 修复可过滤状态下的输入内容未被正常销毁的问题...label 的问题 修复 onBlur 和 onClear 触发时,不会清除 filter function 的问题 Features Select:去掉选中和下拉项中的 title 属性 Table...:支持树形结构展示,行展开或收起时触发 onTreeExpandChange 事件 Collapse:新增 Collapse 折叠面板组件,使用请参照 官网 Tree: Tree 组件实现嵌套结构渲染能力...Bug Fixes Select: 修复多选+可搜索条件下输入问题 修复 multiple 模式删除问题 Progress:修复 trackColor 默认值导致背景色显示错误问题 Dialog:修复
vue3.0的各种表现还是非常棒的,相比vue2.0确实上了一个台阶,据说在客户端渲染效率比vue2提升了1.3~2倍,SSR渲染效率比vue2提升了2 ~3倍。在面试的过程中可能也会被问到。...中创建一个虚拟节点button,属性里面多了一个事件onclick,内容就是count++ 在vue3中就有缓存了,它认为这里的事件处理是不会变化的,不是说这次渲染是事件函数,下次就变成别的了,于是vue3...会智能地发现这一点,会做缓存处理,它首先会看一看缓存里面有没有这个事件函数,有的话直接返回,没有的话就直接赋值为一个count++函数,保证事件处理函数只生成一次,如下图: Block Tree Block...编译器可以对每一个节点进行标记,然后在根节点中记录后代节点中哪些是动态节点,记录之后,在对比的过程中它不是整棵树进行对比,而是直接找到根节点,我们叫block节点,对比动态节点数组就可以了,这样就会略过所有的静态节点,也不涉及对树的深度遍历了...它会记录哪个节点是动态内容,并且做上标记 举个栗子: {{user.name}} vue3会在编译的时候,它会对节点做上标记
vue3.0的各种表现还是非常棒的,相比vue2.0确实上了一个台阶,据说在客户端渲染效率比vue2提升了1.3~2倍,SSR渲染效率比vue2提升了2 ~3倍。在面试的过程中可能也会被问到。...中创建一个虚拟节点button,属性里面多了一个事件onclick,内容就是count++ 在vue3中就有缓存了,它认为这里的事件处理是不会变化的,不是说这次渲染是事件函数,下次就变成别的了,于是vue3...会智能地发现这一点,会做缓存处理,它首先会看一看缓存里面有没有这个事件函数,有的话直接返回,没有的话就直接赋值为一个count++函数,保证事件处理函数只生成一次,如下图: [image.png] Block...编译器可以对每一个节点进行标记,然后在根节点中记录后代节点中哪些是动态节点,记录之后,在对比的过程中它不是整棵树进行对比,而是直接找到根节点,我们叫block节点,对比动态节点数组就可以了,这样就会略过所有的静态节点,也不涉及对树的深度遍历了...image.png] 举个栗子: {{user.name}} [image.png] vue3会在编译的时候,它会对节点做上标记
领取专属 10元无门槛券
手把手带您无忧上云