- 博客(69)
- 收藏
- 关注
原创 mixin&extend
一、官方定义Mixin 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个 mixin 对象可以包含任意组件选项。当组件使用 mixin 对象时,所有 mixin 对象的选项将被“混合”进入该组件本身的选项二、认识minxin(1)、组件之间有时候会存在相同的代码逻辑,这时候会对相同的代码逻辑进 行抽取(2)、在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成(3)、Minxin提供了一种非常的方式,来分发Vue组件中的可复用功能(4)、一个Mixin对象可
2022-02-24 21:15:16
418
原创 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
142
原创 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
147
原创 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
1074
原创 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
137
原创 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
355
原创 Echarts总结
一、查找官网Echarts二、下载 cnpm install [email protected]三、例子堆叠面积图<!-- 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
182
原创 vue使用keep-alive缓存页面优化项目
一、概念keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。二、作用在组件切换过程中 把切换出去的组件保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性三、原理在 created钩子函数调用时将需要缓存的 VNode 节点保存在 this.cache 中/在 render(页面渲染) 时,如果
2022-02-15 18:55:22
154
原创 后台管理上传图片
一、后台管理上传图片 // 在页面中添加upload组件,并设置对应的事件和属性 // action 指定图片上传的地址 // :on-preview 当点击图片时会触发该事件进行预览操作,处理图片预览 // :on-remove 当用户点击图片右上角的X号时触发执行 // :on-success 当用户点击上传图片并成功上传时触发 // list-type 设置预览图片的方式 // :headers 设置上传图片的请求头<el-upload :action
2022-02-14 20:06:11
1258
原创 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
434
原创 vue之filter
一、vue之filter过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种:局部过滤器和全局过滤器全局过滤器// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' })
2022-02-13 19:53:36
193
原创 vue自定义指令的应用场景
一、使用自定义指令背景代码复用和抽象的主要形式是组件。当需要对普通 DOM 元素进行底层操作,此时就会用到自定义指令但是,对于大幅度的 DOM 变动,还是应该使用组件二、常用案例1、 输入框自动聚焦// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时 inserted: function (el) { // 聚焦元素 el.focus() }})<input v-fo
2022-02-13 19:01:05
84
原创 vue自定义指令
一、什么是自定义指令我们看到的v-开头的行内属性,都是指令,不同的指令可以完成或实现不同的功能,对普通 DOM元素进行底层操作,这时候就会用到自定义指令。除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令指令使用的几种方式://会实例化一个指令,但这个指令没有参数 `v-xxx` // -- 将值传到指令中`v-xxx="value"` // -- 将字符串传入到指令中,如`v-html="'<p>内容</p>'
2022-02-13 18:52:30
121
原创 vue组件化开发
面试官常问到的题:1、你封装过组件吗??2、说一下组件封装????3、你在项目中是如何封装组件的?????我用vue开发的所有项目,都是采用组件化的思想开发的。一般我在搭建项目的时候,会创建一个views目录和一个commen目录和一个feature目录,views目录中放页面级的组件,commen中放公共组件(如:head(公共头组件),foot(公共底部组件)等),feature目录内放功能组件(如:swiper(轮播功能组件),tabbar(切换功能组件)、list(上拉加载更多功能组件))
2022-02-11 20:11:23
648
原创 vue中的修饰符
一、事件修饰符.stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不想阻止事件的默认行为<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不
2022-02-11 19:45:08
100
原创 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
70
原创 vue中Computed、Methods、Watch区别
一、methods、watch、computed的区别computed 属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算,主要当作属性来使用;methods 方法表示一个具体的操作,主要书写业务逻辑;watch 一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是 computed 和 methods 的结合体;计算属性的getter与setter计算属性默认只有get,在需要的时候也可以设置set方法fullN
2022-02-10 15:44:48
1740
原创 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
66
原创 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
3566
原创 Vue组件通信
一、父组件传到子组件父组件是通过props属性给子组件通信的数据是单向流动 父—>子(子组件中修改props数据,是无效的,会有一个红色警告)父组件parent.vue代码如下: <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰-->
2022-02-07 18:41:50
95
原创 vue中的diff算法
一、什么是diff算法diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。简单来说:diff的过程就是调用名为patch的函数,比较新旧节点,一边比较一边给真实的DOM打补丁二、diff算法的特点比较只会在同层级进行, 不会跨层级比较在diff比较的过程中,循环从两边向中间比较diff 算法的在很多场景下都有应用,在 vue 中,作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较三、d
2022-02-07 09:11:08
5392
原创 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
471
原创 Vue双向绑定原理
1、 总结:vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图2、具体步骤:第一步: 需要observer(观察者)对数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化第二步: compile(模板解析器)解析模板指令,将模板中的变量替
2022-02-07 08:29:33
99
原创 为什么组件的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
112
原创 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
380
原创 Vue生命周期
1、阶段有:挂载阶段、更新阶段、销毁阶段2、分别有:创建前:beforeCreate() 只有一些实例本身的事件和生命周期函数创建后:Created() 是最早使用data和methods中数据的钩子函数挂载前:beforeMount() 指令已经解析完毕,内存中已经生成dom树挂载后:Mounted() dom渲染完毕页面和内存的数据已经同步更新前:beforeUptate() 当data的数据发生改变会执行这个钩子,内存中的数据是新的,页面是旧 的更新后:Updated() 内存和页面都
2022-01-28 15:25:54
102
原创 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
71
原创 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
57
原创 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
63
原创 数组的排序
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
452
原创 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
515
原创 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
149
原创 js垃圾回收和内存泄漏
垃圾回收机制浏览器的Javascript具有自动垃圾回收机制(GC:Garbage Collecation)原理:垃圾收集器会定期(周期性)找出那些不在继续使用的变量,然后释放其内存(这个过程不是实时的,因为其开销比较大并且GC时停止响应其他操作,所以垃圾回收会按照固定的时间间隔周期性的执行)只有函数内的变量才可能被回收function fn1() { var obj = {name: 'hanzichi', age: 10};}function fn2() { var obj
2022-01-22 15:18:16
54
原创 ES3~ES7的数组方法
ES3~ES7的数组方法学习JavaScript数组方法总结(1)、push(): 给数组的末尾添加元素。格式:数组.push(参数,参数…)(2)、pop(): 删除数组最后一个元素。格式:数组.pop()(3)、shift(): 删除数组的第一个元素。格式:数组.shift()(4)、unshift(): 给数组 首位添加元素。格式:数组.unshift(参数,参数…)(5)、concat(): 数组合并。 格式:数组1.concat(数组2)(6)、slice(): 数组截
2022-01-20 18:51:16
826
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人