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獲取位置信息
-
clientHeight和clientWidth用于描述元素內尺寸，是指 元素內容+內邊距 大小，不包括邊框（IE下實際包括）、外邊距、滾動條部分 -
offsetHeight和offsetWidth用于描述元素外尺寸，是指 元素內容+內邊距+邊框，不包括外邊距和滾動條部分 -
clientTop和clientLeft返回內邊距的邊緣和邊框的外邊緣之間的水平和垂直距離，也就是左，上邊框寬度 -
offsetTop和offsetLeft表示該元素的左上角（邊框外邊緣）與已定位的父容器（offsetParent對象）左上角的距離 -
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<data.length;i+=n){
result.push(data.slice(i,i+n)); //每n個為一組
}
清空數組的三種方式
-
arr.splice(0,arr.length)splice方法向/從數組中添加/刪除項目，然后返回被刪除的項目；會改變原數組 arr.length=0arr = []
判斷數據類型
-
是否為數組類型
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)
返回給定對象的所有可枚舉屬性的字符串數組, 順序與手動遍歷該對象屬性一致。、
跳轉外鏈及<nuxt-link>
-
<nuxt-link>可以根據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;
};
