Hiroshi's

原创 vue项目中使用js原生制作吸顶效果

获取滚动条的偏移量document.documentElement.scrollTopIE浏览器一般用这个值document.body.scrollTop为了兼容，我们一般通过下面代码获取滚动条的偏移量：scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTophtml结构：<template> <div class="param-ba

原创 vue插槽

// ProductParams.vue<template> <div class="param-bar"> <div class="container"> <div class="pro-title"> 小米8 </div> <div class="pro-params"> <a href="">概述</a><span&gt

原创 vue爬坑之mock使用拦截正常axios请求

最近一个项目犯了一个特别二的问题，卡了一会才解决，当时在调试登录接口的时候，怎么都发不出去axios请求，chrome的network里面无论如何都没有axios发起的登录请求：// login.vue<template> <div class="login"> <div class="container"> <a href="/#/index"></a> &l

原创 vue-lazyload使用

安装npm i vue-lazyload --save-dev引入// main.jsimport VueLazyLoad from 'vue-lazyload'Vue.use(VueLazyLoad, { // 这里为了简单只配置loading属性，还可以配置比如error属性 loading: '/imgs/loading-svg/loading-bars.svg'})到项目里面修改img标签把v-bind:src改为如下代码：...

原创 vue-awesome-swiper爬坑记录之修改pagination中bullet小圆点的颜色---样式穿透写法

修改项目时候发现pagination默认的小圆点颜色蓝色怎么也修改不了，css覆写也没用，尝试了一下sass的穿透覆写css，成功了：要注意头部要写 /deep/关键字

原创 添加分隔符|的几种方法

要给每个a标签(除了最后一个)后面添加分隔线| ，可以这样做：方法一：在每个a后面加上span标签方法二：使用伪类：注意：最后一个伪类不想要可以这样：&:last-child:after{ display: none; }一定要注意顺序，是&:last-child:after，不是&:after:last-childlast-child和after还有&通过:连接对于高度相等的文字和分割线|，我们还可以使用border

原创 this.$router获取路由参数方法

this.$router.push('/cart')路由获取参数方法:this.$router.params或者this.$router.query

原创 sass定义mixin样式

写样式的时候经常遇到样式重复出现的情况，为了减少代码量并且方便管理，我们使用mixin先定义一个mixin:// flex样式复用@mixin flex ($horizontal:space-between, $vertical:center) { display: flex; justify-content: $horizontal; align-items: $vertical;}接着在项目中引入mixin.csss:<style lang="scss" scoped&g

原创 Eslint常用规范

以下附上Eslint常用规范："no-console": "error", 　　　　　　　　　　　　　　　　 // 禁止console"no-alert": "error", 　　　　　　　　　　　　　　　　　 // 禁止alert,conirm等"no-debugger": "error", 　　　　　　　　　　　　　　　 // 禁止debugger"semi": ["error", "never"],　　　　　　　　　　　　 // 禁止分号"no-tabs": "error", 　　　　　

原创 a标签伪类的顺序

原创 快速生成内容lorem

p>lorem5效果：

原创 jsonp跨域获取数据

先安装npm i jsonp --save-dev// App.vueimport jsonp from 'jsonp'mounted () { const url = 'https://www.imooc.com/common/adver-getadver' jsonp(url, (err, res) => { // 这里通过err来处理一下err不然会报错"Expected error to be handled" if (err) { console.

原创 vue项目报错 Fatal error in , line 0 Fatal error in , line 0解决方案

运行一个以前的vue项目时候报错：google了一下发现是node版本的问题，查看当前node版本是否为v6或者v12开头的, 如果是，就打开控制台，安装node v10的版本:nvm on 开启nvm安装node v10.12.0:切换版本：现在重新启动项目：...

原创 查看全局安装了哪些npm包

npm list -g --depth 0

原创 git操作之回滚与撤销

新建一个demo-3分支:然后删除文件，只保留a.js，并且commit:报错了，是因为没有git add,我们用下面的命令（上面的报错已经提示了）：git commit -m 'update delete files' -a-a就是对于删除的或者修改的数据和文件可以不用git add了然后把修改的结果push上去：git push --set-upstream origin demo-3demo-3分支现在只有一个文件a.js了我们修改一下a.js的代码，新增一条var d

原创 git commit -a是干嘛的

加了-a，在 commit 的时候，能帮你省一步 git add ，但也只是对修改和删除文件有效， 新文件还是要 git add，不然就是 untracked 状态

原创 git操作之打tag

给当前分支打一个tag:git tag t1.0.0推送这个Tag:git push origin t1.0.0我们再推送一个tag上去：查看一下目前所有的tag:git tag --list删除tag:git tag -d t1.0.0推送删除信息：git push origin :t1.0.0

原创 git push提示no upstream branch解决方案

如果是本地新建分支demo-2，而不是从云端pull下来的分支：切换到demo-2分支以后，我们新建一个文件c.js:然后git add. 把文件添加到暂存区：然后执行git commit，但是会报错：我们可以通过执行：git push origin demo-2来推送成功：但是这样太麻烦了，以后每次修改都要输入git push origin demo-2解决方案：可以这样做，执行：git push --set-upstream origin demo-2接着git

原创 git常用命令速查表

原创 vscode 结合git基础操作之代码冲突解决

