VUE2框架 <div><div id="1"></div> <div id="2"> </div></div>初始显示DIV1,不显示DIV2.当点击DIV1内的一个按钮时销毁DIV1显示DIV2。DIV2有很多东西需要加载，显示DIV2的时候开始加载

在Vue.js 2框架中，你可以通过指令和事件驱动的方式来实现这样的功能。首先，你需要设置默认的视图状态，即只显示`<div id="1"></div>`。然后，你可以创建一个组件，比如`ButtonComponent`，包含一个点击事件，当这个按钮被点击时，会触发一个方法去更新数据状态。

<!-- main template -->
<div>
  <button @click="toggleDivs">切换</button>
  <template v-if="showDiv2">
    <div id="2" ref="divTwo">
      <!-- 这里可以添加你的动态内容，例如异步请求数据 -->
      <div v-for="item in loadingItems" :key="item.id">{{ item.name }}</div>
    </div>
  </template>
  <div id="1" v-show="!showDiv2">
    <button内部的按钮部分... (绑定到 this.toggleDivs)</button>
  </div>
</div>

<script>
export default {
  data() {
    return {
      showDiv2: false,
      loadingItems: [], // 初始化空数组，用于存放异步加载的数据
    };
  },
  methods: {
    toggleDivs() {
      this.showDiv2 = !this.showDiv2;
      if (this.showDiv2) {
        // 当显示#2时，开始异步加载数据
        this.$refs.divTwo.loaded = false; // 假设 divTwo 元素有一个 loaded 属性标记是否正在加载
        // 异步请求...
        // ...成功后更新 loadingItems 和 set loaded to true
        // 比如 axios.get('your-api-url').then(response => {
        //   this.loadingItems = response.data;
        //   this.$refs.divTwo.loaded = true;
        // });
      }
    },
  },
};
</script>

在这个例子中，点击按钮时，`toggleDivs`方法会被调用，改变`showDiv2`的状态。如果`showDiv2`为`true`，则显示`<div id="2"></div>`并开始异步加载数据。注意这里假设了`divTwo`有一个`loaded`属性来跟踪加载过程。