1.axios賦值的問題

axios的賦值問題

描述：前后數(shù)據(jù)對接，使用nuxt整合的axios，使用vue中的鉤子函數(shù)在頁面組件掛載完之后，向后臺發(fā)送一個(gè)get，并將返回的數(shù)據(jù)賦值給data中定義的屬性this.chart
后端報(bào)錯：this.chart這一步賦值失敗

原因：在請求執(zhí)行成功后執(zhí)行回調(diào)函數(shù)中的內(nèi)容，回調(diào)函數(shù)處于其它函數(shù)的內(nèi)部this不會與任何對象綁定，為undefined

解決方案：

• 將指向vue對象的this賦值給外部方法定義的屬性，然后再內(nèi)部方法中使用該屬性

外部賦值

• 使用箭頭函數(shù)

箭頭函數(shù)

2. arr.unshift(ele1,ele2)在數(shù)組的開頭添加一個(gè)或者多個(gè)元素

• 返回值是 長度
• 在原來的數(shù)組中進(jìn)行修改
• unshiift()無法在Internet Explore中正確的工作

z-index不起作用

z-index無效的情況：

• 父標(biāo)簽position 屬性為relative ：解決方法：改為absolute
• 問題標(biāo)簽position屬性為static : 解決方法：浮動元素添加position:absolute 或position:relative
• 問題標(biāo)簽含有float屬性 :解決方法：去掉浮動

DOM獲取位置信息

1. clientHeight和clientWidth用于描述元素內(nèi)尺寸，是指 元素內(nèi)容+內(nèi)邊距 大小，不包括邊框（IE下實(shí)際包括）、外邊距、滾動條部分
2. offsetHeight和offsetWidth用于描述元素外尺寸，是指 元素內(nèi)容+內(nèi)邊距+邊框，不包括外邊距和滾動條部分
3. clientTop和clientLeft返回內(nèi)邊距的邊緣和邊框的外邊緣之間的水平和垂直距離，也就是左，上邊框?qū)挾?/li>
4. offsetTop和offsetLeft表示該元素的左上角（邊框外邊緣）與已定位的父容器（offsetParent對象）左上角的距離
5. offsetParent對象是指元素最近的定位（relative,absolute）祖先元素，遞歸上溯，如果沒有祖先元素是定位的話，會返回null

vue獲取事件對象

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

將一個(gè)數(shù)組分隔成每n個(gè)一組

//slice: 返回一個(gè)新數(shù)組，包含選定的元素
var data = [
  {name:'Liming',age:'25'},
  {name:'Liming',age:'25'},
  {name:'Liming',age:'25'},
]
var result = [];
for(var i=0;i<data.length;i+=n){
    result.push(data.slice(i,i+n));  //每n個(gè)為一組
}

清空數(shù)組的三種方式

• arr.splice(0,arr.length) splice方法向/從數(shù)組中添加/刪除項(xiàng)目，然后返回被刪除的項(xiàng)目；會改變原數(shù)組
• arr.length=0
• arr = []

判斷數(shù)據(jù)類型

• 是否為數(shù)組類型 typeof obj === 'object' && obj.constructor ===Array
• 是否為字符串 typeof str === 'string' && str.constructor === String
• 是否為數(shù)值類型 typeof obj === 'number' && obj.constructor === Number
• 是否為日期類型 typeof obj ==='object' && obj.constructor === Date
• 是否為函數(shù) typeof obj ==='function' && obj.constructor === Function
• 是否為對象 typeof obj === 'object' && obj.constructor === Object

子組件監(jiān)聽父組件傳入的值的變化

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)

返回給定對象的所有可枚舉屬性的字符串?dāng)?shù)組, 順序與手動遍歷該對象屬性一致。、

跳轉(zhuǎn)外鏈及<nuxt-link>

• <nuxt-link> 可以根據(jù)vue路由跳轉(zhuǎn)到本項(xiàng)目內(nèi)部的組件地址；
• 跳轉(zhuǎn)外鏈，采用

//html中：
@click="See(url)"
//vue實(shí)例中
methods:{
    See : function(url){
          window.location.href= url;         // 跳轉(zhuǎn)外鏈
    }
}

this.searchBox.key

獲取input的值

Vuex使用場景

只有在組件中需要共享的數(shù)據(jù)才使用vuex，不要什么場合都用

iframe監(jiān)聽鼠標(biāo)點(diǎn)擊事件

• 獲取iframe所屬的document對象 docuement.getElementById('iframe-id').contentDocument
• iframe中內(nèi)容單獨(dú)加載，而加載未完成是無法獲取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 事件觸發(fā)對象 
 * @param type   事件
 * @param func   事件處理函數(shù)
 */
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 事件觸發(fā)對象
 * @param type   事件
 * @param func   事件處理函數(shù)
 */
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;
};