vue2实现浏览器大小变动页面缩放功能

在Vue 2中，可以通过监听浏览器的resize事件来实现页面缩放的功能。以下是一个简单的示例：

<template>
  <div id="app">
    <h1>页面宽度: {{ pageWidth }}px</h1>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      pageWidth: window.innerWidth
    };
  },
  created() {
    window.addEventListener('resize', this.handleResize);
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.pageWidth = window.innerWidth;
    }
  }
};
</script>

在这个例子中，我们在组件的created生命周期钩子中添加了一个事件监听器，监听resize事件。当浏览器窗口大小变化时，handleResize方法会被调用，并更新pageWidth数据属性，从而实现响应式地显示当前页面宽度。在destroyed生命周期钩子中，我们移除了事件监听器，防止内存泄漏。