<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Vue中綁定全局事件onresize</title>
<meta name="viewport" content="width=device-width"/>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<table id="app">
<tr><td>document.body.clientXXX</td> <td>螢幕可見區域</td> <td>{{ clientSize }}</td></tr>
<tr><td>document.body.offsetXXX</td> <td>螢幕可見區域</td> <td>{{ offsetSize }}</td></tr>
<tr><td>document.body.scrollXXX</td> <td>網頁正文全文</td> <td>{{ scrollSize }}</td></tr>
<tr><td>window.innerXXX</td> <td>内邊界(視口)</td> <td>{{ innerSize }}</td></tr>
<tr><td>window.outerXXX</td> <td>外邊框</td> <td>{{ outerSize }}</td></tr>
<tr><td>window.screen.availXXX</td> <td>螢幕可用工作區</td> <td>{{ availSize }}</td></tr>
<tr><td>window.screen.clientXXX</td> <td>螢幕實體分辨率</td> <td>{{ screenSize }}</td></td></tr>
<tr><td>window.screen.devicePixelRatio</td> <td>螢幕縮放因子</td> <td>{{ devicePixelRatio }}</td></tr>
<tr><td>window.screen.deviceXDPI</td> <td>DPI</td> <td>{{ deviceXDPI }}</td></tr>
</table>
<script>
function getDPI() {
var arrDPI = new Array;
var tip;
if (window.screen.deviceXDPI) {
tip = "support window.screen.deviceXDPI";
arrDPI[] = window.screen.deviceXDPI;
arrDPI[] = window.screen.deviceYDPI;
}
else {
tip = "not support window.screen.deviceXDPI";
var tmpNode = document.createElement("DIV");
tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
document.body.appendChild(tmpNode);
arrDPI[] = parseInt(tmpNode.offsetWidth);
arrDPI[] = parseInt(tmpNode.offsetHeight);
tmpNode.parentNode.removeChild(tmpNode);
}
return arrDPI + ' (' + tip + ')';
}
new Vue({
el: '#app',
data: {
clientSize: document.body.clientWidth + ' * ' + document.body.clientHeight,
offsetSize: document.body.offsetWidth + ' * ' + document.body.offsetWidth,
scrollSize: document.body.scrollWidth + ' * ' + document.body.scrollHeight,
that.innerSize = window.innerWidth + ' * ' + window.innerHeight;
that.outerSize = window.outerWidth + ' * ' + window.outerHeight;
availSize: window.screen.availWidth + ' * ' + window.screen.availHeight,
screenSize: window.screen.width + ' * ' + window.screen.height,
devicePixelRatio: window.devicePixelRatio + 'X',
deviceXDPI: getDPI(),
},
created() {
const that = this;
window.onresize = ()=> {
that.clientSize = document.body.clientWidth + ' * ' + document.body.clientHeight;
offsetSize = document.body.offsetWidth + ' * ' + document.body.offsetWidth;
scrollSize = document.body.scrollWidth + ' * ' + document.body.scrollHeight;
that.innerSize = window.innerWidth + ' * ' + window.innerHeight;
that.outerSize = window.outerWidth + ' * ' + window.outerHeight;
that.availSize = window.screen.availWidth + ' * ' + window.screen.availHeight;
that.screenSize = window.screen.width + ' * ' + window.screen.height;
that.devicePixelRatio = window.devicePixelRatio + 'X';
that.deviceXDPI = getDPI();
}
}
})
</script>
</body>
</html>
Vue 中的 created,也可以用 mounted 來代替。
它們的共同點是僅在Vue初始化時執行一次。
created:在執行個體建立完成後執行的鈎子
mounted:編譯好的HTML挂載到頁面完成後執行的事件鈎子
另外,Vue中可以直接調用JS的方法。但如果要調用 Vue中的 methods 中定義的方法就會繞一點,需要使用
this.$options.methods.MethodName();