- 博客(26)
- 收藏
- 关注
RSS订阅原创 css每日学一点
min-height设置段落的最小高度content与 :before 及 :after 伪元素配合使用，来插入生成内容。:after用来在元素后面追加生成一个内容background-clip规定背景的绘制区域background-size规定背景图像的尺寸clip-path剪裁的样式animationanimation-direction@keyframes sw...
2020-03-09 12:09:48
161
原创 自定义指令的学习
说来惭愧，vue的项目都做出来了一个，居然今天才知道自定义指令。呜呜呜。但是自我感觉也没有很大必要，毕竟现在JS是万能的哈哈哈哈两种定义方式全局// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.f...
2020-03-08 13:07:02
188
原创 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
255
1
原创 对模板字符串语法的深入理解（基于vue2.6 cli4）
昨天在B站看完了一点vue的基础。今天在重新复习一下关于props的传递首先来看一下HelloWorld组件。 <!-- 这里的msg是通过父组件Home传递过来的 --> <h1>{{ msg }}</h1>那么，这个msg是从哪儿来的呢？别急往下看 props: { msg: String },看到props就...
2020-03-06 11:13:50
259
1
原创 vue-router看这一篇就够了
vue-router是vue的核心插件之一，要好好理解牢记前端路由的概念路由其实分两种，一种前端路由，一种是后端路由。先谈谈后端，在我做的koa2中，没有使用任何前端框架，只是用了ejs模板。所有的页面跳转都是后端完成的，这就带来一个问题，频繁的后端渲染实际对性能有损害。所以前端路由就出现了，在vue中，页面的跳转都是又前端完成的，后端只在第一页面刷新时使用。所以后端路由的本质就是浏览器...
2020-03-05 19:06:52
344
原创 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
159
原创 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
158
原创 vue之数组更新检测
首先得明白，JS操作数组有一些是改变原数组的，有一些则是生成一个新数组。那么vue又是响应式的，所以就会想是不是操作数组就可以改变视图。以下参考官方文档数组更新检测变异方法顾名思义，变异的单词为mutation，也有改变之意，即会修改原数组，但不会返回新的。有以下方法push()pop()shift()unshift()splice()sort()reverse()...
2020-03-04 16:56:19
416
原创 使用vue过滤器
首先得知道过滤器是干嘛用的。比如说自来水从水厂到家，肯定是经过了多重的过滤才能被使用。那么vue过滤器也是如此。用一张图来生动表示一下过滤器的使用方法<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId">&...
2020-03-04 11:51:29
214
1
原创 三七互娱笔试题
明天下午就要参加三七互娱的前端笔试了，但是心里没底，没有做过题，所以今天恶补一下。一下题目均为三七互娱前端题一、用js写出一个冒泡排序算法。看到这个题我是懵的，因为冒泡排序我已经忘了具体是啥了。知识点：冒泡排序算法首先解释一下冒泡排序算法：好比有一个水缸，现在有 N 个水泡在里面，并且杂乱无章的竖直排列。然后因为自然规律，水泡大的会先浮出来。所以算法来了，就是从水缸底部开始依...
2020-03-04 10:23:09
5122
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
583
原创 金山办公2020校招前端开发工程师笔试题
每天看看面试题，巩固知识，冲鸭一 、写出如下代码的执行结果考察了 promise，以及任务处理顺序。promise值得单写一篇文章，这里不过多赘述。new Promise((resolve) => { console.log('1') resolve() console.log('2')}).then(() => { c...
2020-03-03 12:43:03
371
原创 三七互娱前端面试
明天下午就要参加三七互娱的前端笔试了，但是心里没底，没有做过题，所以今天恶补一下。一下题目均为三七互娱前端题一、用js写出一个冒泡排序算法。看到这个题我是懵的，因为冒泡排序我已经忘了具体是啥了。知识点：冒泡排序算法首先解释一下冒泡排序算法：好比有一个水缸，现在有 N 个水泡在里面，并且杂乱无章的竖直排列。然后因为自然规律，水泡大的会先浮出来。所以算法来了，就是...
2020-03-02 21:18:37
1461
1
原创 异步组件实现按需加载
为什么要有这个东西呢，道理很简单，因为vue时单页应用，这回导致一个问题，就是第一次加载时会变得很慢，因为它在第一次加载时九八所有的页面就加载完了假设有5个页面，那么第一就要加载5个页面，但是如果只想看第一个页面，那么其他4个页面时没有必要加载的，这样会浪费导致体验不行，影响性能。所以，引入了按需加载，即访问那儿一个页面就加载哪儿一个但是要注意，只有当j...
2020-03-02 15:39:56
341
原创 打包上线过程
使用@vue/cli自带的ui。打包完成后会在目录下生成一个dist文件夹，然后将dist文件移到服务器根目录即可，如果需要放在根目录下的一个文件夹里，则需要到vue.config.js中去修改assetsPublicPath即可 ...
2020-03-02 15:20:29
227
原创 在手机端测试遇到的BUG
有一个功能是拖动侧边字母表，然后整个页面都一个自动滑动到所对应的字母表。在电脑上测试没有问题，但是用手机会遇到一个傻逼的bug，就是当我在拖动的时候，整个页面都会拖动，类似于平时用手机浏览微博等向下拉就会刷新时页面乡下拖一样的效果怎么解决呢？加上整个 .prevent 即可@touchstart.prevent="handleTouchStart"同时还引出了一个知识...
2020-03-02 14:58:38
544
原创 递归组件的使用
假设有这样一个数据,可以发现是一个嵌套的数据关系，在id为0的数据中还包含了二级数据，如果要使用的话就可以使用递归组件。在此之前，我都以为组件的名字只是用来在父组件中使用的，但是还有一个大用处，就是自身去调用自身！牛逼了但是有一点很奇怪，组件使用了DetailList的名子，但是在使用自己使用自己是总是报错该组件未被注册，后来就换了一个组件名，改成了li...
2020-03-02 11:52:49
298
原创 点击图片显示画廊效果
看起来很复杂，实际上只是用到了v-show，v-show可以控制组件显示与否。其实项目不是最终目的，而是通过项目去掌握知识达到融汇贯通的效果。所以不要囫囵吞枣的将项目做完，而是时时反思。好了废话不多讲，先看效果图可以发现图片是居中显示的，其他地方都是黑色背景，并且这还是一个轮播效果。emmmmm ，好复杂解决办法第一步首先来结解决这个css的问题，...
2020-03-02 08:46:30
442
原创 炫酷的文字渐变效果
话不多说直接上代码 margin-left .2rem font-size .28rem background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #...
2020-03-01 20:16:10
131
原创 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
343
原创 mapState的使用
如果要获取store里面的state的city属性。首先来看看没有使用mapState的情况,{{this.$store.state.city}}再来看看使用mapState后{{this.city}}那么为什么会这样呢？先来看看官方的定义：当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapSta...
2020-03-01 15:58:58
2903
原创 vue中使用swiper的问题
发现使用的swiper插件经常性出现一个问题，就是不知道什么时候开始，loop就失效了。即不能循环。百度后发现是因为使用了缓存的原因。 loop设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的， 可是在vue的v-for中时，异步加载的数据都还没有返回时，就先加载了Swi...
2020-03-01 15:51:43
293
原创 vue中click事件不生效
本来没打算写这个，因为之前发现click不生效可以使用touchstart去代替，可是后来发现使用了touchstart后不能在滑动了，其实可以滑动，但是使用click的目的是为了点击后跳转到首页，所以在刚刚准备滑动时，就被跳转到了首页。于是乎，搜索了一下，发现问题在于使用了一个插件：better-scroll只需要做如下配置即可this.scroll=new BSc...
2020-03-01 15:22:53
2791
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人