- 博客(21)
- 收藏
- 关注
原创 import的其他使用场景
一、具名导出 (多数情况下,最好也是使用具名导出)导出js文件中export name = 'jim';export age = 18;/////或者////let name = 'jim';let age = 18;export {name,age}export {name as myname,age as myage}//导出时取别名具名导出对应的导入导入js文件中import {name} from './a.js';import {name as n} from.
2020-05-29 00:02:03 163
原创 原理篇---diff算法
是什么?在vue里也叫patch算法,是虚拟dom(js对象)技术的产物。patch过程(遵循深度优先、同层比较的策略):两个节点之间比较时,如果它们拥有子节点,会先比较子节点;比较两组子节点时,会假设头尾节点可能相同先尝试,没有找到相同节点后才按照通用方式遍历查找;查找结束再按照情况处理剩下的节点;借助key通常可以精准找到相同节点,是整个patch过程非常高效从数据变化到更新dom的过程:当组件中数据发生变化是,对应的watcher会通知更新并执行更新函数,它会执行渲染函数获取新的虚
2020-05-28 00:55:57 708
原创 原理篇---key的作用
一、key的作用是什么?主要是为了更高效的对比虚拟dom(vue中数据更新时,会生成新的虚拟dom,然后比较新旧虚拟dom,有不一样的就更新真实dom)二、原理:vue在执行diff算法比较两个节点是否是相同节点时,会先看key是否相同,再看标签类型等是否相同三、注意:实际开发过程中渲染一组列表时,key必须设置(节省性能),且应该尽量避免使用索引作为key(有的时候列表发生排序),这样容易导致一些隐藏bug...
2020-05-27 23:53:07 1546
原创 原理篇---v-for、v-if的渲染
注意:在渲染过程中v-for优先于v-if被解析,所以这两个指令不要使用在同一个标签上面。如果同时使用,他会每次循环完了再判断,这样会造成性能浪费v-for、v-if可能会同时使用的两种情况:1、为了过滤列表中的项(比如v-for="item in list" v-if="item.isActive")2、隐藏列表(比如v-for="item in list" v-if="modelshow")解决办法:1、定义一个计算属性(比如activeIist),然后v-for="item i
2020-05-27 23:05:44 335
原创 日期相关处理技巧
一、日期控件初始为上一个月的1号到下一个月的最后一天关键思路:1、定义一个用于遍历的日期对象2、下一个月的最后一天就是下下个月的1号的前一天let option = { '0':'12', '1':'1', '2':'2', ..... '12':'12', '13':'1', '14':'2'}let arr = Object.entries();let {lastMonth,lastMonthYear,next2Month,
2020-05-26 22:39:47 78
原创 vue单文件组件中的深度选择器
scoped原理:scoped会给当前组件模板中的所有元素添加一个随机属性(<div data-v-7ba5bd90 class="el-button">),同时也会给组件中的所有样式也添加一个对应的属性选择器(.el-button[data-v-7ba5bd90])深度选择器的原理:加了深度选择器,它就不会给那个样式加随机属性了深度选择器的写法:scss中:::v-deepless中:/deep/css中:>>>如:<style
2020-05-22 02:05:41 330
原创 sync修饰符
使用目的:实现父子组件双向绑定(其实质也是父子组件之间的属性事件传递)父组件中:<child :visible.sync="visible" v-show="visible"></child>data(){ return { visible:false }}子组件中:<button @click="handleClick"></button>methods:{ handleClick(){
2020-05-22 00:03:36 100
原创 vue插槽
默认插槽和具名插槽的使用(常用)子组件child.vue:<div class="header"> <slot name="header"></slot></div><div class="default"> <slot></slot></div><div class="footer"> <slot name="footer"></slot&g
2020-05-21 00:25:09 91
原创 vuex的使用
一、安装npm i vuex -S二、引进vuex并使用vuexstore/store.js中import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export const store = new Vuex.Store({ state:{}, getter:{}, mutation:{}, action:{}})main.js中import Vue from 'vue'import A
2020-05-20 23:53:54 78
原创 类的使用
一、类的本质是一个函数,大括号中都是给对象定义的属性和方法,方法的定义必须使用简写的形式;大括号中默认运行在严格模式下;在初始化一个对象时,类中的构造函数会自动执行,所以所有的初始化内容都应该放在构造函数中,如this.bindEvent()二、对象属性的定义,属性继承原理(User.call(this,name),在Admin类中内部实现的)class User { name = 'jim'}class User { constructor(name){ th
2020-05-14 00:39:22 1356
原创 Array及Array.prototype上有用的方法收集
1、Array.from可以将一个类数组对象或者可遍历对象转换成一个真正的数组let arr = Array.from($lis)2、Array.prototype.includes判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回falselet arr = ['jim','tom','jack'];arr.includes('jim');//truearr.includes('lucy');//false3、Array.prototype.fi
2020-05-13 23:20:27 216
原创 for in与for of
for in既可以遍历数组,也可以遍历对象let arr = ['jim','tom','jack'];for(let key in arr){ console.log(key);//0,1,2 console.log(arr[key]);//jim,tom,jack}let obj = {name:'jim',age:18}for(let key in obj){ console.log(key);//name,age console.log(obj[key]
2020-05-13 22:40:18 67
原创 对象的简写
赋值解构时:{name:a,age:b} = obj;//如果变量a的名字是name,变量b的名字是age,就可以简写{name,age} = obj;字面量声明一个变量时:let obj = {name:a,age:b}//如果变量a名字是name,变量b的名字是age,就可以简写let obj = {name,age}总结:{name:a,age:b},对象中如果冒号前后的变量名一样,就可以简写,如{name:name,age:age}就可以简写成{name,age}...
2020-05-13 22:25:24 924
原创 vuecli项目小常识
1、其他组件的样式在当前组件里设置是无效的,但是可以在app.vue中设置生效eg:第三方库的样式设置、父组件中设置子组件中某个dom的样式
2020-05-13 00:25:40 53
原创 原型检测
a instanceof UserUser.prototype是否在a对象的原型链上b.isprototypeof(a)b对象是否在a对象的原型链上
2020-05-13 00:04:58 108
原创 better-scroll的使用(上拉加载更多)
1、安装、引入及使用文档npm i better-scroll -Simport BScroll from 'better-scroll'使用文档http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll%20%E6%98%AF%E4%BB%80%E4%B9%882、dom结构及样式:better-scroll作用在外层容器(.wrap)上,外层容器要给一个高度(如果.wrap的外层容器有高度,直接100
2020-05-11 23:28:50 1727
原创 处理后端返回的换行字符串
后端传给前端的字符串:我们都是中国人\n我爱我的祖国在控制台打印出来是这样的:我们都是中国人←┘我爱我的祖国页面上要显示换行,还需要加一行样式:white-space:pre-wrap;
2020-05-11 22:35:31 2479
原创 变量的类型检测
typeof常用来作变量的类型检测1. 'undefined' --未定义的变量或值2. 'boolean' --布尔类型的变量或值3. 'string' --字符串类型的变量或值4. 'number' --数字类型的变量或值5. 'object' -对象类型的变量或值,或者null(这个是js历史遗留问题,...
2020-05-09 00:09:02 369
原创 常用的Object静态方法
原型相关:Object.create可以根据原型创建对象Object.getPrototypeOf(obj) 根据实例获取原型Object.setPrototypeOf(obj,parent)属性特征相关:Object.defineProperties与Object.defineProperty可以设置属性的特征Object.freeze()属性及属性值操作相关:...
2020-05-07 23:48:30 197
原创 原型和继承
什么是原型:javascript中面向对象的继承基于原型,js中对象和构造函数(类)都有原型;对象的__proto__指向对象的原型,构造函数的prototype指向构造函数的原型function F(){}let f = new F();F.prototype == f.__proto__;//true什么是继承:当对象中没有某个属性或者方法时,它可以使用原型链上的这个属性...
2020-05-07 00:28:53 72
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人