Vue爬坑之旅

1.axios赋值的问题

axios的赋值问题

描述：前后数据对接，使用nuxt整合的axios，使用vue中的钩子函数在页面组件挂载完之后，向后台发送一个get，并将返回的数据赋值给data中定义的属性this.chart
后端报错：this.chart这一步赋值失败

原因：在请求执行成功后执行回调函数中的内容，回调函数处于其它函数的内部this不会与任何对象绑定，为undefined

解决方案：

• 将指向vue对象的this赋值给外部方法定义的属性，然后再内部方法中使用该属性

外部赋值

• 使用箭头函数

箭头函数

2. arr.unshift(ele1,ele2)在数组的开头添加一个或者多个元素

• 返回值是 长度
• 在原来的数组中进行修改
• unshiift()无法在Internet Explore中正确的工作

z-index不起作用

z-index无效的情况：

• 父标签position 属性为relative ：解决方法：改为absolute
• 问题标签position属性为static : 解决方法：浮动元素添加position:absolute 或position:relative
• 问题标签含有float属性 :解决方法：去掉浮动

DOM获取位置信息

1. clientHeight和clientWidth用于描述元素内尺寸，是指 元素内容+内边距 大小，不包括边框（IE下实际包括）、外边距、滚动条部分
2. offsetHeight和offsetWidth用于描述元素外尺寸，是指 元素内容+内边距+边框，不包括外边距和滚动条部分
3. clientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离，也就是左，上边框宽度
4. offsetTop和offsetLeft表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离
5. offsetParent对象是指元素最近的定位（relative,absolute）祖先元素，递归上溯，如果没有祖先元素是定位的话，会返回null

vue获取事件对象

methods:{
  say:function(msg,event){
     var el = event.currentTarget; 
  }
}

将一个数组分隔成每n个一组

//slice: 返回一个新数组，包含选定的元素
var data = [
  {name:'Liming',age:'25'},
  {name:'Liming',age:'25'},
  {name:'Liming',age:'25'},
]
var result = [];
for(var i=0;i

清空数组的三种方式

• arr.splice(0,arr.length) splice方法向/从数组中添加/删除项目，然后返回被删除的项目；会改变原数组
• arr.length=0
• arr = []

判断数据类型

• 是否为数组类型 typeof obj === 'object' && obj.constructor ===Array
• 是否为字符串 typeof str === 'string' && str.constructor === String
• 是否为数值类型 typeof obj === 'number' && obj.constructor === Number
• 是否为日期类型 typeof obj ==='object' && obj.constructor === Date
• 是否为函数 typeof obj ==='function' && obj.constructor === Function
• 是否为对象 typeof obj === 'object' && obj.constructor === Object

子组件监听父组件传入的值的变化

watch:{} 或者 vm.$watch()

watch:{
a:function(){},
b:'someMethodName',
c:{ 
    handler:function(){},
    deep:true
  }
}

vm.$watch('a,b,c' ,function(){})

Axios不能向后台请求xml的问题

解决方法：使用原生ajax

原生ajax获取

Object.key(obj)

返回给定对象的所有可枚举属性的字符串数组, 顺序与手动遍历该对象属性一致。、

跳转外链及

• 可以根据vue路由跳转到本项目内部的组件地址；
• 跳转外链，采用

//html中：
@click="See(url)"
//vue实例中
methods:{
    See : function(url){
          window.location.href= url;         // 跳转外链
    }
}

this.searchBox.key

获取input的值

Vuex使用场景

只有在组件中需要共享的数据才使用vuex，不要什么场合都用

iframe监听鼠标点击事件

• 获取iframe所属的document对象 docuement.getElementById('iframe-id').contentDocument
• iframe中内容单独加载，而加载未完成是无法获取iframe元素的document对象

var iframe = document.getElementById('my-iframe');
iframe.onload = function() {
    iframe.contentDocument.onclick = function () {
        var sidebar = document.getElementById('sidebar');
        if (sidebar.style.display == 'block')  sidebar.style.display = 'none';
    };
}

原生js事件绑定和事件移除

/**
 * @description 事件绑定，兼容各浏览器
 * @param target 事件触发对象 
 * @param type   事件
 * @param func   事件处理函数
 */
function addEvents(target, type, func) {
    if (target.addEventListener)    //非ie 和ie9
        target.addEventListener(type, func, false);
    else if (target.attachEvent)   //ie6到ie8
        target.attachEvent("on" + type, func);
    else target["on" + type] = func;   //ie5
};
/**
 * @description 事件移除，兼容各浏览器
 * @param target 事件触发对象
 * @param type   事件
 * @param func   事件处理函数
 */
function removeEvents(target, type, func){
    if (target.removeEventListener)
        target.removeEventListener(type, func, false);
    else if (target.detachEvent)
        target.detachEvent("on" + type, func);
    else target["on" + type] = null;
};