- 博客(15)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 【CSS基础】
CSS官网文档地址： https://www.w3.org/TR/?rel设置为dns-prefetch可以提前让DNS进行域名解析成IP（性能优化）CSS属性的可用性：https//caniuse.com/在CSS中可以使用@import引入其他CSS文件。二进制0b开头，八进制0o开头，十六进制0x开头。也可用来做网站的图标rel设置为icon。link元素通常是在head元素中。CSS推荐学习文档：MDN文档。CSS的三种编写样式。
2024-01-15 22:47:17
335
1原创 Vue的依赖注入
Vue的依赖注入依赖注入官方文档当一个module拥有超过两层的组件时，从后代组件一层层emit出去调用祖先组件的方法或一层层将祖先的数据用props传递到后代组件实在是太麻烦，当需要修改时也需要一层层去找需要修改的地方vue.js提供了一个“依赖注入”的方式，在这个方式中用到了两个新的实例选项：provide和injectprovide选项允许我们指定我们想要提供给后代组件的数据/方法。祖先组件：...data() { return { msg: ‘I am origin compon
2020-09-03 13:36:16
6353
原创 深拷贝和浅拷贝的区别
深拷贝和浅拷贝的区别浅拷贝：假设有A数组，B复制了A数组，当A数组改变，B数组也改变，说明是浅拷贝深拷贝：假设有A数组，B复制了A数组，当A数组改变，B数组没改变，说明是深拷贝let a = [0,1,2,3,4], b=aconsole.log(a===b) // true 说明拷贝成功a[0] = 1console.log(a,b) // [1,1,2,3,4] [1,1,2,3,4]a改变了b也改变，说明这是一个浅拷贝，为什么会是一个浅拷贝呢？因为a是一个引用数据类型，我们都知道
2020-09-03 13:35:50
166
原创 $nextTick和$forceUpdate的使用
nextTick和forceUpdate的使用nextTickthis.$nextTick() 将回调延迟到下次DOM更新循环之后执行，在修改数据之后立即使用它，然后等待DOM更新，和全局的Vue.nextTick()一样，不同的是回调的this自动绑定到调用它的实例上应用场景在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。因为在created()钩子函数执行的时候DOM其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一
2020-09-03 13:34:48
613
原创 Vue的动态组件描述和使用
Vue的动态组件描述和使用描述当在同一个页面使用多个相同类型的组件时，往往会在代码中引入多个组件来达到效果，比如我在页面中需要切换不同三个的组件，不用动态组件的做法是每个组件都添加点击事件，当我点击其中一个时另外两个隐藏，但是这样会使代码变得冗余，所以我们使用Vue.js提供的动态组件实现组件的动态切换动态组件的使用使用component标签，然后使用其提供的is属性，is属性带的值是组件名，传入的是哪个组件名就使用哪个组件，除了以下的写法外也可以引入外部的组件作为动态组件，只需将currentCo
2020-09-02 15:04:53
449
原创 Object.keys和Object.values
Object.keys和Object.valuesObject.keys参数：对象obj返回值：对象obj的所有可枚举属性的字符串数组使用Object.keys会将如下对象转成[“name”, “age”, “address”,“getName”]的字符串数组let person = {name:"张三",age:25,address:"深圳",getName:function(){}}使用Object.keys()方法结合forEach循环可以获得属性对应的值Object.keys(per
2020-09-02 15:01:25
392
原创 filter()和map()的区别
filter()和map()的区别filter()filter()方法是对原数组进行过滤筛选，产生一个新的数组对象filter()不会对空数组进行检测(如果对空数组进行筛选，返回值位undefined);filter()不会改变原始数组;返回数组包含了符合条件的所有元素,如果没有符合条件的元素则返回空数组语法: array.filter(function(currentValue,index,arr), thisValue) 参数说明 filter方法中的function回调有三个参数第一个参
2020-09-02 14:54:52
3149
原创 slice和splice的对比
slice和splice的对比slice可以用来从数组提取指定元素，该方法不会改变元素，而是将截取到的元素封装到新数组返回参数截取开始的位置的索引,包含开始索引截取结束的位置的索引,不包含结束索引，第二个参数不写，此时会截取从开始索引往后的所有元素，索引可以传递负值,如果传递一个负值，则从后往前计算const arr = ['a', 'b', 'c']let result1 = arr.slice(1)console.log(result1) // ['b', 'c']let res
2020-09-02 14:46:50
158
原创 Vue中computed，methods，watch之间的对比
Vue中computed，methods，watch之间的对比computedcomputed是具有缓存机制的，而且是基于他们的响应式依赖进行缓存，即只在相关响应式依赖发生改变时他们才会重新求值，像下面这种情况只要message不改变，reversedMessage 会立即返回之前的计算结果，只有在message改变的情况下，reversedMessage 才会返回新的计算结果...<div>{{ reversedMessage }}</div>...data() {
2020-09-02 14:42:23
183
原创 避免传递整个数组到使用层组件
避免传递整个数组到使用层组件要将以下数组传递到第三层组件使用,即孙组件,以前做法是将整个rows从父组件传递给子组件，再由子组件传递给孙组件使用，但是这样很容易会造成数据污染，并且代码也显得臃肿rows = [ { key: 'age', val: 18 }, { key: 'age', val: 23 },]解决方法从子组件开始，不传递整个rows给孙组件，而是将rows里的Object通过循环传递给孙组件使用，避免污染rows父组件father <son:rows="row
2020-09-02 14:35:25
81
原创 Vue中prop的单向数据流
Vue中prop的单向数据流Vue.js官方文档中有一个单向数据流的概念 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。 额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告易犯错误对于vue的开发来说，我们会经常
2020-09-02 14:26:56
527
原创 Vue.set()的应用
Vue.set()的应用对于前段开发人员来说，对数组进行操作后并重新显示到页面上，往往会遇上数据改变页面不刷新的情况，经过查找Vue.js的官方文档，发现了造成这个的原因是由于JavaScript的限制，Vue不能检测以下变动的数组：当利用索引直接设置一个项时当修改数组长度时那么对于第一种情况，我们就可以使用Vue.set(target, key, value)参数接收值targetObject / ArraykeyString / numbervalue
2020-09-02 14:14:04
134
原创 使用vue-cli脚手架创建项目
使用vue-cli脚手架创建项目vue init命令依赖于vue cli，因此我们应该先安装vue cli，vue init命令则是用于创建新项目 npm install -g vue-cli然后使用vue init的命令创建vue项目 vue init <template-name> <project-name>在这里就要提一下，我们用得最多的创建一个vue项目用的都是webpack的模板，但其实官方在git还提供了很多模板比如下面几种都是官方提供的模板web
2020-09-02 13:59:19
142
原创 最少知识原则在前端开发中的应用
最少知识原则在前端开发中的应用在阅读这篇文章前先简单介绍一下什么最少知识原则。最少知识原则是面向对象编程(OOP)的六大原则之一，他的定义是：一个类对于其他类知道的越少越好，就是说一个对象应当对其他对象有尽可能少的了解,只和朋友通信，不和陌生人说话，对于其他五个原则有兴趣的朋友可以去百度查查违背最少知识原则的错误对于一个前端新手来说，会经常使用a.b.c的形式去获取对象a中的数据c，但是当a里面没有b或是b里面没有c，这个时候会报出undefined的错误。原因就是只有开发者知道a里面有b，b里面有c
2020-09-02 13:31:52
157
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人