Vue3.0 Elementplus - 《MySQL数据库》

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <script src="https://unpkg.com/vue@next"></script>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-plus/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    // 文本框相关逻辑
    const useInputEffect = () => {
      const { ref } = Vue;
      const inputValue = ref("");
      const handleInputChange = (newValue) => {
        inputValue.value = newValue; // newValue就是用户输入的值
      };
      return { inputValue, handleInputChange };
    };
    // 列表相关逻辑
    const useListEffect = () => {
      const { reactive } = Vue;
      // 用来存所有的待办事项
      const list = reactive([]);
      const addItemToList = (item) => {
        list.push({ content: item.value }); // 向列表中加入待办事项
        item.value = ""; // 清空文本框的值
      };
      return { list, addItemToList };
    };
    const app = Vue.createApp({
      setup() {
        // setup函数只做流程中转 引用定义的数据和函数 并导出给template模板使用
        const { inputValue, handleInputChange } = useInputEffect();
        const { list, addItemToList } = useListEffect();
        const handleSubmit = () => {
          addItemToList(inputValue);
        };
        return {
          inputValue,
          handleInputChange,
          list,
          addItemToList,
          handleSubmit,
        };
      },
      template: `
        <div>
          <div>
            <el-input style="width:300px" :modelValue="inputValue" @input="handleInputChange"></el-input>
            <el-button type="primary"  @click="handleSubmit">提交</el-button>
          </div>
          <div>
            <el-table
              border
              :data="list"
              style="width: 200px;">
              <el-table-column
                prop="content"
                label="待办事项"
                width="199">
              </el-table-column>
            </el-table>
          </div>
        </div>
      `,
    });
    app.use(ElementPlus);
    const vm = app.mount("#root");
  </script>
</html>