- 博客(63)
- 收藏
- 关注
RSS订阅
原创 前端面试大全
HTML &CSS盒模型、BFC、清除浮动position定位水平垂直居中、圣杯布局、双飞翼布局、flex布局行内元素、块级元素、空元素src与href的区别link与@import的区别css3/h5新特性浏览器兼容问题javaScriptjs中的三座大山：原型与原型链作用域闭包、this指针垃圾回收和内存泄漏异步和单线宏任务微任务js基础数据类型 、堆栈内存深拷贝、浅拷贝类型判断数组方法数组去重数组排序高频面试题......
2022-02-14 18:58:24
436
原创 小程序路由跳转
navigate:只能跳转到非tabbar页面，并且带历史回退redirect:只能跳转到非tabbar页面，不带历史回退，只能回到首页switchTab:只能跳转到tabbar页面，不带历史回退relanuch:即可以跳转到tabBar，也可以跳转到非tabBar,不带历史回退，只能回到首页。
2023-04-19 10:01:07
176
原创 小程序tabbar
如果tabbar数量超过5个，或者相对tabbar每一项进行个性化配置时就得用自定义tabbar具体使用文档参考第一步：要在app.json中tabbar 中开启custom：true第一步：添加tabBar 代码文件第三步：编写tabbar代码。
2023-04-17 11:08:27
127
原创 微信小程序
微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。2017年1月9日，张小龙在2017微信公开课Pro上发布的微信小程序正式上线。
2023-04-17 10:52:56
76
原创 Echarts总结
echarts，是一个使用js实现得开源可视化库，可以流畅的运行在pc和移动设备上，兼容当前绝大部分浏览器（IE9/10/11, Chrome,Firefox,Safari等），底层依赖矢量图形库ZRender,提供直观，交互丰富，可高度个性化定制的数据可视化。
2023-04-13 21:17:58
538
原创 vue数字滚动插件vue-countTO
在大屏项目中我们有很多时候都能用到数字滚动，今天我就来总结一下这个插件的使用安装npm install vue-count-to --save具体使用<template> <countTo :startVal='startVal' :endVal='endVal' :duration='duration'></countTo></template> <script> import countTo from 'vue-coun
2022-04-14 17:36:26
1993
原创 本地存储的三种方法
本地存储分为cookie、localStorage、sessionStoragecookiecookie设计初衷是用来和服务器通讯，而不是本地存储，他只是被借用到本地存储cookie有一些缺点：存储空间小，最大4k、http请求时需要发送到服务器，增加请求数据量、只能用document.cookie='…' 来修改，太过简陋localStorage、sessionStorage在HTML5 中，新加入了一个localStorage/sessionString特性，这个特性主要是用来作为本地存储来
2022-02-20 19:48:23
9617
1
原创 Vue3+TypeScript+vite创建项目步骤
安装vue3最新版本的vue-cli卸掉旧版 npm uninstall vue-cli -g yarn global remove vue-cli安装新版本 @vue/cli npm install -g @vue/cli 或 yarn global add @vue/cli 检查vue版本号 vue -Vvue3项目搭建有两种，分别是常用的vue脚手架和vite脚手架vite脚手架创建命令 npm init vite-app 项目名 //或者 yarn create
2022-02-18 20:37:30
944
原创 Vue中的$nextTick()
概念在下次 DOM 更新循环结束之后执行延迟回调什么时候会用到$nextTick有时候我们想要在created 中获取到dom元素，就可以使用$nextTick()created(){ let that=this; that.$nextTick(function(){ //不使用this.$nextTick()方法会报错 that.$refs.aa.innerHTML="created中更改了按钮内容"; //写入到DOM元素 });}使用场景
2022-02-17 11:24:12
402
原创 vue中的prop验证
propprop大小写 //小写的 prop 用来接收父传子接收的数据 props:['msg']单项数据流 单项数据流不允许修改 在组件中修改 prop传递过来的数据 Vue 会发出警告 所以有两种常见的用法去修改 prop 传递过来的值 本地data中定义属性，并将prop作为初始值data() { return { msg_data: this.msg }}使用computed 将 prop 的值进行处理computed:{
2022-02-17 10:46:32
1059
原创 slot插槽
概念插槽就是父组件往子组件中插入一些内容。插槽有三种方式，分别是默认插槽、具名插槽、作用域插槽默认插槽默认插槽就是把父组件中的数据，显示在子组件中，子组件通过一个slot插槽标签显示父组件中的数据具名插槽具名插槽是在父组件中通过slot属性，给插槽命名，在子组件中通过slot标签，根据定义好的名字填充到对应的位置。作用域插槽作用域插槽是带数据的插槽，子组件提供给父组件的参数，父组件根据子组件传过来的插槽数据来进行不同的展现和填充内容。在标签中通过slot-scope来接受数据
2022-02-16 15:00:32
353
原创 v-for中为何要使用key
key是什么有两种<ul> <li v-for="item in items" :key="item.id">***</li></ul>用+new Date()生成的时间戳作为key，手动强制触发重新渲染<Comp :key="+new Date()" />key的概念key是给每一个VNode的唯一id，也是diff的一种优化策略，可以根据key,更准确，更快的找到对应的vnode节点 1. 在写v-for的时候，都需要
2022-02-16 14:27:18
205
原创 跨域的问题
概念协议、域名、端口都相同才叫同域，否则都是跨域这就是跨域的问题，解决跨域问题如下：如何解决跨域在vue中通过vue脚手架的vue.config.js文件来配置，通过devServer中的proxy来配置跨域的后缀例如:...
2022-02-16 09:26:39
134
原创 keep-alive
概念keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中原理在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性消耗，提高用户体验性对生命周期函数变化被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子：activatrd 与 deactivatedactivated 在keep-ali
2022-02-15 18:41:00
356
原创 null 和 undefined 的区别
相同点在JavaScript中，null 和 undefined 几乎相等在if语句中null 和undefined 都会转为false 两者用相等运算符比较也是相等console.log(null==undefined); //true 因为两者都默认转换成了falseconsole.log(typeof undefined); //"undefined" console.log(typeof null); //"object" console.log(null
2022-02-15 16:26:44
213
原创 for···in 和 for···of 的区别
区别从遍历角度来说，for···in 遍历出来的是key(即下标)，for···of 遍历出来的是value(即数组的值)var arr = [99,88,66,77];for(let i in arr){ console.log(i); //0,1,2,3}for(let i of arr){ consoel.log(i); //99,88,66,77}从遍历字符串的角度来说，同数组一样。从遍历对象的角度来说，for···in会遍历出来的为对象的key，但f
2022-02-15 14:17:00
234
原创 Vue-Router(路由原理？传参？路由守卫)
前端路由概念通过改变URL，在不重新请求页面的情况下，更新页面视图。更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式：Hash 和 historyhash模式hash模式：在浏览器中符号’#’，以及’#'后面的字符成为hash特点1. hash 不会被包括在 http 请求中，对服务器端完全无用，因此，改变 hash 不会重新加载页面。2. 可以为 hash 的改变添加监听事件：window.addEventListener("hashcha
2022-02-15 14:02:40
588
原创 vue自定义过滤器
过滤器是对即将显示的数据做进一步的筛选处理，然后显示，过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。vue中的过滤器分为两种：全局过滤器和局部过滤器全局过滤器全局过滤器就是在main.js中通过Vue.filter()中定义，定义好后，它在所有组件中都可以使用Vue.filter('formatePrice', (val) => { return val.toFixed(2)})// 使用{{13.44 | formatePrice}} 局部过滤器局部
2022-02-14 18:54:31
1122
原创 vue中的自定义指令
vue中除了核心功能内置的指令外，也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。自定义指令又分为全局的自定义指令和局部自定义指令。全局自定义指令全局注册主要是在main.js里面通过Vue.directive方法进行注册Vue.directive(‘第一个参数是一个对象，这个对象上有钩子函数’)// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… ins
2022-02-14 16:19:03
161
原创 vue的声明周期
生命周期让我们在控制整个vue时更容易形成更好的逻辑，可以分为三个阶段，挂在阶段、更新阶段、销毁阶段分别：创建前：beforeCreate() 只有一些实例本身的事件和生命周期创建后：Create() 是最早使用data和methods 中数据的钩子函数挂在前：beforeMount() 指令已经解析完毕，内存中已经生成dom树挂在后：Mounted() dom渲染完毕页面和内存中已经生成dom树更新前：beforeUpdate() 当data的数据发生改变会执行这个钩子，内存中的数据是新的.
2022-02-14 14:10:03
660
原创 vue自定义组件
使用组件的好处组件是可以复用性的易于维护有封装性，易用于使用大型项目中降低组件之间复用性全局组件引用全局组件 my-header
2022-02-14 11:27:32
5985
原创 vue中的常用修饰符
事件修饰符.stop //阻止事件继续传播.prevent //阻止默认行为.captrue //使用事件捕获模式.self //只当在event.target 是当前元素自身时触发处理函数.once //事件将会只会触发一次.passive //告诉浏览器你不想阻止事件<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件
2022-02-13 19:51:56
234
原创 mvvm 和 mvc
mvvm的概念MVVM 是 Model -View - ViewModel 的缩写，分别对应着：数据，视图，视图模型model 是我们应用中的数据模型View 是我们的UI视图层ViewModel 可以把我们Model中的数据映射到View视图上以vue为例：view对应template ，vm 对应 new Vue({…})，model 对应dataview 视图层<p>Hello, {{ name }}!</p> --View层 --VU
2022-02-11 20:02:16
456
原创 Vue 组件通信(父传子、子传父、兄弟通信)
父传子在父组件的子组件标签上绑定一个自定义属性，挂在要传输的变量，在子组件上通过props来接收，props可以是数组也可以是对象父组件代码<son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰-->import son from './Son' //引入子组件data () { return { msg: '父组件', }},components:{son},子组件代码<p
2022-02-11 16:52:51
148
原创 Vue中computed、methods、watch区别
1. computed计算属性计算属性最常见的写法就是函数写法:<template> <div class="home"> {{formMsg}} <button @click="formMsg = '胡崽崽'">点击修改</button> </div></template><script>export default { name: 'Home', data() { re
2022-02-11 16:13:10
633
原创 vue虚拟dom,diff算法
什么是虚拟dom?虚拟dom可以简单的用一句话概括，就是用普通的js对象来描述DOM结构，因为不是真实的DOM，所以成为虚拟DOM。为什么要用虚拟DOM来描述真实的DOM呢？创建真实DOM成本比较高，如果用js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一种比较大的开销。所以建议用虚拟dom来描述真实dom。使用虚拟dom好处虚拟DOM就是为了解决浏览器性能问题而被设计出来的...
2022-02-10 19:34:29
229
原创 vue双向数据绑定
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过object.defineProperty()来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤第一步： 需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步： compile(模板解析器)解析模板指令，将模板中的变量替换成数据，然
2022-02-10 18:56:04
93
原创 v-if和v-show的区别
相同点1. 都可以动态控制着dom元素的显示隐藏不同点v-if：控制DOM元素的显示隐藏是将DOM元素删除和添加v-show：是通过标签的css样式display的值是不是none，控制显示隐藏，DOM元素还存在的使用场景v-if 适合运营条件不大可能改变的场景下v-show适合频繁切换例如：v-show 用于商品tab切换...
2022-02-10 18:45:18
205
原创 vue常见的指令
v-model :多用于表单元素，实现双向数据绑定v-for: v-for是根据遍历数据来进行渲染，要搭配key使用v-if :是动态向DOM树中添加或者删除元素；v-else : 是搭配v-if使用的，它必须紧跟在v-if 或者v-else-if后面，否则不起作用v-show ：是通过标签的css样式display的值是不是none，控制显示隐藏v-on ：用来绑定一个事件或者方法，简写方式是@click=""v-bind : v-bind用来动态的绑定一个或者多个属性。没有参数时，可以绑定.
2022-02-10 16:57:18
97
原创 watch深度监听
watch可以让我们监控一个值的变化，从而做出相应的反应 <div id="app"> 用户名：<input type="text" v-model='person.name'> <button @click='person.age++'>+</button> <p>你的名字是：{{person.name}}</p> <p>你的年龄是：{{person
2022-02-10 16:32:31
127
原创 为何组件的data必须是一个函数
实例和组件定义的data的区别vue实例中的data属性即可以是一个对象，也可以是一个函数组件中定义data属性，只能是一个函数const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }})vue组件可能会有很多个实例，采用函数返
2022-02-10 16:23:31
366
原创 js中数组的方法
js数组方法join()push() 和 pop()shift() 和 unshift()sort()reverse()concat()slice()splice()indexOf() 和 lastIndexOf() // ES5新增forEach() // ES5新增map() // ES5新增filter() // ES5新增every() // ES5新增some() // ES5新增join()就是把数组换成字符串，默认的是逗号( , )书写格式：join(" "
2022-02-10 15:20:44
156
原创 js的数据类型、堆栈内存
数据类型基本数据类型（值类型）: Number 、String、Boolean、Undefined 、 Null引用数据类型：Object (object、Array、function、Date、RegExp)备注 ：基本数据类型，又称值类型栈堆存储栈存储栈内存主要用于存储各种基本类型的变量包括Boolean、Number、String、Undefined、Null以及对象变量的指针堆存储堆内存主要负责对象Object这种变量类型的存储案例// 栈堆内存console.
2022-01-20 20:19:39
497
原创 js中的宏任务和微任务
宏任务和微任务宏任务包括：setTimeout setInterval Ajax Dom事件宏任务: promise async/await注意：微任务比宏任务的执行时间要早异步与同步的区别异步不会堵塞程序的执行同步会堵塞程序的执行使用异步的场景定时任务 ：seTimeout, setInverval网络请求：ajax请求，动态<img>加载事件绑定事件循环1. 同步和异步任务分别进入不同的执行“场所”，同步进入主线程，2. 异步进入Event Tab
2022-01-20 15:57:35
2232
1
原创 深拷贝和浅拷贝
深拷贝和浅拷贝的区别浅拷贝：将原对象的引用直接赋给新对象，新对象只是原对象的一个引用，而不复制对象本身，新旧对象还是共享一块内存深拷贝：创建一个新的对象和数组，将原对象的各项属性的"值"（数组的所有元素）拷贝过来，是"值"而不是"引用"，新对象跟原对象不共享内存，修改新对象不会改到原对象为什么要使用深拷贝？我们希望在改变新的数组(对象)的时候，不改变原数组(对象)数组浅拷贝直接遍历var array = [1, 2, 3, 4];function copy (array) { let
2022-01-20 13:11:29
1364
原创 垃圾回收和内存泄漏
立即回收垃圾回收会定期找出那些不继续使用的变量，然后释放其内存垃圾回收器会按照固定的时间间隔周期性的执行只有函数内的变量才可能被回收function fn1() {var obj = {name: ‘hanzichi’, age: 10};}function fn2() {var obj = {name:‘hanzichi’, age: 10};return obj;}// 而当调用结束后，出了fn1的环境，那么该块内存会被自动释放var a = fn1();var b =
2022-01-15 21:23:14
129
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人