2018-04-04 11:13:04来自分类 其他
github仓库:
https://github.com/lincenying/wepy-mmf-blog
欢迎加星讨论
用的是`wepy`框架, 页面不多, 只有 2 个列表页, 1 个详情页, 1 个介绍页,
功能也只有点赞, 加不了评论, 有评论功能就通不过审核
...
2018-03-27 10:00:48来自分类 前端
目录
1. [React 相关](#react)
2. [Vue 相关](#vue)
- [Vue 组件库](#vue-components-)
- [Vue 表单](#vue-form-)
- [Vue 操作](#vue-handle-)
- [Vue 图片](#vue-image-)
- [Vue 通知](#vue-notice-)
- [Vue 其他](#vue-other-)
3. [前端 UI 框架](#ui)
4. [CSS 相关](#css-)
5. [单页](#spa-)
6. [表单相关](#form-)
7. [弹出相关](#dialog-)
8. [开发工具](#devtools-)
9. [移动端相关](#mobile-)
10. [鼠标相关](#mouse-)
11. [数据处理](#data-)
12. [图片相关](#image-)
13. [动画相关](#animation-)
14. [项目资料](#information-)
15. [其他相关](#other-)
# react
React 相关
===实例===
https://gi...
2018-01-15 16:19:04来自分类 Vue
一个网站一旦涉及到多用户, 就很难从 Cookies 中逃脱, Vue SSR 的 cookies 也真算是遇到的一个不小的问题, 从开始玩 SSR 开始到现在, 一共想出了3种方案, 从最早的把 Cookies 注入到 state 中, 到把 Cookies 注入到 global, 到现在的将 Cookies 注入到组件的 asyncData 方法.
随着 Vue 的升级, 第一种方案已经不再适用, 第二种也有不少的限制, 于是想到第三种方案, 下来就说说具体实现的方法:
### 第一种方案
第一种方案已经不再适用, 这里不再细说
### 第二种方案
思路: 将 cookies 注入到 ssr 的 context里, 然后在请求 api 时读取, 再追加到 axios 的header 里
1, 首先在 server.js 里将 cookies 加到 context里
```javascript
const context = {
title: 'M.M.F 小屋',
description: 'M.M.F 小屋',
url: req.url,
...
2018-01-03 16:34:01来自分类 Vue
### 1. v-model
在 jsx 中支持 v-model 指令
github: https://github.com/nickmessing/babel-plugin-jsx-v-model
```bash
npm i babel-plugin-jsx-v-model -D
# or
yarn add babel-plugin-jsx-v-model --dev
```
.babelrc:
```
{
"presets": ["es2015"],
"plugins": ["jsx-v-model", "transform-vue-jsx"]
}
```
```
Vue.component('hello-world', {
data: () => ({
text: 'Hello World!'
}),
render () {
return (
<div>
<input type="text" v-model={this.text} />
{this.text}
</div>
)...
2018-01-02 11:10:23来自分类 Vue
```
<template>
<div class="el-textarea">
<textarea v-model="content" id="textarea" type="textarea" rows="2" autocomplete="off"></textarea>
<button @click="insertAtCursor('<张三>')" type="button">插入会员名</button>
</div>
</template>
<script>
/* eslint-disable no-inline-comments */
export default {
data() {
return {
content: ''
}
},
methods: {
async insertAtCursor(myValue) {
const myField = document.querySelector('#textarea')
if (my...
2017-12-18 15:07:55来自分类 前端
### nvm 使用淘宝镜像
```bash
export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node
export NVM_IOJS_ORG_MIRROR=https://npm.taobao.org/mirrors/iojs
```
### npm 使用淘宝镜像安装包
相关文件: ~/.npmrc
```bash
npm config set registry https://registry.npm.taobao.org
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/
```
### yarn 使用淘宝镜像安装包
相关...
2017-12-01 10:08:59来自分类 Vue
.sync 在 .vue 文件中写法很简单,
```
<comp :foo.sync="bar"></comp>
```
但是在 jsx 语法中, 这类指令, 双向绑定, 修饰符写起来, 确是麻烦的很, 有的时候不得不用 jsx 语法时, .sync 修饰符该怎么写呢?
首先 .sync 只是个语法糖, 真实语法是:
```
<comp :foo="bar" @update:foo="val => bar = val"></comp>
```
以 element 的 dialog 组件为例, 那么 jsx 的写法就可以这么写:
```
render(h) { // eslint-disable-line
const listeners = { // 关键代码 - 1
'update:visible': val => {
this.show.dialog = val
}
}
const content = this.show.dialog ?
...
2017-11-19 00:18:38来自分类 Vue
看过很多 vue 项目的代码, 发现很多人喜欢把样式写在组件了, 其原因大部分是为了方便, 好维护, 也很多人喜欢滥用`scoped`属性, 官方的 [vue-hackernews-2.0](https://github.com/vuejs/vue-hackernews-2.0 "vue-hackernews-2.0") 的实例也是这么做的, 但是个人却不太喜欢这么做, 原因有以下几点:
### 1. 构建速度会变慢
写在组件的 style 里的样式会先经过`vue-loader`再走`less-loader`或者`css-loader`, 无形中增加了编译时间
### 2. 在用了 scope 属性后, 生成的 js 文件和 css 文件都会正常臃肿一些
scope 属性, 其实就是在经过`vue-loader`编译的时候, 组件模版的对应元素和 css 样式添加一个随机的属性, 这样会造成在代码中添加大量类似`data-v-33053b70`这样的代码上去, 无形中使打包后的文件变大, 组件越多, 越明显
### 3. scope 属性, 对当前组件不存在的元素不起作用
原因...
2017-09-28 17:15:03来自分类 JavaScript
```javascript
var array = [[4,'dasd'],[5,'dasd'],[1,'dasd'],[2,'dasd'],[3,'dasd'],[13,'dasd'],[23,'dasd']]
var newarray = []
array.map(i => {
let index = newarray.findIndex((j) => j[0] > i[0])
index === -1 ? newarray.push(i) : newarray.splice(index, 0, i)
});
console.log(newarray)
```...
2017-09-08 14:57:33来自分类 Vue
思路: 用 ajax 将文件下载, 然后用 jszip 压缩文件, 最后用 file-saver 生成文件
## 1. 准备工作
安装 3 个依赖: axios, jszip, file-saver
```bash
yarn add axios
yarn add jszip
yarn add file-saver
```
## 2. 下载文件
```javascript
import axios from 'axios'
const getFile = url => {
return new Promise((resolve, reject) => {
axios({
method:'get',
url,
responseType: 'arraybuffer'
}).then(data => {
resolve(data.data)
}).catch(error => {
reject(error.toS...
