- 博客(23)
- 收藏
- 关注
RSS订阅原创 组件封装方法.
1.当一个功能比较复杂的时候,就应该单独封装成一个组件.因为所有功能都写在一个文件里面就会让文件过大,后期不好维护.2.文件应该按功能特点划分进不同的文件夹.因为所有文件如果都放一起后期会很不好维护....
2021-11-01 20:50:27
245
原创 路由跳转的实现.
为什么要使用路由?因为路由可以跳转页面,局部刷新组件.静态路由跳转1.在路由文件里配置路由.path可以为项目添加一个路径,先添加路径.component可以为该路径添加组件,所以也要添加内容.2.在相应的地方添加跳转事件.this.router.push(路径)push方法可以返回.this.router.push(路径) push方法可以返回.this.router.push(路径)push方法可以返回.this.router.replace()replace方法不能返回3.当ur
2021-11-01 20:49:51
348
原创 页面跳转时保留滚动位置.
Vue方案1.路由跳转时组件会销毁.所以要用keep-alive防止组件销毁.2.路由离开时使用deactivated函数保存当前滚动y值.3.路由进入时使用activated函数使用设置y值.
2021-10-29 22:46:18
361
原创 防抖函数/节流函数
函数抖动指某个事件函数在短时间内频繁的触发，这样的后果就是给服务器带来压力.防抖函数的作用防抖函数就是为了防止某个事件函数频繁触发,减轻服务器压力防抖函数的实现思路1.先写定时器延迟事件函数的触发.2.定时器第一行代码写清除定时器,如果倒计时时间内再次触发事件函数的话就会清除上一个定时器，减少一次函数触发.3.然后写事件函数触发的代码,最后一次倒计时结束执行事件函数....
2021-10-26 19:26:17
111
原创 Vue生命周期
Vue文件:Vue实例的模板Vue实例:Vue组件Vue生命周期:指一个Vue组件 创建 - 挂载 - 更新 - 销毁 的过程Vue生命周期提供了8个回调函数,在相应的阶段自动执行生命周期具体过程1.创建Vue的实例.2.初始化组件事件和生命周期函数3.调用beforeCreate函数,这个阶段组件没有任何数据,所以这个函数没什么用.4.初始化props/data/methods.5.调用created函数,这个阶段props/data/methods都有了,一般在这里发送网络请求,但组件
2021-10-25 05:00:26
125
原创 非父子组件通信的方案
非父子组件通信如果层层传递会降低网页效率所以要直接将非父子组件直接对接起来通信.方案一:事件总线1.在main.js中定义事件总线.Vue.prototype.$bus = new Vue()2.通过总线发送事件.this.bus.bus.bus.emit(’’)3.接收事件this.bus.bus.bus.on()方案二:Vuex...
2021-10-24 22:50:37
92
原创 返回顶部组件的设计和实现
页面设计思路App不添加回到顶部功能,网站添加回到顶部的功能.理由是网站的空间够大,添加一个回到顶部的功能不碍事,也确实能方面用户.而App的空间太小,添加一个回到顶部的功能影响页面美观还影响用户操作.用户向下滚动一点就应该显示回到顶部功能首先,如果本来就在顶部,是没有必要显示的.如果滚动太长才显示,那么用户缺失了一部分自由选择的空间.滚动一点就显示,不管用户用不用,至少有自由选择的空间.当然有一些页面也不添加回到顶部的功能，他们的设计思维是限制页面高度.如果页面的高度让回到顶部只需要滚动
2021-10-24 01:55:49
210
原创 获取Dom元素的方案.
方案一:通过ID属性值获取Dom元素document.getElementById("ID")该方法最后返回获取到的Dom元素.方案二:通过Class属性获取Dom元素document.getElementsByClassName("Class")该方法把获取到的Dom元素先存入数组,最后返回一个数组.方案三:通过标签名获取Dom元素document.getElementsByTagName("TagName")该方法把获取到的Dom元素先存入数组,最后返回一个数组.方案四:
2021-10-23 21:36:00
163
原创 页面滚动的设计和实现
ScrollScroll只能包含一个子元素所以,所有包含的内容要放入Scroll子元素当中.子元素的高度必须大于Scroll的高度才能有滚动效果所以,Scroll必须设置高度.注:父元素没有高度会被子元素撑开
2021-10-08 20:55:16
1278
原创 对象的总结
概述对象的类型对象是引用数据类型…引用数据类型的存储方式存放在堆内存中.对象的作用可以保存多种不同数据类型的属性和方法对象的存放位置对象保存在堆内存里面,每个对象实例有一个独立的内存空间和独立的内存地址,最终通过地址找到对象实例.变量保存的是对象地址.对象属性与方法的本质就是变量与函数,在对象中叫做属性与方法.基本数据类型只能保存单一类型的值对象类型1.内置对象指ES提供的对象开发者可以直接使用.2.宿主对象所有的BOM DOM都是宿主对象3.自定义对象开发人员自定义
2021-09-20 13:21:40
96
原创 Vuex总结
概述Vuex是响应式存储公共数据的对象.单页面变量管理过程将数据传递给页面,页面的操作又会修改数据.单一数据源指只用一个Vuex存放公共数据.Vuex的使用1.安装npm instal Vuex2.导入import Vuex from ‘vue’3.安装到VueVue.use(Vuex04.创建store文件夹5.在Vuex.store()中传入对象.6.state属性用于存储变量.7.getters属性用于存放计算属性计算属性默认传入state,state是store.s
2021-09-19 11:14:55
282
原创 Cli3的安装过程和项目结构
安装指令vue create 文件夹名1.选择配置方法默认或者手动2.添加需要的配置3.选择某些配置存放的位置4.是否保存以上配置5.保存则需要起个名字6.选择管理工具项目结构node_modules存放node安装的包public存放静态资源src存放源代码.browserlistrc适配浏览器1% 市场份额大于1%的last versions 最后两个版本not ie <= 8 不小于IE8gitgenore设置忽略文件babel.config.j
2021-09-16 15:33:28
146
原创 文件路径总结
文件路径写法/ 表示当前文件所在的根文件夹./ 表示当前文件所在的文件夹…/ 表示当前文件上一级文件夹路径类型相对路径相对于当前文件的路径绝对路径文件或目录在硬盘上真正的路径...
2021-09-13 07:26:50
649
原创 函数的总结
函数的本质是一块封装好的代码块函数可以重复调用函数的主要用途函数是用来实现某种功能,最后返回一个结果.所以应该以功能为目的写函数.以功能去记忆函数.return函数一般把最终的结果返回给调用者，不直接使用结果.函数不调用不执行所以,需要时记得调用.函数形参函数的形参没有实际的值,但在函数中占据着一个位置.所以,应该把形参视为一个变量空间,负责接收实参函数实参函数实参是一个具体的值,会传入形参.所以，实参可以改变函数的形参.所以,函数中需要改变的代码应该用形参去写.函数的执行
2021-08-31 02:07:06
113
原创 介词的理解
介词原理介词属于虚词，虚词是抽象的概念,为了介绍实词存在.实词代表具体的,看得见摸得着的事物.又叫前置词,preposition放在名词 代词之前,添加信息的词语,通过建立信息和名词代词之间的关系来表达信息如 时间信息 空间信息 逻辑信息等介词构成形式简单介词 （单个单词）短语介词 （小句子介词）但只是视作一个介词,没有单独含义合成介词 （几个介词合成）分词介词 (动词变形后成介词)学习介词的误区找中文介词对号入座.因为中英介词之间可能是不同的含义学习介词的诀窍从词汇的本义的
2021-08-30 02:07:50
789
原创 Vue-cli3
Vue-Cli2和Vue-Cli3的区别Cli2和Cli3有巨大区别.这些区别分别是:1.Cli3是基于Webpack4打造的,Cli2是基于webpack3打造的.2.Cli3的设计原则是’0配置’,移除了存储配置文件的build .config等文件夹3.Cli3提供了Vue UI命令,提供了可视化配置4.移除了static文件夹.新增了public文件夹,并将index.html移入public中Vue-Cli3 创建项目命令vue create 项目名称Vue-Cli3项目配置过程
2021-08-30 02:06:58
154
原创 英文单词集合
ABCDEFFeature 特性,配置GHIJKLMManually 手动的NOPPick 选择 Preset配置 progressive先进的QRSSupport支持TUVWXYZ
2021-08-30 00:15:29
103
原创 Css盒模型
标准盒模型：大小由margin + padding + border + content 组成content指的是width+height。怪异盒模型：大小由width + margin 组成。width指的是content + border + padding 的总和标准盒模型写法：box-sizing : content-box;怪异盒模型写法：box-sizing : border-box;这是关于Css盒子模型类型的知识。...
2021-02-27 11:07:36
93
原创 外边距合并
外边距合并以下两种情况会出现外边距合并:1.垂直相邻的两个盒子，当他们的垂直外边距相遇时,会合并为一个外边距。也叫外边距重叠。1.1当外边距的数值都为正数时，取数值较大的。1.2当外边距的数值都是负数时，取绝对值较大的。1.3当外边距的数值一正一负时，取他们的和。2.父子嵌套的盒子，子盒子设置的margin-top,会产生在父盒子身上.2.1解决方案:给父级添加一个 overflow:hidden;3.外边距不重叠的情况.2.1水平外边距永不重叠.2.2设置了overflow(visi
2021-02-24 22:31:39
376
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人