- 博客(69)
- 收藏
- 关注
RSS订阅
1原创 mixin&extend
一、官方定义Mixin 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时，所有 mixin 对象的选项将被“混合”进入该组件本身的选项二、认识minxin（1）、组件之间有时候会存在相同的代码逻辑，这时候会对相同的代码逻辑进 行抽取（2）、在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成（3）、Minxin提供了一种非常的方式，来分发Vue组件中的可复用功能（4）、一个Mixin对象可
2022-02-24 21:15:16
475
原创 async、await
特点1、asayc的用法，它作为一个关键字放到函数前面，这样普通函数就变为了异步函数2、异步async函数调用，跟普通函数的使用方式一样3、异步async函数返回一个promise对象4、async函数配合await关键字使用(阻塞代码往下执行)是异步方法，但是阻塞式的async/await的优点1、方便级联调用，即调用依次发生的场景；2、同步代码编写方式，更符合代码编写习惯；3、多个参数传递， Promise的then函数只能传递一个参数，async/await没有这个限制，可以定义块级
2022-02-23 20:08:23
205
原创 Promise
1、promise异步编程的一种解决方案特点1、有三个状态分别是 pending初始状态、fulfilled成功状态、rejected失败状态2、Promise的状态一旦改变，就不会再变，任何时候都可以得到这个结果，状态不可逆，只能由pending变成fulfilled或者由pending变成rejected2、使用new来创建一个promise对象Promise接受一个「函数」作为参数，该函数的两个参数分别是resolve和reject。这两个函数就是就是「回调函数」resolve函
2022-02-23 20:03:59
207
原创 vue修改数据页面不重新渲染
直接添加属性的问题<template> <div> <p v-for="(value,key) in item" :key="key"> {{ value }} </p> <button @click="addProperty">动态添加新属性</button> </div></template><script>export default { data:()=&
2022-02-17 16:20:28
1152
原创 this.$nextTick 相关
一、官方说明在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM二、原理this.$nextTick()将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。它跟全局方法Vue.nextTick一样，不同的是回调的this自动绑定到调用它的实例上三、简单来说因为Vue的异步更新队列，$nextTick是用来知道什么时候DOM更新完成的四、 实例有一个div，默认用v-if隐藏，点击按钮之后，改变v-if的值让它显示出来，并
2022-02-17 15:54:51
176
原创 vue的prop
Prop1.prop 大小写// 小写的prop 用来接收父传子接收的数据props:['msg']2.单项数据流单项数据流不允许修改在组件中修改 prop 传递过来的数据 Vue 会发出警告所以有两种常见的用法去修改 prop 传递过来的值本地data中定义属性，并将 prop 作为初始值data() { return { msg_data: this.msg }}使用computed 将prop 的值进行处理computed:{ ms
2022-02-16 20:01:40
403
原创 Echarts总结
一、查找官网Echarts二、下载 cnpm install echarts@4.6.0三、例子堆叠面积图<!-- Echarts部分 首先安装插件 然后引用 --><div id="main" style="width:750px;height:400px;"></div><script>import * as echarts from "echarts";export default { mounted() { var cha
2022-02-16 16:22:20
373
原创 vue使用keep-alive缓存页面优化项目
一、概念keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。二、作用在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性三、原理在 created钩子函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时，如果
2022-02-15 18:55:22
197
原创 后台管理上传图片
一、后台管理上传图片 // 在页面中添加upload组件，并设置对应的事件和属性 // action 指定图片上传的地址 // :on-preview 当点击图片时会触发该事件进行预览操作,处理图片预览 // :on-remove 当用户点击图片右上角的X号时触发执行 // :on-success 当用户点击上传图片并成功上传时触发 // list-type 设置预览图片的方式 // :headers 设置上传图片的请求头<el-upload :action
2022-02-14 20:06:11
1391
原创 vue路由、路由传参（parmas,query）
一、Vue路由基础用法1 .安装 npm install vue-router --save2 .main.js中//Vue路由：引入import VueRouter from 'vue-router'Vue.use(VueRouter)//Vue路由：引入并创建组件import BYHome from './components/BYHome.vue'import BYNews from './components/BYNews.vue'import HelloWorld from
2022-02-14 19:03:49
519
原创 vue之filter
一、vue之filter过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种：局部过滤器和全局过滤器全局过滤器// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' })
2022-02-13 19:53:36
241
原创 vue自定义指令的应用场景
一、使用自定义指令背景代码复用和抽象的主要形式是组件。当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令但是，对于大幅度的 DOM 变动，还是应该使用组件二、常用案例1、 输入框自动聚焦// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时 inserted: function (el) { // 聚焦元素 el.focus() }})<input v-fo
2022-02-13 19:01:05
124
原创 vue自定义指令
一、什么是自定义指令我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，对普通 DOM元素进行底层操作，这时候就会用到自定义指令。除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令指令使用的几种方式：//会实例化一个指令，但这个指令没有参数 `v-xxx` // -- 将值传到指令中`v-xxx="value"` // -- 将字符串传入到指令中，如`v-html="'<p>内容</p>'
2022-02-13 18:52:30
154
原创 vue组件化开发
面试官常问到的题：1、你封装过组件吗？？2、说一下组件封装？？？？3、你在项目中是如何封装组件的？？？？？我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个commen目录和一个feature目录，views目录中放页面级的组件，commen中放公共组件（如：head（公共头组件），foot（公共底部组件）等），feature目录内放功能组件（如：swiper(轮播功能组件)，tabbar(切换功能组件)、list(上拉加载更多功能组件)）
2022-02-11 20:11:23
719
原创 vue中的修饰符
一、事件修饰符.stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不
2022-02-11 19:45:08
138
原创 mvvm和mvc
mvvm（是 Model-View-ViewModel 的缩写）概念：分别对应着：数据，视图，视图模型。Model是我们应用中的数据模型，View是我们的UI视图层， 通过ViewModle，可以把我们Modle中的数据映射到View视图上，同时，在View层修改了一些数据，也会反应更新我们的Modle。简单理解就是双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。以vue为例：view 对应 template，vm 对应 new Vue({
2022-02-11 19:04:53
96
原创 vue中Computed、Methods、Watch区别
一、methods、watch、computed的区别computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当作属性来使用；methods 方法表示一个具体的操作，主要书写业务逻辑；watch 一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是 computed 和 methods 的结合体；计算属性的getter与setter计算属性默认只有get，在需要的时候也可以设置set方法fullN
2022-02-10 15:44:48
1841
原创 vue监听和深度监听watch
watch可以让我们监控一个值的变化，从而做出相应的反应<div id="app"> 用户名：<input type="text" v-model='person.name'> <button @click='person.age++'>+</button> <p>你的名字是：{{person.name}}</p> <p>你的年龄是：{{person.age
2022-02-07 19:05:29
95
原创 vuex面试题总结
1.什么是vuexVuex是一个专为 Vue.js 应用程序开发的状态管理模式,它由五部分组成：分别是：state,actions,mutations,getters,modules2.vuex由五部分组成state: 数据actions:可以包含异步操作mutations: 唯一可以修改state数据的场所getters: 类似于vue组件中的计算属性，对state数据进行计算（会被缓存）modules:模块化管理store（仓库），每个模块拥有自己的 state、mutation、a
2022-02-07 18:59:58
3699
原创 Vue组件通信
一、父组件传到子组件父组件是通过props属性给子组件通信的数据是单向流动 父—>子（子组件中修改props数据，是无效的，会有一个红色警告）父组件parent.vue代码如下： <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰-->
2022-02-07 18:41:50
125
原创 vue中的diff算法
一、什么是diff算法diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。简单来说：diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁二、diff算法的特点比较只会在同层级进行, 不会跨层级比较在diff比较的过程中，循环从两边向中间比较diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较三、d
2022-02-07 09:11:08
5605
原创 Vue中的虚拟dom
一、什么是虚拟DOM（1）、通过js创建一个Object对象来模拟真实DOM结构，这个对象包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，通过vue中的render()函数把虚拟dom编译成真实dom，在通过appendChild()添加到页面中。（2）、创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一照应虚拟dom可以简单的用一句话概括就是用普通js对象来描述DOM结构，因为不是真实DOM，所
2022-02-07 08:59:29
540
原创 Vue双向绑定原理
1、 总结：vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图2、具体步骤：第一步： 需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步： compile(模板解析器)解析模板指令，将模板中的变量替
2022-02-07 08:29:33
132
原创 为什么组件的data必须是一个函数
1、实例和组件定义data的区别vue实例中的data属性既可以是一个对象，也可以是一个函数const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }组件中定义data属性，只能是一个函数如果为组件data直接定义为一个对象，就会出现警告
2022-01-28 16:11:23
155
原创 v-if与v-show的区别
1、相同点都可以动态控制着dom元素的显示隐藏2、区别v-if: 控制DOM元素的显示隐藏是将DOM元素整个添加或删除v-show:控制DOM的显示是为DOM元素添加css的样式display,设置none或者是block,DOM元素是还存在的3、性能对比v-if有更高的切换消耗；v-show有更高的初始渲染消耗4、使用场景v-if适合运营条件不大可能改变的场景下；v-show适合频繁切换；例如：v-if:在请求后台接口，用接口返回数据渲染生成多个元素的时候，由于网速太慢，导致数据
2022-01-28 15:37:48
421
原创 Vue生命周期
1、阶段有：挂载阶段、更新阶段、销毁阶段2、分别有：创建前：beforeCreate() 只有一些实例本身的事件和生命周期函数创建后：Created() 是最早使用data和methods中数据的钩子函数挂载前：beforeMount() 指令已经解析完毕，内存中已经生成dom树挂载后：Mounted() dom渲染完毕页面和内存的数据已经同步更新前：beforeUptate() 当data的数据发生改变会执行这个钩子，内存中的数据是新的，页面是旧 的更新后：Updated() 内存和页面都
2022-01-28 15:25:54
166
原创 vue常用指令
常用指令1、v-model 多用于表单元素实现双向数据绑定2、v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或json3、v-show 显示内容 ,通过display=block/none来控制元素隐藏出现4、v-hide 隐藏内容 同上5、v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）6、v-else-if 必须和v-if连用7、v-else 必须和v-if连用 不能单独使用 否则报错 模板
2022-01-28 15:03:57
96
原创 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-01-24 20:09:19
79
原创 for···in和for···of的区别
for in 和 for of的区别首先一句话：（for···in去key,for···of取value）①从遍历数组角度来说，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}②
2022-01-24 19:40:50
86
原创 数组的排序
1、冒泡排序（每一趟找出最大的）//性能一般let arr=[1,5,7,9,16,2,4];//冒泡排序,每一趟找出最大的,总共比较次数为arr.length-1次,每次的比较次数为arr.length-1次，依次递减let len = arr.length;for(let k = 0; k < len - 1; k++) { for(let m = 0; m < len - k - 1; m++) { if(arr[m] > arr[m+1]){
2022-01-24 17:19:40
479
原创 JS数组去重
1、ES6~set去重使用ES6中的set是最简单的去重方法 function mmj1(arr) { //Set数据结构，它类似于数组，其成员的值都是唯一的 return Array.from(new Set(arr)); // 利用Array.from将Set结构转换成数组 } console.log(mmj1([1, 2, 2, 3, 5, 3, 1, 5, 6, 7, 4])); // 结果是[1,
2022-01-24 16:59:10
567
原创 js异步之宏任务和微任务
面试题写出console.log的输出顺序console.log(100); // 1setTimeout(()=>{ console.log(200); // 4})setTimeout(()=>{ console.log(201); // 5})Promise.resolve().then(()=>{ console.log(300); // 3})console.log(400); // 2// 100 400 300 200 2
2022-01-22 16:35:13
182
原创 js垃圾回收和内存泄漏
垃圾回收机制浏览器的Javascript具有自动垃圾回收机制（GC:Garbage Collecation）原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存（这个过程不是实时的，因为其开销比较大并且GC时停止响应其他操作，所以垃圾回收会按照固定的时间间隔周期性的执行）只有函数内的变量才可能被回收function fn1() { var obj = {name: 'hanzichi', age: 10};}function fn2() { var obj
2022-01-22 15:18:16
91
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人