在branch demo-1上面提交一个var d = xxx，假设不是我提交的既然不是我提交的，我在本地的代码并没有git pull 把最新的代码拉下来，我就写了一个var f = xxx：这时候我把修改添加到暂存区：然后提交：最后点击图标push到云端代码仓库：发现是会冲突报错的：我因为安装了git diff插件，所以会提示让我选择接受当前修改（accept current change），也就是我本人刚才写的var f，或者接受外来的修改，也就是别人修改的代码var d，这

原创 js基础复习之自己实现一个deepClone深拷贝(详细注释版)

复习一下js基础部分的深拷贝问题：// 这里我们先创建一个obj对象，就是我们要深拷贝的那个var obj = { name: 'DeanWade', age: 28, info: { hobby: ['switch', 'ps4', 'basketball', { 'coding1': 'js', 'coding2': 'vue', 'coding3': 'python' }

原创 js基础复习之自己实现一个new方法

我们要知道new一个新的对象的时候，底层做了下面4件事情：新生成了一个对象，即{}链接到原型（通俗理解就是new出来的新对象隐式原型__proto__链接到构造函数显式原型prototype上）绑定 this，将步骤 1 新创建的对象作为 this 的上下文（实际是执行了构造函数 并将构造函数作用域指向新对象）返回新对象function _new(constructor, ...arg) { var obj = {} obj.__proto__ = constructor.prototyp

原创 webpack 打包图片资源url-loader和file-loader

以下教程基于webpack 4.46.0：当前src目录下有这些文件：test2.htmltest2.less，里面引用了3张图片:test2.js,引入test2.less:webpack.config.js如下：const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { entry: './src/test2.js', out

原创 webpack 打包html资源

现在有这两个文件需要打包：我们需要的插件名字叫html-webpack-plugin，先下载引入：使用，在plugins里面配置：执行：发现默认会多了两个文件：生成的index.html默认会引用built.js所以这次打包默认的功能就是我们指定一下HtmlWebpackPlugin的的配置对象template:就表示复制一个test1,html文件并且引入打包输出的所有资源...

原创 webpack4 配置less-loader

这篇教程webpack版本：4.46.0我们的webpack.config.js的配置如下：const path = require('path')//module.exports是commonjs语法module.exports = { entry: './src/index.js', output: { filename: 'built.js', path: path.join(__dirname, 'build') }, module: { rule

原创 webpack4配置css-loader和style-loader

ebpack --entry ./src/index.js -o ./build --mode=development经过这样的配置：const path = require('path')//module.exports是commonjs语法module.exports = { entry: './src/index.js', output: { filename: 'built.js', path: path.join(__dirname, 'bu...

原创 webpack配置

配置webpack build命令配置好了这个命令以后打包项目就可以使用：npm run build这个命令去让webpack打包，并且输出到dist(下图配置了output就是打包结果输出到当前目录下的dist文件夹里，输出结果的名字叫bundle.js)上面的代码有问题，还是要用\转义一下.这个符号配置webpack处理图片，这里为了简单，只处理gif,jpg,jpeg,png,svg这些类型的图片，use对应的数组里面不是字符串，而是对象，因为对象里面可以用options进行更细分的

原创 VS Code配置Tab Size

原创 vue项目初始化之router-view

配置路由：我们通过上面的路由匹配到的组件，都会被渲染到router-view里面去

原创 git命令创建并转到分支

原创 Vue脚手架创建vue项目

原创 Vuex使用

项目根目录新建一个和src平级的store文件夹，里面新建index.js// index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ // 存放全局公用的数据 state: { city: '上海' }})把存放全局都要使用的数据放进state里面接着到main.js里把store导入：通过this.$store.sta.

原创 Vue爬坑之vue cli 3.x 配置Axios(proxyTable)代理

vue cli 3.x 版本对整个项目的构建都有很大的改动，没有原先的config文件夹，没有dev.env.js和prod.dev.js，我们要对webpack做配置，需要自己手动在项目根目录创建一个vue.config.js文件比如我们在组件中想通过axios请求一个api，mock数据在我们本地的public/static/mock下面的index.json文件中：(注意vue cli3里面已经不能访问和src平级的static目录里面的本地静态资源了，全都迁移到了public目录中，也就是之前和

原创 超出文字不换行用...隐藏

//超出文字隐藏------ 需要和这个结合使用overflow: hidden;//当文本溢出，省略号代替text-overflow:ellipsis;//文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。white-space: nowrap;

原创 Vue中JS动画和velocity.js

<div id="app"> <button @click="show = !show">Click</button> <transition @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter" >

原创 在Vue中同时使用过渡和动画

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> <style> .v-enter-active, .v-leave-active { transition: opacity 3s; } .v-enter, .v-l

原创 非父子组件间传值(发布订阅模式/总线机制/Bus/观察者模式)

<body> <div id="app"> <child content="Dean"></child> <child content="Wade"></child> </div> <script> Vue.component('child', { props: { content:

原创 给组件绑定原生事件以及事件修饰符native

上述代码点击页面的Child不会有任何输出，因为绑定的是自定义事件。想要有输出，需要这样做：<body> <div id="app"> <child @click="handleClick"></child> </div> <script> Vue.component('child', { template: '<div @click="com.

原创 vue组件参数校验与非props特性

对于下面这样的一个父组件向子组件传值的简单例子<body> <div id="app"> <child content="hello vue????"></child> </div> <script> Vue.component('child', { props: ['content'], template: '<div&g

原创 vue父子组件传值之单向数据流以及解决方案

<div id="app"> <counter :count="111"></counter> <counter :count="222"></counter> </div><script> var counter = { props: ['count'], template: '<div @click="han