marketing项目总结

1, vuex中的state不能v-model直接绑定到组件中。
解决方法：放在computed中，get/set方法改变vuex中的值。或者用value表示，input事件更新vuex中的值。

get/set.png
watch检测.png
2，isNaN === 'is not a number' 是否不是数字 true: 不是数字, false: 是数字。
但是：空格/空字符 默认0处理，所以返回false（不严谨之处）
3, mac本访问不了github网页
在电脑hosts文件中加入以下内容保存即可：
http://github.com 204.232.175.94 http://gist.github.com 107.21.116.220 http://help.github.com 207.97.227.252 http://nodeload.github.com 199.27.76.130 http://raw.github.com 107.22.3.110 http://status.github.com 204.232.175.78 http://training.github.com 207.97.227.243 http://www.github.com
如何找到hosts文件：首先在桌面打开任意一个文件，然后点击左上角前往--->前往文件夹--->输入‘/private/etc/hosts’，找到hosts文件，拖到桌面上，打开进行编辑后保存，替换掉原来文件。
4，icon和span垂直居中
icon设置vertical-align: middle
5, javascript检测对象中是否存在某个属性
1)in: 可以判断自有属性和继承属性
image.png
2)hasOwnProperty: 只能判断自有属性
image.png
3)undefined:自有属性和继承属性都可以判断，但是如果值为undefined，就不可以了
image.png
6，watch 监听时机
watch这个特性，是针对当前组件中的初始值来进行判断的，我们在初始化的时候，这个data_list已经被修改了，此时watch已经被触发。
如果想初始化后监听，则把$watch放在初始化后。

created: function() {
    axios.get(url).then(function(response){
        vm.data_list = response.data
    }
    this.$watch('data_list', function(){this.do_not_save = true}, {deep: true})
}

7,css画一条短横线（减号兼容性不好，在火狐上很短，几乎是短横线段一半，所以手动画一个）

<div style="border: 0.5px solid gray;width:20px;height:0"></div>

8,vue判断input输入全部是空格

msg.split(' ').join('').length === 0

判断先把msg以空格拆分成数组，然后拼接起来，判断字符串的长度，如果长度为0，证明输入的就全是空格了
9,js取整/取余
1）丢弃小数部分

str.parseInt(5/2) //2

2. 向上取整，整数部分+1

Math.ceil(5/2) //3

3)向下取整，丢弃小数部分

Math.floor(5/2) //2

4)四舍五入

Math.round(5/2) //3

5)取余

5%2 //1

10,文本不换行，显示省略号

overflow: hidden;
text-overflow: elipsis; //text-overflow 属性规定当文本溢出包含元素时发生的事情,clip剪切掉
white-space:nowrap; //规定段落中的文本不进行换行

11，es6遍历对象所有属性

Object.keys(obj); // 遍历可枚举属性
Object.getOwnPropertyNames(obj); //遍历可枚举/不可枚举属性
for ... in //自身的/继承的可枚举属性

12，判断字符串中是否出现某个字串

str.indexOf('sbustr'); //若不存在返回-1，若存在返回所在位置
str.search('substr')；//若不存在返回-1

13,判断对象是否拥有某个属性
14,
vscode自动保存格式化
1）下载eslint插件（下载完成之后点击重新加载才会生效）
2）打开设置-->用户设置
3）在user settings--->settings.json中加入如下代码

  // 保存时自动格式化
  "eslint.autoFixOnSave": true,
  // 用来配置作用的文件类型
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ]

15,判断对象是否为空对象
1）转换成字符串对象，和{}对比
console.log(JSON.stringify(obj) === '{}');//true

2. for ...in ...遍历

var obj = {};
            let funcB = function() {
                for(var key in obj) {
                    return false;
                }
                return true;
            };
            console.log(funcB());//true

3）es6的新语法Object.keys
console.log(Object.keys(obj));//[]
16,数组合并

1. concat 无去重,未改变数组本身，返回一个新数组

let a = [1, 2, 3];
let b = [2, 3, 4, 5];
let c = a.concat(b);
console.log(a, b, c);//a = [1, 2, 3]; c = [1, 2, 3, 2, 3, 4, 5]

2）Array.prototype.push.apply(a, b)

Array.prototype.push.apply(a, b);
console.log(a); //[1, 2, 3, 2, 3, 4, 5]
a.push.apply(a, b);
console.log(a); //[1, 2, 3, 2, 3, 4, 5]

17, 对象合并
Object.assign(target, ...source);深拷贝还是浅拷贝？

 let a = {name: 's'};
 let b = {b: 'b'};
 let c = {c: 'c'};
 let d = Object.assign({}, a, b, c); 
console.log(a, d); //a={name: 's'}; d={name: "s", b: "b", c: "c"}

深拷贝：第一层属性

let s = {name: {subname: 'sss'}};
let m = Object.assign({}, s);
m.name = 'sm';
console.log(s, m);//s={name: {subname: 'sss'}};m={name:'sm'}

浅拷贝：第二层或者深层属性浅拷贝

m.name.subname = 'oo';
console.log(s, m);//s={name: {subname: 'oo'}};m={name: {subname: 'oo'}}

18，
去掉字符串前后空格

str.replace(/ (^\s*) | (\s*$) /g, ' ');

$.trim(str);
19,
因为浏览器有默认行高，行高是根据字体大小来变化的，如果字体大小是12px,则默认行高为18px,所以你才会看到实际高度是16px。
解决办法：
line-height: 12px;
20,