Fork me on GitHub

发表于 | 分类于 | 阅读次数:

js深拷贝

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
export const $ = function() {
  var copyIsArray,
    toString = Object.prototype.toString,
    hasOwn = Object.prototype.hasOwnProperty,
    class2type = {
      '[object Boolean]': 'boolean',
      '[object Number]': 'number',
      '[object String]': 'string',
      '[object Function]': 'function',
      '[object Array]': 'array',
      '[object Date]': 'date',
      '[object RegExp]': 'regExp',
      '[object Object]': 'object'
    },
    type = function(obj) {
      return obj == null ? String(obj) : class2type[toString.call(obj)] || "object";
    },
    isWindow = function(obj) {
      return obj && typeof obj === "object" && "setInterval" in obj;
    },
    isArray = Array.isArray || function(obj) {
      return type(obj) === "array";
    },
    isPlainObject = function(obj) {
      if (!obj || type(obj) !== "object" || obj.nodeType || isWindow(obj)) {
        return false;
      }
      if (obj.constructor && !hasOwn.call(obj, "constructor") &&
        !hasOwn.call(obj.constructor.prototype, "isPrototypeOf")) {
        return false;
      }
      var key;
      for (key in obj) {}
      return key === undefined || hasOwn.call(obj, key);
    },
    extend = function(deep, target, options) {
      for (var name in options) {
        var src = target[name];
        var copy = options[name];
        if (target === copy) {
          continue;
        }
        if (deep && copy &&
          (isPlainObject(copy) || (copyIsArray = isArray(copy)))) {
          if (copyIsArray) {
            copyIsArray = false;
            var clone = src && isArray(src) ? src : [];
          } else {
            var clone = src && isPlainObject(src) ? src : {};
          }
          target[name] = extend(deep, clone, copy);
        } else if (copy !== undefined) {
          target[name] = copy;
        }
      }
      return target;
    };
  return { extend: extend };
}();

发表于 | 分类于 | 阅读次数:

1、引入vue-baidu-map

npm install vue-baidu-map --save

2、项目中使用vue-baidu-map组件

我这里需求只有一个地图显示，故采用局部引用了，直接在需要使用的组件里面
import BaiduMap from 'vue-baidu-map/components/Map/Map.vue'
伪代码如下：

阅读全文 »

发表于 | 分类于 | 阅读次数:

原文摘自王帅博客

关于vue数据更新不视图更新

由于 JavaScript 的限制， Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如： vm.items.length = newLength

Vue之所以能够监听Model状态的变化，是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化。但是，对于数组元素的赋值，却没有办法直接监听，

因此，如果我们直接对数组元素赋值：

1
2
3
4
vm.todos[0] = {
    name: 'New name',
    description: 'New description'
};

会导致Vue无法更新View。正确的方法是不要对数组元素赋值，而是更新：

1
2
vm.todos[0].name = 'New name';
vm.todos[0].description = 'New description';

或者，通过splice()方法，删除某个元素后，再添加一个元素，达到“赋值”的效果：

1
2
3
var index = 0;
var newElement = {...};
vm.todos.splice(index, 1, newElement);

Vue可以监听数组的splice、push、unshift等方法调用，所以，上述代码可以正确更新View。

发表于 | 分类于 | 阅读次数:

常用正则表达式收藏

干的没有一点水分的干货，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。

阅读全文 »

发表于 | 分类于 | 阅读次数:

收藏一些css的高级用法：

1、黑白图像

这段代码会让你的彩色照片显示为黑白照片

1
2
3
4
5
6
7
img.desaturate {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

阅读全文 »

发表于 | 分类于 | 阅读次数:

1、vue打包后的文件，启动空白页

config/index.js文件路径

1
2
3
4
5
6
7
8
9
10
11
//...
	module.exports = {
		//...
		build: {
			//...
			assetsPublicPath: "./",   //改为相对路径
			//...
		}
		//...
	}
//...

2、打包过后背景图丢失

build/utils.js文件路径

1
2
3
4
5
6
7
8
9
10
11
12
13
//...
// Extract CSS when that option is specified
   // (which is the case during production build)
   if (options.extract) {
     	return ExtractTextPlugin.extract({
       	use: loaders,
       	publicPath:'../../',     //解决build后背景图无法显示问题
       	fallback: 'vue-style-loader'
     	})
   } else {
     	return ['vue-style-loader'].concat(loaders)
   }
 	//...

3、项目路由模式为history模式，build后空白页

默认路由模式为hash模式，但是会有一个问题就是页面的url会有个#，有点影响美观，去掉#最简单的方式就是使用history模式，但是build后会是空白页，解决方法就是1、使用默认的hash模式，2、需要后台配合做一些修改（nginx配置）

4、vue开发中，父组件添加scoped之后，父组件无法修改子组件的样式

父组件

1
2
3
4
5
6
7
8
9
10
11
12
<gHeader></gHeader>

<style>
两种写法
.g-header /deep/ span.name{

}

.g-header >>> span.time{

}
</style>

子组件

1
2
3
4
5
6
<template>
  <div class="g-header">
    <span class="name"></span>
    <span class="time"></span>
  </div>
</template>

5、自定义路径别名

build/webpack.base.js

1
2
3
4
5
6
7
8
9
10
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'common':resolve('src/common'),
      'components':resolve('src/components'),
      'api': resolve('src/api'),
      'base':resolve('src/base')
    }

6、获取表单控件的值

通常我们可以直接使用 v-model 将表单控件与数据进行绑定，但是有时候我们也会需要在用户输入的时候获取当前值（比如：实时验证当前输入控件内容的有效性）。

这时我们可以使用@input或 @change事件绑定我们自己的处理函数，并传入 $event象以获取当前控件的输入值：

1
2
3
4
5
6
7
8
9
10
<input type="text"/>

change (e) {
  let curVal = e.target.value
  if (/^\d+$/.test(curVal)) {
    this.num = +curVal
  } else {
    console.error('%s is not a number!', curVal)
  }
}

7、使用vue-cli开发的跨域问题

config/index.js 配置proxyTable
"box-shadow效果图"
其中，taget是要访问的api的域名，配置完proxyTable后，若要访问http://apis.haoservice.com/lifeservice/chicken/duck，ajax里的url只需设为’/lifeservice/chicken/duck’(即绝对路径)即可，webpack会帮你把’/lifeservice’下的请求转发至http://apis.haoservice.com/lifeservice/chicken/duck

8、mounted钩子函数中请求数据导致页面闪屏问题

其实就是加载时机问题，放在created里会比mounted触发早一点，如果在页面挂载完之前请求完成的话就不会看到闪屏了