用VSC软件使用vue的写法完成《静夜思》是用HTML的格式

使用Visual Studio Code (VSC) 软件结合Vue.js编写现代Web应用版本的《静夜思》，可以将HTML、CSS和JavaScript有机地结合起来。首先，你可以创建一个新的Vue项目。步骤如下：

1. **安装依赖**:
- 安装`vue-cli`（如果还没有）：运行命令 `npm install -g @vue/cli`
- 创建新项目：`vue create my-quiet-night-thoughts`

2. **进入项目目录**:

   cd my-quiet-night-thoughts

3. **选择预设**:
- 如果你想使用Vue CLI默认模板，跳过这一步；如果你想定制更多，可以选择`Manually select features`并配置。

4. **启动开发服务器**:

   vue serve

5. **在`src/components`文件夹下创建新的组件**:
- 新建一个名为`QuietNightThought.vue`的文件，内容如下：

<template>
  <div class="poem-container">
    <h1>静夜思</h1>
    <p><slot></slot></p>
    <button @click="toggleThought">展开 / 收起思绪</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const poemText = `
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
`;

function toggleThought() {
  const thought = document.querySelector('.thought');
  if (thought.style.display === 'none') {
    thought.style.display = 'block';
  } else {
    thought.style.display = 'none';
  }
}

export default {
  data() {
    return {};
  },
  slots: {
    default: () => [
      `<span class="thought" v-if="!thoughtIsShown">{{ poemText }}</span>`,
    ],
  },
  computed: {
    thoughtIsShown() {
      return !document.querySelector('.thought').offsetHeight;
    },
  },
};
</script>

<style scoped>
.poem-container {
  text-align: center;
}

.thought {
  display: none;
  margin-bottom: 1rem;
}
</style>

6. **在App.vue或main.js中引入并使用这个组件**:

<!-- App.vue -->
<template>
  <div id="app">
    <QuietNightThought />
  </div>
</template>

<script>
import QuietNightThought from './components/QuietNightThought.vue';

export default {
  components: {
    QuietNightThought,
  },
};
</script>

这样你就完成了用Vue.js风格实现的《静夜思》HTML结构。用户可以点击按钮动态显示或隐藏诗句。