这一节我们一起学习 vue 中的计算属性(computed properties)和侦听器(watch)。在之前,我们学习过 vue 表达式插值:<div id="example">
{{ message.split('').reverse().join('') }}
</div>
复制代码如果在模板中放入太多的逻辑会让模板过重且难以维护。我们可以把方法写在事件处理函数
/ 移动端页码按钮的数量端默认值5。
原创
2024-09-05 10:10:00
182阅读
一、组件化开发思想
1. 什么是组件化开发
组件化开发指的是:根据封装的思想,把页面上可重用的部分封装为组件,从而方便项目的开发和维护。例如:ibootstrap - Bootstrap 可视化布局系统 所展示的效果,就契合了组件化开发的思想。用户可以通过拖拽组件的方式,快速生成一个页面的布局结构。
2. 组件化开发的好处
前端组件化开发的好处主要体现在以下两方面:
提高了前端代码的复用性和灵活
原创
2023-12-05 01:55:33
689阅读
.vue 脚手架的安装就不多说了,说下其他常见的错误1、安装问题 :首先我们在安装的时候,有些人会用npm直接安装 有些会用cnpm 安装 但是两个不能共用 不然会报错,为此我吃过不少亏2、文件存放错误:一般src下的assets存放静态资源文件,当时访问时,需要考虑路径的问题。如果存放在static下就不用考虑路径问题,直接以static开头的路径3、端口冲突错误:需要改
Vue 虚拟列表是一种用于优化大型列表的渲染性能的技术。它通过只渲染可见部分的列表项,以及通过动态添加和删除DOM元素的方式来减少DOM操作,从而提高应用程序的响应速度和性能。Vue 虚拟列表的实现依赖于一些关键技术,包括虚拟滚动、缓存池和动态渲染。虚拟滚动是 Vue 虚拟列表的核心技术之一。它通过仅在屏幕上显示可见部分的列表项,而不是整个列表来减少渲染所需的时间和资源。虚拟滚动的实现涉及到计算列
转载
2024-10-30 16:22:36
105阅读
单页面应用程序介绍,vue-cli介绍,安装vue-cli,介绍vue项目的目录结构,vue项目的运行流程
原创
2023-12-14 09:50:19
56阅读
前言:应上级要求,搭建一个公司内部的vue组件库,由于临近我预计的离职时间,所以只将流程梳理实践了一遍。假设组件库名称为ui-library。一、使用vue-cli3创建ui-library项目vue create ui-library创建项目时选择自定义模板,我的配置如下 记得vue版本需要选择2.x。ui-library目录如下 二、在根目录添加vue.conf
转载
2023-12-07 22:15:17
58阅读
由于后期项目要使用ts,所以先学习下,这是第一次使用ts,要是有不足之处,还请多指教。最开始因为webpack版本问题搭了好几次没成功,果然失败乃成功之母,古人诚不欺我,每次学习都是在写bug解决bug继续创造bug的循环里痛并快乐着。由于使用的是Vue-cli2 + webpack3.6.0版本,按照webpack3的方式来搭建的,所以安装时一定要注意自己的版本与插件版本哈。前边儿初始化Vue项
转载
2023-11-01 16:44:44
162阅读
1.组件拆分1.组件实质上也是一个vue实例,因此组件中也可以使用vue的对象属性,反过来每一个vue实例也是一个vue组件(注:1.唯一不同的是el是根实例的特有选项,2.组件中的data必须是一个函数);2.如果vue实例中没有template模板的定义,那么vue会把el挂载点下的html作为vue实例的模板;3.模板中如果还有子组件,父组件调用子组件的时候,通过属性的方式进行调用,那么子组
转载
2024-07-12 15:52:11
238阅读
注意事项,并比较了适用场景,帮助开发者根据项目需求选择最佳通信方案。
什么是组件,构成组件的三部分,定义(过滤器,监听器,计算属性,方法区),style开启less语法
原创
2023-12-14 09:50:52
99阅读
# JDate 日期组件 使用文档
###### 说明: antd-vue日期组件需要用moment中转一下,用起来不是很方便,特二次封装,使用时只需要传字符串即可
## 参数配置
| 参数 | 类型 | 必填 |说明|
|--------------|---------|----|---------|
| placeholder |string |
开发小程序中,遇到的wepy的几点坑,记录一下;1.定时器: 在页面中有需要用到倒计时或者其他定时器任务时,新建的定时器在卸载页面时一定要清除掉,有时候页面可能不止一个定时器需求,在卸载页面(onUnload钩子函数)的时候一定要清除掉当前不用的定时器 定时器用来做倒计时效果也不错,初始时间后台获取,前端处理,后台直接在数据库查询拿到的标准时间(数据库原始时间,T分割),前端需要正则处理一下这
在前端开发中,表格组件是必不可少的,尤其是在处理大量数据时,如何高效地展示这些数据就显得尤为重要。为了优化性能,许多开发者开始使用“vue2 Table 虚拟化表格”,即通过虚拟化技术只渲染可视区域内的内容,从而提升用户体验和页面加载速度。接下来我们将详细讨论在实施虚拟化表格过程中遇到的种种问题,并提供解决方案。
## 版本对比
在进行虚拟化表格的开发时,首先得考虑到不同版本库的特性以及它们之
效果图 1、先创建一个Vue项目2、安装element-ui3、修改main.js,引入element-ui4、新建NewContact.vue文件,对原HelloWorld.vue修改,使其路由指向newcontact(新url:http://localhost:8080/#/newcontact)5、打开router/index.js,添加该路由6、添加页面内容就OK7、数据如果想要
传统的无限滚动数据表格并不会一次性把所有数据都加载并渲染出来,它首先加载一批数据,这批数据要远大于一屏数据的承载量,但也不能太多,避免首屏数据加载效率不佳,具体数量可以由开发者根据实际情况确定。接着通过监控滚动条位置来实时加载更多的数据,比如当滚动条触底时(或即将触底时),开始加载当前已显示的数据集之后的数据,当滚动条触顶时(或即将触顶时),开始加载当前已显示的数据集之前的数据先创建一个视图模板&
转载
2024-07-13 09:13:22
910阅读
在动态组件上使用 keep-alive我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件:<component v-bind:is="currentTabComponent"></component>当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。例如我们来展开说一说这个多标签界面:Pos
这里写自定义目录标题?效果?需求??行,看完需求,那咱就开始!?组件结构?目录结构?index.vue?kTable.vue?KtableColumn.vue?Kline.vue?至此完成?♀️但是还是有很多的问题??1. 无法实现更加自由的书写,只支持我规定的写法??2. 数值传递层级太多,在长列表时会出现问题,?3. 耦合很严重??最后是,如果你觉得我哪里写的有问题,欢迎在评论区指出来,我们
转载
2023-10-11 09:55:34
1984阅读
文章目录一、组件1. 创建组件2. 引用组件3. 组件之间如何传递参数一、组件1. 创
原创
2022-09-30 10:25:02
375阅读
? 背景最近项目中需要制作一个颜色选择器(如下图展示),今天分享一下这个组件功能。希望能抛砖引玉,给大家带来启发。?需求功能icon或者文字颜色需要选择颜色?设计开发先说一下我的开发环境版本:node: v11.3.0npm: 6.4.1vue:2.5.11如果不是以上版本也没关系,今日分享的思路,相信你可以自己造出来~首先点击空白收缩: this.handler = function(e) {
原创
2023-09-07 20:40:25
2096阅读