`Sun`-优快云博客

原创 vue组件通讯

1.父传子在父组件标签上给子组件标签绑定自定义属性，挂在需要传递的变量，在子组件中通过props来接受数据可以是数组也可以是对象，接受数据可以直接使用props:["属性名"] props:{属性名:数据类型} 2.子传父在父组件的子组件标签上通过绑定自定义事件，接受子组件传递过来的事件，子组件通过$emit触发父组件的自定义事件，发送参数 3.兄弟组件传值通过main.js初始化一个全局的$bus，在发送事件的一方通过$bus.$emit("事件名",要传递的参数)发送，在接收事件的一方通

2023-10-27 17:17:19 73 1

原创使用for循环将一维数组转化为二维数组

有时候后端返回的数据的格式需要我们进行转化才会方便遍历和渲染这时候我想到了for循环其实特别简单 //arr 要转化的数组 number要转化后的数组的里面的数组每个有多少条数据 f unction arr1To2(arr, number) { const arr2 = [] const len = arr.length for (let i = 0, j = 0; i < len; i += number, j++) { arr2[j] = arr.splice(0, numb

2022-05-24 15:13:47 600

原创 css的样式重置

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, l

2022-03-14 18:55:40 177

原创 vue常见的指令和修饰符

指令 v-if v-if 是一个控制元素显示隐藏的指令动态的的向DOM树添加或者删除元素如果v-if的值为false则会从文档中直接删除dom v-else v-else 是v搭配v-if使用的是v-if取反的结果 v-show v-show也是控制元素显示隐藏的指令，是通过标签的css样式display的值是不是none控制显示隐藏区别： v-if是通过创建或者删除DOM节点来实现元素的显示隐藏，v-show则是通过css中的display属性来控制 v-if更适合数据的筛选

2022-02-28 14:22:55 324

原创什么是虚拟dom和diff算法以及什么是回流和重绘

虚拟dom 虚拟dom其实就是用普通的js对象来描述DOM结构，因为不是真实的dom所以称之为虚拟dom 虚拟dom是相对于浏览器所渲染出来的真实dom而言的，在react，vue等技术出现之前，我们要改变页面展示的内容，只能通过遍历查询dom树的方式，找到需要修改的dom，然后修改样式行为或者结构，来达到更新视图的目的为什么要用虚拟dom来描述真实的dom呢？创建真实DOM成本比较高，如果用js对象来描述一个dom节点，成本比较低，另外如果频繁操作dom也是一种比较大的开销。因此建议用虚拟do

2022-02-27 19:45:57 425

原创 vue双向数据绑定

vue是一个mvvm框架即数据双向绑定即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化 vue2 是采用数据劫持结合发布者订阅者的模式通过object.defineProperty()来劫持各个属性的setter,getter在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图，实现数据和视图同步 vue3 在vue3中用proxy代理替换了defineProperty()，Proxy是 ES6 中新增的一个特性，使用proxy的好处是可以直接监听数组的

2022-02-27 19:02:12 354

原创 ts (typescript)的介绍&特性&语言&安装及ts的数据类型

安装 npm/cnpm install-g typescript（通过全局安装） npm install -g typescript 可以通过tsc -v检测版本号（出现版本号就安装成功） PS D:\> tsc -v Version 4.5.4 //安装成功什么是ts 与js区别 typed javascript at any scale (规模) ts就是添加了类型系统的js；适用于任何规模；js的超集 js是解释型(不需要编译直接运行) 动态类型(运行时才会

2022-01-12 11:49:03 2080 1

原创 this的指向改变this指向的三个参数

this谁调用就指向谁在全局中指向window function fn1() { console.log(this) } fn1() //window.fn1() 省略window (指向window) 在构造函数中指向当前实例化对象在箭头函数中不会改变this的指向定时器指向window 改变this指向 bind 可以改变this指向调用函数后面多加() var obj = { a:1 }

2022-01-02 20:53:47 242

原创 kepp-alive的作用?keep-alive的属性?路由元信息？白名单黑名单?keep-alive的钩子函数

keep-alive它自身不会渲染一个dom元素，也不会出现在父组件中，作为标签使用包裹在需要缓存的组件外路由元信息如果要缓存部分页面可以使用路由元信息 <keep-alive> <router-view v-if="!$route.meta.noneedCache"/> </keep-alive> <router-view v-if="$route.meta.noneedCache"></router-view> 在路由

2021-12-29 17:11:30 1002

原创路由的导航守卫以及路由守卫钩子函数里面的三个参数分别是什么

路由的导航守卫分为全局守卫、组件级守卫、和单个页面独享的守卫全局守卫路由的前置守卫 router.beforeEach((to,from,next)=>{ * to -- 去哪里 * from -- 从哪里来 * next -- 下一步（放不放行） * * }) 后置钩子函数注意：后置钩子函数里面没有next 后置钩子函数 router.afterEach((to,from)=>{ * * }) 组件级

2021-12-29 11:44:22 1037

原创过滤器是什么？过滤器分为几种？以及过滤器的使用注意事项 &什么是时间戳

过滤器的概念 1.对常用文本的格式化，常用于格式化时间价格 2. 过滤器可以串联使用 3.过滤器的第一个参数是管道符前面的数第二个第三个在名称后（参数名）注意：过滤器内没有this指向过滤器分为全局过滤器和局部过滤器全局过滤器：vue.filter(‘过滤器名’，(参数)=>{过滤器实现的逻辑}) 局部过滤器：filter:{ 过滤器名(参数){ ...

2021-12-28 11:43:19 807

原创带你了解vue的生命周期函数

vue2中 beforeCreate():实例创建前 created():实例创建后 beforeMount():实例挂载前 Mounted():实例挂载后 beforeUpdate():dom元素更新前 Updated():更新后 beforeDestroy():销毁前 Destoryed():销毁后 activated(): 被keep-alive缓存的组件激活时调用 Deactivated(): 没有被激活时调用 ErrorCaptured(): 在捕获到子组件的错误时...

2021-12-27 11:55:20 579 1

weixin_61434407的博客