- 博客(52)
- 收藏
- 关注
RSS订阅原创 css每日学一点
min-height设置段落的最小高度content与 :before 及 :after 伪元素配合使用，来插入生成内容。:after用来在元素后面追加生成一个内容background-clip规定背景的绘制区域background-size规定背景图像的尺寸clip-path剪裁的样式animationanimation-direction@keyframes sw...
2020-03-09 12:09:48
156
原创 自定义指令的学习
说来惭愧，vue的项目都做出来了一个，居然今天才知道自定义指令。呜呜呜。但是自我感觉也没有很大必要，毕竟现在JS是万能的哈哈哈哈两种定义方式全局// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.f...
2020-03-08 13:07:02
185
原创 v-show与v-if的困惑
有一个小demo，就是点击父组件然后控制子组件的显示。但是发现用v-if和v-show都可以实现。那么这两玩意区别在哪儿呢？机智如我，打开控制台发现了一点端倪先看v-show。看不懂？h1使用了v-html引入了msg1模板，所以能显示span。那么style哪儿来的？想都不用想，是v-show创造的。那么逻辑是什么呢？就是通过控制display来控制显示与否<h1 data-v-...
2020-03-06 11:47:30
246
1
原创 对模板字符串语法的深入理解（基于vue2.6 cli4）
昨天在B站看完了一点vue的基础。今天在重新复习一下关于props的传递首先来看一下HelloWorld组件。 <!-- 这里的msg是通过父组件Home传递过来的 --> <h1>{{ msg }}</h1>那么，这个msg是从哪儿来的呢？别急往下看 props: { msg: String },看到props就...
2020-03-06 11:13:50
254
1
原创 vue-router看这一篇就够了
vue-router是vue的核心插件之一，要好好理解牢记前端路由的概念路由其实分两种，一种前端路由，一种是后端路由。先谈谈后端，在我做的koa2中，没有使用任何前端框架，只是用了ejs模板。所有的页面跳转都是后端完成的，这就带来一个问题，频繁的后端渲染实际对性能有损害。所以前端路由就出现了，在vue中，页面的跳转都是又前端完成的，后端只在第一页面刷新时使用。所以后端路由的本质就是浏览器...
2020-03-05 19:06:52
333
原创 axios的学习
在vue中调用接口时会使用axios，并且这也是vue官方推荐的。axios的简单使用axios.get("api/index.json") .then(res=>{ //这里的data时固定的，用来获取后端响应的数据 //res返回的是一个对象，而真实的数据都在data属性里 console.log(res.data) })看了在代码中如何应用后，再看看官...
2020-03-04 20:25:55
149
原创 fetch的学习
fetch和ajax很像，但是推荐使用fetch去代替ajax。简单的使用可以发现，fetch调用接口使用的是promise。有一点需要注意，text()是fetch的一个api，返回一个promise对象，所以才能在后面继续thenfetch("api/index.json").then(data=>data.text()).then(ret=>console.log(re...
2020-03-04 18:23:29
146
原创 vue之数组更新检测
首先得明白，JS操作数组有一些是改变原数组的，有一些则是生成一个新数组。那么vue又是响应式的，所以就会想是不是操作数组就可以改变视图。以下参考官方文档数组更新检测变异方法顾名思义，变异的单词为mutation，也有改变之意，即会修改原数组，但不会返回新的。有以下方法push()pop()shift()unshift()splice()sort()reverse()...
2020-03-04 16:56:19
408
原创 使用vue过滤器
首先得知道过滤器是干嘛用的。比如说自来水从水厂到家，肯定是经过了多重的过滤才能被使用。那么vue过滤器也是如此。用一张图来生动表示一下过滤器的使用方法<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId">&...
2020-03-04 11:51:29
210
1
原创 三七互娱笔试题
明天下午就要参加三七互娱的前端笔试了，但是心里没底，没有做过题，所以今天恶补一下。一下题目均为三七互娱前端题一、用js写出一个冒泡排序算法。看到这个题我是懵的，因为冒泡排序我已经忘了具体是啥了。知识点：冒泡排序算法首先解释一下冒泡排序算法：好比有一个水缸，现在有 N 个水泡在里面，并且杂乱无章的竖直排列。然后因为自然规律，水泡大的会先浮出来。所以算法来了，就是从水缸底部开始依...
2020-03-04 10:23:09
5101
1
原创 金山办公2020校招前端开发工程师笔试题
每天看看面试题，巩固知识，冲鸭一 、写出如下代码的执行结果考察了 promise，以及任务处理顺序。promise值得单写一篇文章，这里不过多赘述。new Promise((resolve) => { console.log('1') resolve() console.log('2')}).then(() => { console.log('3')})s...
2020-03-03 21:08:18
554
原创 金山办公2020校招前端开发工程师笔试题
每天看看面试题，巩固知识，冲鸭一 、写出如下代码的执行结果考察了 promise，以及任务处理顺序。promise值得单写一篇文章，这里不过多赘述。new Promise((resolve) => { console.log('1') resolve() console.log('2')}).then(() => { c...
2020-03-03 12:43:03
364
原创 三七互娱前端面试
明天下午就要参加三七互娱的前端笔试了，但是心里没底，没有做过题，所以今天恶补一下。一下题目均为三七互娱前端题一、用js写出一个冒泡排序算法。看到这个题我是懵的，因为冒泡排序我已经忘了具体是啥了。知识点：冒泡排序算法首先解释一下冒泡排序算法：好比有一个水缸，现在有 N 个水泡在里面，并且杂乱无章的竖直排列。然后因为自然规律，水泡大的会先浮出来。所以算法来了，就是...
2020-03-02 21:18:37
1443
1
原创 异步组件实现按需加载
为什么要有这个东西呢，道理很简单，因为vue时单页应用，这回导致一个问题，就是第一次加载时会变得很慢，因为它在第一次加载时九八所有的页面就加载完了假设有5个页面，那么第一就要加载5个页面，但是如果只想看第一个页面，那么其他4个页面时没有必要加载的，这样会浪费导致体验不行，影响性能。所以，引入了按需加载，即访问那儿一个页面就加载哪儿一个但是要注意，只有当j...
2020-03-02 15:39:56
335
原创 打包上线过程
使用@vue/cli自带的ui。打包完成后会在目录下生成一个dist文件夹，然后将dist文件移到服务器根目录即可，如果需要放在根目录下的一个文件夹里，则需要到vue.config.js中去修改assetsPublicPath即可 ...
2020-03-02 15:20:29
216
原创 在手机端测试遇到的BUG
有一个功能是拖动侧边字母表，然后整个页面都一个自动滑动到所对应的字母表。在电脑上测试没有问题，但是用手机会遇到一个傻逼的bug，就是当我在拖动的时候，整个页面都会拖动，类似于平时用手机浏览微博等向下拉就会刷新时页面乡下拖一样的效果怎么解决呢？加上整个 .prevent 即可@touchstart.prevent="handleTouchStart"同时还引出了一个知识...
2020-03-02 14:58:38
535
原创 递归组件的使用
假设有这样一个数据,可以发现是一个嵌套的数据关系，在id为0的数据中还包含了二级数据，如果要使用的话就可以使用递归组件。在此之前，我都以为组件的名字只是用来在父组件中使用的，但是还有一个大用处，就是自身去调用自身！牛逼了但是有一点很奇怪，组件使用了DetailList的名子，但是在使用自己使用自己是总是报错该组件未被注册，后来就换了一个组件名，改成了li...
2020-03-02 11:52:49
289
原创 点击图片显示画廊效果
看起来很复杂，实际上只是用到了v-show，v-show可以控制组件显示与否。其实项目不是最终目的，而是通过项目去掌握知识达到融汇贯通的效果。所以不要囫囵吞枣的将项目做完，而是时时反思。好了废话不多讲，先看效果图可以发现图片是居中显示的，其他地方都是黑色背景，并且这还是一个轮播效果。emmmmm ，好复杂解决办法第一步首先来结解决这个css的问题，...
2020-03-02 08:46:30
434
原创 炫酷的文字渐变效果
话不多说直接上代码 margin-left .2rem font-size .28rem background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #...
2020-03-01 20:16:10
116
原创 vue跳转页面
vue有两种方法跳转页面使用router-link <router-link to="/detail"> <li class="item" v-for="item of recommendList" :key="item.id"> <img :src=...
2020-03-01 19:16:09
335
原创 mapState的使用
如果要获取store里面的state的city属性。首先来看看没有使用mapState的情况,{{this.$store.state.city}}再来看看使用mapState后{{this.city}}那么为什么会这样呢？先来看看官方的定义：当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapSta...
2020-03-01 15:58:58
2844
原创 vue中使用swiper的问题
发现使用的swiper插件经常性出现一个问题，就是不知道什么时候开始，loop就失效了。即不能循环。百度后发现是因为使用了缓存的原因。 loop设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的， 可是在vue的v-for中时，异步加载的数据都还没有返回时，就先加载了Swi...
2020-03-01 15:51:43
279
原创 vue中click事件不生效
本来没打算写这个，因为之前发现click不生效可以使用touchstart去代替，可是后来发现使用了touchstart后不能在滑动了，其实可以滑动，但是使用click的目的是为了点击后跳转到首页，所以在刚刚准备滑动时，就被跳转到了首页。于是乎，搜索了一下，发现问题在于使用了一个插件：better-scroll只需要做如下配置即可this.scroll=new BSc...
2020-03-01 15:22:53
2779
2
原创 滑动绑定事件（基于vue）
需求：滑动右侧字母列表，手指停在哪屏幕就显示哪儿一个字母开头的城市列表思路第一步首先，给右侧字母表得先绑定三个事件。分别是touchstart、touchmove、touchend。第二步现在得需要知道手指滑倒的地方对对应的字母是什么。这就需要通过一些计算去得出。有一个解决办法是先计算出A与顶部的距离H，然后在算出每一个字母所占的高度h，然后计算...
2020-02-28 12:10:03
610
原创 点击绑定事件（基于vue）
需求点击右边的字母，然后跳转到对应的字母的城市列表如图，点击A 就显示到A。 点击B就显示到B解决方法第一步思路首先要获取到点击的是什么东西，比如点击A就要获取到这个A。那么这个e代表的是什么呢？e其实就是点击事件，然后通过e的属性去获取到这个a。 这里可以通过控制台去查看 handleLetterClick(e){ ...
2020-02-27 20:49:51
589
原创 数据为对象的v-for的使用
之前 v-for 都是对数组使用，这次遇到了对象。这有很大的不同。废话不多说，上代码就懂了key就是对象的属性名，又因为属性名是不能重复的，所以使用key直接座键值即可<template> <div> <ul class="list"> <li class="item" v-for="...
2020-02-27 19:20:19
667
原创 简单的使用ref
今天使用一个插件 better-scroll 。但是文档里使用方法如下：import BScroll from 'better-scroll'const wrapper = document.querySelector('.wrapper')const scroll = new BScroll(wrapper)可以看到需要获取这个dom元素，然后还要去使用它。那么问...
2020-02-27 17:03:50
135
1
原创 溢出问题
有一个现象，就是一个页面东西太多放不下就会自动出现一个滚轮，由于是默认的，不太行，所以需要对css做一点改变先上两张图未设置样式设置样式后能发现是怎么做的吗？首先定位为绝对定位，此时，是相对除了城市选择和搜索框的其他部分。为了能让整个页面都被选择并且表现为红色，css如下.list position absolute...
2020-02-27 16:38:38
221
原创 完美解决iconfont svg格式的定位问题
因为使用svg格式有很多好处，虽然我只缠它的身体哈哈哈哈。但是相比较于iconfont的传统格式，首先它不是文本，所以不能直接使用text-align，因为要大量的使用居中对齐，所以显然使用svg对于之前的我是个灾难。刚刚都做到第二个页面了，第一个页面的svg我并没有对齐哈哈哈，刚刚自己琢磨了很久，试着在外面包裹了div，才让它动一下。可是还有一个致命的问题，就是在放...
2020-02-27 12:59:48
2640
原创 配置路由
现在已经写完了第一个大页面，所以得创建第二个。然后有一个需求，就是点击第一个页面的某个地方，然后实现跳转，可以到新创建的页面去。这段代码的重点在 <router-link to="/city"> 意思是点击之后，会被跳转到 "/city" 路径下。 通过查看DOM，实际上这里被转换成为了一个a标签。并且a标签还自带了两个默认属性，其中一个就是color，会将字...
2020-02-27 12:10:53
98
原创 父子组件之间的传值
解决了axios第一座大山，就来到了第二座，可预见的是第三座应该是vuex。废话不多说，直奔主题。首先，假设一个场景。有一个mooc数据文件，然后有一个父组件，父组件有若干个子组件，每一个子组件都需要到mooc提取数据。问题来了，如果让每一个子组件去获取，假设有10个子组件，那么就需要发送10个axios请求，这对性能是不好的。所以现在只让父组件去获取，这样就可以只发一个请...
2020-02-27 11:05:34
392
原创 使用axios解决跨域、显示mooc数据（正确版）
天杀的 vue cli 4 。一晚上就弄这个了~~~~。之前的错误版该说的都说了，这次直接贴正确代码。不过有几点要先说。1.首先，不懂的一定要先看vue.config.js配置的官网：https://cli.vuejs.org/zh/config/#devserver-proxy2.之前在vue cli 2中，显示mooc和打印mooc都是在vue组件中写的，但是现在是直...
2020-02-26 23:16:00
203
原创 使用axios跨域（错误！！！）
由于教程用的 vue-cli 2，但是现在使用 4 版本了。已经不能按着教程搞了。当然了，实际上教程对我也只是学习一下css布局和基础的东西，虽然css写的很烂接下来就来看一下，在@vue/cli中如何处理跨域先看远古时期的版本： webpack从proxyTable开始接下来就是现在的，弄了接近一个钟，操！当然了，还得引入mockconst moc...
2020-02-26 22:09:18
179
原创 关于stylus的方法解耦
废话不多说直接上图将文字过长后添加省略号的方法抽离、并且使用mixins.stylus (方法)ellipsis() overflow hidden white-space: nowrap text-overflow ellipsis在vue组件中使用，这里可能会出现不生效的问题，只需要在父元素中添加 ：min-width 0 即可//引入...
2020-02-26 16:20:28
120
原创 如何在一个组件中修改另一个组件的样式
其实可以直接修改，但是现在vue的style都会加上scoped，是为了防止样式污染。这样也就带来了其他的不便，比如今天要解决的这个问题。使用穿透符号 >>>。表示让 .wrapper 下面的所有 .swiper-pagination-bullet-active 都加上样式。这样就可以不受scoped的限制 .wrapper >>>...
2020-02-26 10:51:14
1230
原创 当图片宽高和轮播图的框不一致时
在使用swiper时，遇到了插入的图片宽高和想在页面上展示的宽高不一致的问题，这样就很头疼，并且还要考虑网络差时页面抖动的问题。因为是图片，加入下面是文字，就会加载的比轮播快，那么很可能文字就会先显示在轮播的位置，等轮播加载完后在被挤下来.废话不多说，直接上代码img（333*222） <div class="wrapper"> <...
2020-02-26 10:34:21
1420
1
原创 vue-awesome-swiper
今天做vue的轮播功能，然后遇到了很大的坑，首先是最新版的插件是基于swiper4.相比swiper5及其难用。导致弄了很久才排除大坑最值得一提的是，在手动去化轮播图时，会报错：最后在网上找到一个解决方案：去swiper的js文件中搜索 e.preventDefault() 然后将其屏蔽即可。接下来说说在vue中如何使用。当然，具体的参考swiper4官方...
2020-02-25 22:06:45
213
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人