- 博客(77)
- 收藏
- 关注
RSS订阅转载 持久化
将数据保存在文件中const fs = require('fs')function get(key){ fs.readFile('./db.json', (err, data)=>{ const json = JSON.parse(data) console.log(json[key]); })}f...
2019-09-29 10:51:00
149
转载 docker安装
拿到一个全新的阿里云服务器后，使用ssh进入服务器，执行以下步骤1、apt升级sudo apt-get update2、添加相关软件包sudo apt-get install \apt-transport-https \ca-certificates \curl \software-properties-common3、下载...
2019-09-24 15:34:00
207
转载 vue的生命周期
谈谈你对vue的生命周期的理解vue整个生命周期实现了如下内容initMixin(Vue)stateMixin(Vue) // 实现$watch $set $deleteeventsMixin(Vue) // 实现$on $once $off $emitlifecycleMixin(Vue)renderMixin(Vue)vue...
2019-08-20 11:38:00
181
转载 vscode常用插件
1、Vue Peek ：ctrl + 鼠标左键 ，跳转至函数定义转载于:https://www.cnblogs.com/haishen/p/11343988.html
2019-08-13 09:42:00
157
转载 简易Vue源码实现
index.html文件<div id="app"> <p>{{name}}</p> <p k-text="name"></p> <p>{{age}}</p> <input type="text" k-model="name"> <...
2019-08-09 17:32:00
195
转载 简易vuex源码实现
kvuex.js 文件 （实现vuex插件）// 1、维护状态state// 2、修改状态commit// 3、业务逻辑控制dispatch// 4、状态派发getter// 5、实现state响应式// 6、插件// 7、混入let Vuefunction install(_Vue, storeName = '$store') {...
2019-08-07 15:38:00
152
转载 简易vue-router 源码实现
main.js中import Vue from "vue";import App from "./App.vue";import router from './krouter'Vue.config.productionTip = false;Vue.prototype.$bus = new Vue();new Vue({ router, ...
2019-08-06 15:34:00
104
转载 vue-router基础使用
router.js文件import Vue from 'vue'import Router from 'vue-router'import Home from './views/Home.vue'// import List from './views/List.vue'import Detail from './views/Detail.vue'Vue....
2019-08-06 14:24:00
69
转载 实现树组件
Item.vue文件<template> <li> <div @click="toggle"> <!-- 标题 --> {{model.title}} <!-- 有子元素就显示 --> &l...
2019-08-06 11:02:00
241
转载 弹窗类组件
实现弹窗组件弹窗这类组件的特点是他们在当前vue实例之外独立存在，通常挂载于body他们是通过JS动态创建的，不需要再任何组件中声明常见使用姿势：this.$create(Notice,{ title: '来搬砖啦~', message: '提示消息', duration: 1000}).show()create.js...
2019-08-06 10:27:00
179
转载 form组件，实现过程
Form：管理数据模型-model，校验规则-rules，全局校验方法validateFormItem：显示标签-label，执行校验-prop，显示校验结果Input：绑定数据模型 v-model，通知FormItem执行校验1、实现自定义的双向绑定// KInput.vue中<div> <!-- 自定义组件要实现v-mod...
2019-08-01 16:39:00
284
转载 Vue插槽
插槽语法是Vue实现的内容分发API，用于复合组件开发，该技术在通用组件库开发用有大量应用Vue 2.6.0 之后采用全选 v-slot 语法取代之前的 slot slot-scope1、匿名插槽// parent<HelloWorld> abcabcabcbabc</HelloWorld>// child...
2019-07-31 17:18:00
86
转载 Vue组件通信
1、父组件=>子组件，属性传递父组件：传值<HelloWorld msg="Welcome to your vue app" />子组件：接收props{ msg: String}2、父组件=>子组件，使用ref传值此处使用mounted而不是使用created，因为挂载时子组件才加载完成，才能访问到子组件父组件先于子组...
2019-07-31 16:56:00
102
转载 小程序自定义头部导航栏
第一步：在app.json中设置目前微信小程序不支持单个页面设置，一旦决定要使用自定义导航栏后，那么每个页面都需要设置导航栏组件目录：index.wxml 文件<view class='nav-wrap' style='height: {{height*2 + 20}}px;'> <!-- 导航栏 中...
2019-07-31 10:59:00
845
转载 css日常积累
1、html中，如何让超链接自动换行word-break : break-all;2、文本只显示两行，超出部分显示省略号overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;转载于:https:/...
2019-07-05 15:01:00
65
转载 移动端的无缝轮播图片
第1步：在head部分设置meta，设置html字体大小，以及阻止pc和浏览器默认行为<meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=no"><title>Document</title><s...
2019-06-25 22:18:00
223
转载 vue的h5开发中，将页面保存为图片
需求：长按页面保存到手机实现方式： 将页面保存为图片，然后再当前页面实际上展示的是一张图片，利用移动端自带的功能（长按图片可以保存到手机）来实现这个需求代码：1、使用 html2canvasnpm install html2canvas -d2、<template> <div> <...
2019-06-17 16:36:00
1355
转载 vue-webpack打包问题
打包之后发现资源文件找不到（发现在cli2中有此问题，在cli3中没有问题）解决方案：1、在config -> index.js文件中，如下修改将 assetsPublicPath: '/' 改为assetsPublicPath: './'2、在build -> utils.js 文件中修改：转载于:https:...
2019-06-17 15:55:00
103
转载 禁止移动端点击图片出现预览的默认行为
在移动端开发中，某些设备会存在点击img标签，图片呈现预览模式，但是我们没有给图片添加任何事件这是移动端浏览器的默认行为，解决方式如下：1、在img标签上添加 onclick="return false"<img src="a.png" onclick="return false" />2、图片用背景图的方式插入backgrou...
2019-06-17 15:08:00
693
转载 NPM依赖库的安装
1、安装sass依赖包npm install sass-loader --save-devnpm install node-sass --save-dev2、element-ui使用的校验库npm i async-validator -S3、全局安装webpacknpminstall-g webpack转载于:https://www....
2019-06-17 09:31:00
543
转载 移动端事件
var div = document.getElementById('div1");div.ontouchstart = function() { alert(1);}div.addEventListener('touchstart', start)function start () { alert(1);}注意：在移动端开发...
2019-06-06 17:46:00
92
转载 弹性盒模型，flex
1、定义盒模型的主轴方向，flex-directionflex-direction: row; // 设置主轴方向为水平方向flex-direction: column; // 设置主轴方向为垂直方向2、主轴上的元素排列方向flex-direction: row-reverse; // 设置主轴方向为水平，元素排列为反序flex-direct...
2019-06-06 14:53:00
52
转载 移动端基础
1、视口：width可视区的宽度（number || device-width）viewport 视口（可视区窗口）默认不设置viewport，一般可视区宽度在移动端是980<meta name="viewport" content="width=device-width">2、是否允许用户缩放（yes || no）-----IOS10无效，使用事件来...
2019-06-04 16:00:00
64
转载 vuex的使用以及在项目中的配置
在main.js文件中import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import * as apiConfig from '@/common/api/config'// vue的自定义属性，可在v...
2019-06-04 14:30:00
351
转载 阻止路由跳转，以及路由重定向
在main.js 文件中 1 import router from './router' 2 router.beforeEach((to, from, next) => { 3 // 阻止路由跳转 4 if (满足阻止条件时) { 5 next(false) 6 return false 7 } 8 // ...
2019-06-04 14:06:00
1603
转载 vue判断页面元素（图片、音频等）已经全部加载完毕后的事件
export default { data () { return { timer: null, // 定时器 } }}created () { const that = this that.timer = setInterval(function () { ...
2019-05-29 14:04:00
9117
转载 js工具类
1、将图片转换为base64并压缩// 将图片转换为base64并压缩export const convertImgToBase64 = (url) => { return new Promise(function (resolve, reject) { const canvas = document.createElement('canva...
2019-05-29 09:47:00
80
转载 事件类
1、主动触发点击事件<div> <span class="iconfont icon-tupian" @click="imgTagHandler"></span> <input ref="imgInput" accept="image/*" multiple required type="file" @change="...
2019-05-29 09:22:00
154
转载 聊天输入框，自适应高度（最大4行）
1 <footer :class="footerClassObject"> 2 <div class="textarea" id="textareaDiv"> 3 <textarea placeholder="" 4 @input="textareaChange($event)" ...
2019-05-21 10:55:00
599
转载 rem适配还原设计稿，换算
假设设计妹妹给我们的设计稿尺寸为 750 * 1500 。结合网易移动端首页html元素上的动态font-size属性、设计稿尺寸、前端与设计之间协作流程一般分为下面两种：1、网易做法引入：页面开头出引入下面这段代码，用于动态计算font-size 1 (function(doc, win) { 2 var docEl = doc.documentElemen...
2019-05-18 09:27:00
762
转载 单体模式
单体模式是JavaScript中最基本但又最有用的模式之一，它可能比其他任何模式都更常用。这种模式提供了一种将代码组织为一个逻辑单元的手段，这个逻辑单元中的代码可以通过单一的变量进行访问。通过确保单体对象只存在一份实例，你就可以确信自己的所有代码使用的都是同样的全局资源。 单体类在JavaScript中有许多用途。它们可以用来划分命名空间，以减少网页中全局变量的数目。它们还可以...
2019-05-09 16:55:00
227
转载 继承
类式继承function Person(name){ this.name = name;}Person.prototype.getName = function(){ return this.name;}要创建该类的实例，只需要结合关键字new调用这个构造函数即可：var reader = new Person('Bob');re...
2019-05-09 10:39:00
78
转载 作用域、嵌套函数和闭包
在JavaScript中，只有函数具有作用域。也就是说，在一个函数内部声明的变量在函数外部无法访问。私有属性就其本质而言就是你希望在对象外部无法访问的变量，所以为实现这种拒访性而求助于作用域这个概念是合乎情理的。定义一个函数中的变量在该函数的内嵌函数中是可以访问的。下面这个示例说明了JavaScript中作用域的特点：function foo(){ var a = 10;...
2019-05-06 10:38:00
121
转载 为什么我不推荐你使用vue-cli创建脚手架
最近在知乎看到一个问题，原问题如下： “很奇怪，为什么现在能找到自己手动创建vue脚手架的文章非常少，而且大家似乎对webpack4的热情并不高，对于想基于vue2.0+webpack4搭建一个脚手架的我来说资料真是少得可怜。难道现在一般的做法就是直接从vue-cli开始然后改成自己需要的模样吗？难道就没有人从零开始搭建一个渐进增强的脚手架？这一点我很疑惑，希望大牛...
2019-05-05 17:39:00
791
转载 Promise
在JavaScript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现：function callback() { console.log('Done');}console.log('before setTimeout()');setTimeout(call...
2019-05-04 21:39:00
59
转载 this.$nextTick()
$nextTick Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick，则可以在回调中获取更新后的DOM（dom的改变是发生在nextTick()之后），这个方法作用是当数据被修改后使用这个方法，会回调获取更新后的dom再render出来 Vue.nextTick()作用：在下次dom更新循环结束之后，执行延迟回调。...
2019-05-04 10:38:00
72
转载 Vue的修饰符 .sync
.sync 修饰符以前存在于 vue1.0版本里，在2.0版本中移除了 .sync 但是在2.0发布之后的实际应用中，我们发现 .sync 还是有其适用之处的，比如在开发可复用组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从2.3.0起，Vue重新引入了 .sync修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on...
2019-05-04 09:28:00
77
转载 VSCode格式化ESLint方法
背景：由于在项目进行过程中，发现项目组有ESLint的代码规范，并在各项目中配置了ESLint 导致使用vscode各种报错，如下图解决方案：1、安装插件（1）ESLint：JavaScript代码格式化工具（2）vetur：可以格式化html，标准css，标准js，vue文件2、确认package.json中的配置项...
2019-04-19 19:21:00
1119
转载 JavaScript实现接口的三种经典方式
接口：提供一种说明一个对象应该有哪些方法的手段JavaScript中有三种方式实现接口：（1）注释描述接口（2）属性检测接口（3）鸭式辨型接口1、注释描述接口：不推荐优点：易于实现，不需要额外的类或函数。缺点：纯文档约束，程序不能检查实现接口的对象是否实现了所有接口方法 1 /** 2 * interface Composite{...
2019-04-19 13:45:00
206
转载 2019前端工程师自检清单与思考
对于JavaScript，掌握其语法和特性是最基本的，但是这些只是应用能力，最终仍旧考量仍然是计算机体系的理论知识，所以数据结构，算法，软件工程，设计模式等基础知识对前端工程师同样重要，这些知识的理解程度，可以决定你在前端工程师这条路上能走多远，是时候进行一波自检了，查漏补缺，只有全面发展，才会使你更强，以下会进行自问的形式按照图片里面的知识点进行自我check知识点在面试过不下50...
2019-04-18 13:51:00
71
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人