Vue3 双向绑定文本框和按钮，生成代码示例

<template>
  <div>
    <input v-model='message' />
    <button @click='generateCode'>生成代码</button>
    <pre>{{ code }}</pre>
  </div>
</template>
<script setup>
import { ref } from 'vue';

const message = ref('');
const code = ref('');

function generateCode() {
  code.value = `
  <script setup>
    const message = ref('${message.value}');
    function showMessage() {
      console.log(message.value);
    }
  </script>
<p>`;
}
</script></p>
<p>该示例展示了如何使用Vue3的双向绑定功能创建一个文本框和按钮，并通过点击按钮生成Vue3代码。</p>
<ul>
<li><code>message</code> 是一个ref，用于存储文本框中的值。</li>
<li><code>code</code> 是一个ref，用于存储生成的Vue3代码。</li>
<li><code>generateCode</code> 函数在按钮被点击时调用，生成代码并将代码存储在 <code>code</code> ref中。</li>
<li>生成的代码中，<code>message</code> 的值被嵌入到代码中，并定义了一个名为 <code>showMessage</code> 的函数，用于演示如何在Vue3中访问 <code>message</code> 的值。</li>
</ul>