vue3学习-持续更新

生命周期

<script setup>
// 挂载前
onBeforeMount(() => {
    tableDataRef.value = tableData;
});
</script>

ref and reactive

<template>
    <input type="text" v-model="form.name"/>
    <input type="text" v-model="value"/>
</template>

<script setup>
import {reactive, ref} from "vue";

const form = reactive({
    name: "Hello",
    data: []
});

const value = ref("");
</script>

element-plus 本地文档

1、下载项目
https://github.com/element-plus/element-plus/tree/gh-pages

2、启动项目
npm install http-server -g
http-server --port 5000 // 指定5000端口

3、访问
http://127.0.0.1:5000

类似于 el-form 的校验提示样式

<style scoped>
/* 类选择器 */
.div-tip {
    color: #F56C6C;
    font: 12px "Microsoft YaHei";
}
</style>

vite.config.js

import {defineConfig} from "vite";
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        vue()
    ],
    // 服务器配置
    server: {
        host: '127.0.0.1',
        port: 5000,
        open: true
    }
})

上移

 <div style="display: flex;margin-bottom: 12px">
     <el-button
         type="primary"
         plain
         @click="upMove"
     >
         上移
     </el-button>
 </div>

 <el-table :data="tableDataRef"
           @current-change="handleCurrentChange"
           highlight-current-row
 />


<script setup>

// tableDataRef
const tableDataRef = ref([]);

const currentRow = ref();

const handleCurrentChange = (row) => {
    currentRow.value = row;
};

const upMove = () => {
    const index = tableDataRef.value.indexOf(currentRow.value);
    if (index <= 0) {
        return;
    }

    // 交换，解构赋值
    const temp = tableDataRef.value[index];
    [tableDataRef.value[index], tableDataRef.value[index - 1]] = [tableDataRef.value[index - 1], temp];
};
</script>

下拉框，耦合 el-load

<template>
   <el-select
       v-model="value"
       clearable
       placeholder="请选择配置"
       style="width: 180px"
       @change="handleSelectChange"
       @clear="handleClear"
   >
       <el-upload
       >
           <template #trigger>
               <el-button type="primary" style="width: 180px">导入自定义配置</el-button>
           </template>
       </el-upload>

       <el-option
           v-for="item in options"
           :key="item.value"
           :label="item.label"
           :value="item.value"
           style="text-align: center"
       />
   </el-select>
</template>

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

const value = ref('')
const options = [
   {
       value: 'Option1',
       label: 'Option1',
   },
   {
       value: 'Option2',
       label: 'Option2',
   }
]

const handleSelectChange = (value) => {
   console.log(value)
}

const handleClear = () => {

}
</script>

end