VUE3（三十一）html单页面使用VUE3

之前一直在VUE3的框架中使用VUE3。但是我们在做一个小页面的时候，没有必要独立创建一个VUE项目的时候，我们该如何使用VUE3呢？下边我这边直接放出一个示例，复制粘贴就能用这里我使用了VUE3+element-plus<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><me

camellias_

8538人浏览 · 2021-07-26 09:39:21

camellias_ · 2021-07-26 09:39:21 发布

之前一直在VUE3的框架中使用VUE3。

但是我们在做一个小页面的时候，没有必要独立创建一个VUE项目的时候，我们该如何使用VUE3呢？

下边我这边直接放出一个示例，复制粘贴就能用

这里我使用了VUE3+element-plus

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导出真实实验数据</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
    <script src="//unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
    <script src="//unpkg.com/element-plus@1.0.2-beta.46/lib/index.full.js"></script>
</head>
<style>
    div {
        height: 30px;
        line-height: 30px;
    }
</style>
 
<body>
    <br><br><br><br><br><br><br>
    <div style="width:100%;" id="app">
        <div style="width:400px;margin:0 auto;">
            <h2>导出真实实验数据</h2>
            <p>
            <div>虚拟实验id（必填）</div>
            <el-input v-model="exp_id" placeholder="请输入虚拟实验id"></el-input>
            </p>
 
            <p>
            <div>学校id（非必填）</div>
            <el-input v-model="school_id" placeholder="请输入学校id"></el-input>
            </p>
 
            <p>
            <div>60-100分人数比例（非必填） </div>
            <el-input v-model="upRatio" placeholder="0-100之间的数字"></el-input>
            </p>
 
            <p>
            <div>选择日期（非必填）</div>
            <el-date-picker v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期"></el-date-picker>
            </p>
 
            <p>
            <div>生成随机虚拟分数（非必填）</div>
            <el-radio v-model="randomScore" label="true">是</el-radio>
            <el-radio v-model="randomScore" label="false">否</el-radio>
            </p>
 
            <p>
                <el-button type="primary" @click="exportExcel">导出数据</el-button>
            </p>
        </div>
    </div>
</body>
 
</html>
<script>
    Object.assign(window, Vue);
    const vue3Composition = {
        setup() {
            const data = reactive({
                // 虚拟实验id
                exp_id: '',
                // 生成随机虚拟分数(true/false)
                randomScore: false,
                // 日期时间
                dateTime: [],
                // 60-100分人数比例
                upRatio: '',
                // 学校id
                school_id:'',
            });
            /**
             * @name: 导出excel
             * @author: camellia
             * @email: guanchao_gc@qq.com
             * @date: 2021-01-10 
             */
            const exportExcel = () => {
                var startTime = '';
                var endTime = '';
                var url = "https://dev.mools.net";
                if(!data.exp_id)
                {
                    Message.warning("请填写虚拟实验id");return;
                }
                if(data.dateTime.length > 0)
                {
                    startTime = format(data.dateTime[0], "yyyy-MM-dd") + " 00:00:00";
                    endTime = format(data.dateTime[1], "yyyy-MM-dd") + " 23:59:59";
                    // data.dateTime[0].valueOf();  => date日期变时间戳
                }
                if((data.upRatio != '' && data.upRatio > 100) || (data.upRatio != '' && data.upRatio < 0))
                {
                    Message.warning("不能大于100且不能小于0"); return;
                }
                var lastUrl = url + '?exp_id='+ data.exp_id + '&startTime='+ startTime+'&endTime='+endTime+'&upRatio='+ data.upRatio+'&randomScore='+ data.randomScore+'&school_id='+ data.school_id;
 
                window.open(lastUrl);
            }
            /**
             * @name: js日期Date格式化为字符串
             * @author: camellia
             * @email: guanchao_gc@qq.com
             * @date: 2021-07-05 
             * @param:  date    obj js日期对象
             * @param:  fmt string  日期格式（yyyy-MM-dd hh:mm:s）
             * @return: 字符串格式：2020-10-13 12:00:01
             */
            const format = (date, fmt) => {
                var o = {
                    "M+": date.getMonth() + 1, //月份
                    "d+": date.getDate(), //日
                    "h+": date.getHours(), //小时
                    "m+": date.getMinutes(), //分
                    "s+": date.getSeconds(), //秒
                    "q+": Math.floor((date.getMonth() + 3) / 3), //季度
                    "S": date.getMilliseconds() //毫秒
                };
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
                }
                for (var k in o) {
                    if (new RegExp("(" + k + ")").test(fmt)) {
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ?
                            (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                    }
                }
                return fmt;
            }
            /**
             * @name: 将data绑定值dataRef
             * @author: camellia
             * @email: guanchao_gc@qq.com
             * @date: 2021-01-10 
             */
            const dataRef = toRefs(data);
            return {
                exportExcel,
                ...dataRef
            }
        },
    }
    // ElementPlus.locale(ElementPlus.lang.zhCn);
    const app = createApp(vue3Composition).use(ElementPlus).mount("#app");
</script>

再赘述一次，上边的代码复制粘贴即可使用

有好的建议，请在下方输入你的评论。

欢迎访问个人博客
https://guanchao.site

欢迎访问小程序：

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^