Vue listening page width and height
The main technology used: watch monitoring
Without further ado, just upload the code and study it yourself
<template>
<div class="rightContainer">
<h1>Monitor page width and height</h1>
<h2>Current page width{{ windowWidth }}px</h2>
<h2>Current page height{{ windowHeight }}px</h2>
</div>
</template>
<script>
export default {
name: 'WatchsHW',
data() {
return {
windowHeight: ,
windowWidth:
}
},
watch: {
// Listen to page height windowHeight(val) {
('Real-time screen height:', val, )
},
// Listen to page width windowWidth(val) {
('Real-time screen width:', val, )
}
},
mounted() {
// <!--Hang the event on the mounted function--> = () => {
return (() => {
= // high = // Width })()
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.rightContainer{
width: 100%;
text-align: center;
overflow: hidden;
}
</style>
Knowledge Supplement
Watch
The role of watch can monitor the transformation of a value and call the method that needs to be executed due to the change. The associated state can be changed dynamically through watch.
Simply put, it is to monitor changes in a certain data in real time.
1. Ordinary monitoring
<template>
<!-- Listening properties -->
<div>
<p>{{num}}</p>
<button @click="num++">Button</button>
</div>
</template>
<script>
export default {
data () {
return {
num:30
}
},
watch:{
// Format 1: // num(newVal,oldVal){
// // When the value of num changes, execute the code here // ("num has been modified",newVal,oldVal); // },
// The second format: num:{
handler(newVal,oldVal){
// When the value of num changes, execute the code here ("num has been modified",newVal,oldVal);
}
}
}
}
</script>
<style lang = "less" scoped>
</style>2. Listen immediately
If we need to execute the function when the value is initially bound, we need to use the immediate attribute.
<template>
<!-- Listen now -->
<div>
<p>{{num}}</p>
<button @click="num++">Button</button>
</div>
</template>
<script>
export default {
data () {
return {
num:30
}
},
watch:{
num:{
handler(newVal,oldVal){
// When the value of num changes, execute the code here ("num has been modified",newVal,oldVal);
},
immediate:true // Listen immediately }
}
}
</script>
<style lang = "less" scoped>
</style>immediate needs to be used with handler. When it is initially bound, the function called is this handler function.
3. In-depth monitoring
When it is necessary to listen for changes to an object, ordinary watch methods cannot listen for changes to the internal properties of the object. Only the data in data can listen for changes. At this time, the deep attribute needs to deeply monitor the object.
<template>
<!-- In-depth monitoring -->
<div>
<p>{{}}</p>
<button @click="++">Button</button>
</div>
</template>
<script>
export default {
data () {
return {
obj:{
name:"Vue",
age:7
}
}
},
watch:{
// obj:{
// handler(newVal,oldVal){
// // When to execute, once any attributes in obj change, the code here will be executed // ("name or age has been modified", newVal, oldVal); // },
// deep:true
// }
"":{
handler(newVal,oldVal){
// When to execute, when the age is modified ("age has been modified",newVal,oldVal);
},
}
}
}
</script>
<style lang = "less" scoped>
</style>Notice:
1. If the listening data is an object, then immediate: true is invalid;
2. It is generally used for listening to reference types, deep monitoring. For example, listening to an Object, any field in the Object will be listened to as long as it changes, but it consumes performance and is used according to the needs. If you can not use it, you will not use it.
3. Because the above code obj is a reference data type, val and oldVal point to the same, the results you see are the same.
4. Deep Optimization
We can obtain the properties in the object through point syntax and convert it into a string, which is the optimization of deep listening
<template>
<div class="home">
<h3>{{}}</h3>
<button @click="btnClick">Button</button>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
obj: {
name: "Lucy",
age: 13
}
};
},
methods: {
btnClick() {
= 33;
}
},
watch: {
// Obtain the properties in the object through point syntax and convert them into strings, which is the optimization of deep listening "": {
handler(val, oldVal) {
(val, oldVal);
},
deep: true,
immediate: true, // The data being listened to at this time is not an object, you can use immediate }
}
};
</script>This is the article about Vue real-time monitoring page width and height changes. For more relevant Vue real-time monitoring page width and height content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!