- 博客(28)
- 收藏
- 关注
RSS订阅原创 封装组件单选按钮
子组件一<template> <div class="co-radio-box"> <input class="co-radio-input" type="checkbox" :checked="value === cehckedValue" /> <label class="co-radio-label" @click="toggle">{{ label }}</label> .
2021-08-26 16:18:39
146
原创 position定位的属性
1、position: staticstatic(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。2、position: relativerelative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。3、position: absoluteabsolute(绝对定位)是指给元素设置绝对的定位，相对定位的对象可以分为两种情况：
2021-08-25 10:58:09
829
原创 Vue3路由跳转方式
Vue3.x路由跳转vue3.x中路由跳转不能使用this.$router,要这样来首先导入router.js然后用router.push实现跳转原来获取参数用this.$route.params获取，现在是这样的router.currentRoute.value.params.id
2021-03-02 21:06:56
10694
2
原创 Vue移动端页面切换动画效果
//App中<template> <div id="app" class="Router"> <transition :name="transitionName"> <router-view></router-view> </transition> </div></template><script>export default { name: 'App', da
2021-03-02 20:30:35
1569
原创 项目开发流程
XX项目开发流程在开发项目之前,需要使用vue脚手架(脚手架3.0)创建一个项目配置环境变量项目创建完成以后,我会先配置环境变量,需要创建三个文件: .env.development(开发环境) , .env.text(测试环境) , .env.production(生产环境)它可以让我后期项目进行测试或上线时更加方便,因为它会根据当前环境自动切换当前环境需要的接口,不用我们手动修改.封装axios环境变量配置完成后,我会对axios进行封装,我一般是在根目录下创建一个utils文件,在
2021-01-19 16:42:54
55
原创 圣杯布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
2021-01-19 16:42:01
46
原创 双飞翼布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
2021-01-19 16:41:15
64
原创 让盒子水平垂直居中
第一种/*弹性盒子*/ body{ width: 100%; height: 500px; display: flex; justify-content: center; align-items: center; } .box{ width: 90px; height:90px; background: #ccc; }第二种/*绝对定位+transform*/ .box{ width: 90px; height:90px; background
2021-01-16 21:17:17
134
1
原创 src与href的区别
1、请求资源类型不同（1） href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a（2）在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script，img2、作用结果不同（1）href 用于在当前文档和引用资源之间确立联系（2）src 用于替换当前内容3、 浏览器解析方式不同（1）若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建
2021-01-16 19:45:24
97
原创 link和@import的区别
link和@import两者都是外部引用CSS的方式，但是存在一定的区别：link除了引用样式文件，还可以引用图片等资源文件，而import只引用样式文件link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。link支持使用Javascript控制DOM去改变样式；而@import不支持。import的写法比较多：推荐使用 @import url(index.cs
2021-01-16 19:38:08
2282
1
原创 路由守卫
路由守卫路由守卫就是用来对路由的鉴权,在路由守卫中判断你要进入的页面,是否需要登录才能进入,如果不需要就直接放行,如果需要就对它做一些操作,路由守卫有三种:全局路由守卫 , 组件内的路由守卫 , 路由独享守卫每个守卫方法接收三个参数：to:即将进入路由的信息from:离开路由的信息next():是否要继续进入路由(如果不加页面就不会显示)全局路由守卫可以使用 router.beforeEach 注册一个全局前置守卫：router.beforeEach((to, from, next) =&
2021-01-15 07:37:37
542
原创 Vue Virtual Dom 和 Diff算法
Virtual DOM 作用虚拟DOM的最终目标是将虚拟节点渲染到视图上,但是如果直接使用虚拟节点覆盖旧节点的话,就会有很多不必要的DOM操作.比如,一个ul下有很多li标签,其中一个发生改变,这种情况下如果使用新的ul去替换旧的ul,因为这些不必要的DOM操作而造成了性能上的浪费.为了避免不必要的DOM操作,虚拟DOM在虚拟节点映射到视图的过程中,将虚拟节点与上一次视图所使用的旧的虚拟节点做比较,找出真正需要更新的节点进行DOM操作,从而避免操作其他无需改动的DOM.其实虚拟DOM在Vue.js
2021-01-08 19:36:53
104
原创 Vue数据双向绑定
双向数据绑定原理原理:vue双向数据绑定是通过数据劫持,结合订阅者、发布者模式的方式,利用Object.defineProperty()来劫持各个属性的getter和setter,在数据发生改变时,通知订阅者触发监听回调,更新视图.具体步骤:第一步:通过observer给每个属性添加getter和setter监听数据的变化第二步:通过compile解析模板指令,将变量替换为数据,然后初始化渲染页面,并将每一个指令对应的节点绑定视图更新函数,添加监听数据的订阅者,数据发生改变更新视图
2021-01-08 15:36:44
190
原创 Vue自定义指令、自定义过滤器
Vue 自定义指令如何使用自定义指令分为全局自定义指令和局部自定义指令:全局自定义指令:使用 Vue.directive()来全局注册指令局部自定义指令:也可以注册局部指令,组件或 Vue 构造函数中接受一个 directives 的选项钩子函数自定义指令定义函数提供了几个钩子函数bind只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作inserted被绑定元素插入父节点时调用（ 父节点存在即可调用， 不必存在于document 中
2021-01-07 19:51:59
465
原创 Vue生命周期钩子函数
vue的生命周期是什么vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期钩子函数beforeCreate数据初始化前,data中的数据还没有被初始化,可以在这个钩子中做一些loading加载动画Created数据初始化后,data中的数据已经初始化完成,这个钩子函数是最早可以操作data中数据的钩子函数beforeMount挂载前,模板编译完成,还未被挂载到页面上Mounted挂载后,模板中的htm
2021-01-06 18:42:24
246
2
原创 keep-alive
什么是Keep-alivekeep-alive是Vue的内置组件,当它包裹动态组件时,会缓存不活动的组件,而不是销毁它们.和transition相似,keep-alive是一个抽象的组件:它自身不会渲染成一个DOM元素,也不会出现在父组件链中keep-alive作用在组件切换的过程中,会把切换出去的组件缓存在内存中.避免重复渲染DOM,减少资源消耗提高用户体验.原理在created钩子函数调用时将需要缓存的VNode节点保存在this.cache中 在render(页面渲染时),如果VNod
2021-01-06 16:16:45
107
原创 Vuex
Vuex1.什么是vuex2.Vuex五大核心3.运行机制1.什么是vuexVuex是一个专门为vue.js应用程序开发的状态管理模式,它采用集中式存储各个组建的状态.它由五部分组成,分别是: state , getters , mutations , actions , modules .2.Vuex五大核心state: 用来存放数据 (所有的数据都存放在state中)mutations: 它里边定义的方法可以直接修改state中的数据actions: 可以做一些异步操作getter
2021-01-04 14:15:58
63
原创 JS基础
js基本数据类型JS数据类型：JS的基本类型和引用类型.基本类型：String、Number、boolean、null、undefined引用类型：object.里面包含的 function、Array、Date用typeof检测基本数据类型返回的分别是什么?{ } 、[ ] 输出 object检测String返回string 字符串检测Number返回Number 数据类型检测Boolean返回Boolean 布尔值检测Undefined返回undefined 没有初始化、定义的值检测
2020-12-27 20:51:29
92
原创 vue项目开发前的准备工作
vue项目开发前的准备工作安装环境安装node 安装cnpm 或者 配置淘宝镜像源 安装vue脚手架 安装开发工具 安装git 安装postman使用vue脚手架创建项目1.可以使用 使用vue-cli创建项目 vue create 项目名称2.也可以使用可视化工具创建项目 在终端输入vue ui 进入可视化工具安装项目中所需要的插件并且进行相关配置安装axioscnpm install axios --save //安装安装element-uicnpm
2020-12-15 20:51:22
444
原创 箭头函数与普通函数区别
箭头函数与普通函数区别一、箭头函数是匿名函数，不能作为构造函数，不能使用new。二、箭头函数内没有arguments，可以用展开运算符…解决三、箭头函数的this，始终指向父级上下文（箭头函数的this取决于定义位置父级的上下文，跟使用位置没关系，普通函数this指向调用的那个对象）四、箭头函数不能通过call() 、 apply() 、bind()方法直接修改它的this指向。(call、aaply、bind会默认忽略第一个参数，但是可以正常传参)五、箭头函数没有原型属性一、箭头函数是匿名函数，不能作为
2020-12-15 19:52:53
428
原创 async、await
async、await语义async 表示函数里有异步操作await 表示紧跟在后面的表达式需要等待结果。适用性async函数的await命令后面，可以是 Promise 对象和原始类型的值返回值async函数的返回值是 Promise 对象，可以使用then方法和catch方法基本用法async函数返回一个 Promise对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。特点：a
2020-11-25 19:14:08
360
原创 Promise
Promise什么是promisePromise的两个特点使用new来创建一个promise对象Promise的APIall()方法race()方法什么是promisePromise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，promise 是一个对象，从它可以获取异步操作的的最终状态（成功或失败）。Promise是一个构造函数，对外提供统一的API，自己身上有all、reject、resolve等方法，原型上有then、catch等方法。
2020-11-25 18:58:52
61
原创 ES6中的class与继承
ES6中的class与继承ES5中的类ES6中的类ES5中的继承 （组合继承:原型链继承 + 借用构造函数)原型链继承借用构造函数继承组合式继承ES6中的继承class继承ES5中的类ES5中如果要生成一个对象实例，需要先定义一个构造函数，然后通过new操作符来完成实例：ES6中的类ES6引入了class（类）这个概念，通过class关键字可以定义类该关键字的出现使得javascript在对象写法上更加清晰，更像是一种面向对象的语言。实例：注意项：1.在类中声明方法的时候，千万不要给该方
2020-11-24 19:30:44
899
原创 原型链
原型链每个构造函数都有一个prototype，叫做显示原型每一个实例都有一个__proto__，叫隐式原型实例的隐式原型指向它构造函数的显示原型
2020-11-24 19:09:00
113
原创 ES6新特性
目录JavaScript中let、const、var的区别1.是否存在变量提升？2.是否存在暂时性死区？3.是否允许重复声明变量？4.是否存在块级作用域？5.是否能修改声明的变量？ES6结构赋值定义语法箭头函数与普通函数的区别JavaScript中let、const、var的区别1.是否存在变量提升？var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之前调用，值为undefined。let和const不存在变量提升。即它们所声明的变量一定要在声明后使用，否则报Refere
2020-11-23 19:34:29
124
1
原创 GitHub了解
GitHub解决冲突跨团队协作shh免登陆GIT忽略清单dependencies npm包文件过滤所有.zip文件过滤某个具体文件production 打包文件将工作目录中的文件全部添加到暂存区：git add解决冲突在多人同时开发一个项目时，如果两个人修改了同一个文件的同一个地方，就会发生冲突。冲突需要人为解决，可以吧需要的部分保留，不需要的手动删除。跨团队协作即使你不是团队成员，也可以向别人的仓库贡献代码。程序员 C fork仓库程序员 C 将仓库克隆在本地进行修改程序员 C 将仓库推
2020-11-21 23:13:00
70
原创 git&gitHub
git和githubGit是什么为什么要使用GitGit和GitHub有何区别Git使用流程Git命令使用GitHub命令多人协作开发流程Git是什么Git是目前世界上最先进的分布式版本控制系统(没有之一)为什么要使用Git它可以记录每次的修改，并且可以方便的切换到任意版本，可以完成多人协作开发Git和GitHub有何区别Git是一款免费的开源的分布式版本控制系统 --工具，就是一个软件GitHub是用Git做版本控制的代码托管平台 --平台，就是一个网站Git使用流程首先初始化一个G
2020-11-20 21:53:06
68
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人