vue-demo教程

vue-demo教程

创建好html后

复制以下代码到head标签中

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>

在body内写入

<div id="app">
{{ message }}
</div>

在body外面的下面写入

<script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>

使用UI组件库

在前继续追加

<!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>

在body任意处粘贴

<el-button>默认按钮</el-button>

追加代码

<el-table :data="userListDetail" style="width: 100%">
                <el-table-column prop="date" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>

            </el-table>

演示下载效果:script标签内容部分

var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                mark: 0,
                userList: [
                    "张三",
                    "李四",
                    "王五",
                    "老六"
                ],
                userListDetail: [{
                        name: "张三",
                        date: "2024",
                        address: "长沙"
                    },
                    {
                        name: "张三",
                        date: "2024",
                        address: "长沙"
                    },
                    {
                        name: "张三",
                        date: "2024",
                        address: "长沙"
                    }
                ]
            },
            methods: {
                openMessage() {
                    this.$message('开始在下啦,稍后一下哦')

                    var markV2 = setInterval(() => {
                        this.mark = this.mark + 20;

                        if (this.mark == 100) {
                            clearInterval(markV2)
                            this.$message({
                                message: '下载成功啦',
                                type: 'success'
                            })
                        }
                    }, 1000);
                }
            }
        })

body标签部分:

<div id="app">
            {{ message }}

            <p v-for="item in userList">{{item}}</p>

            <el-button @click="openMessage">下载</el-button>

            <el-table :data="userListDetail" style="width: 100%">
                <el-table-column prop="date" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="address" label="地址">
                </el-table-column>

            </el-table>

            <el-progress :percentage="mark"></el-progress>

        </div>

建立一个新的html 复制以下代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>

        <!-- 开发环境版本,包含了有帮助的命令行警告 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>

        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    </head>
    <body>

        <div id="app">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="活动名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="活动区域">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动时间">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;">
                        </el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
                <el-form-item label="即时配送">
                    <el-switch v-model="form.delivery"></el-switch>
                </el-form-item>
                <el-form-item label="活动性质">
                    <el-checkbox-group v-model="form.type">
                        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                        <el-checkbox label="地推活动" name="type"></el-checkbox>
                        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="特殊资源">
                    <el-radio-group v-model="form.resource">
                        <el-radio label="线上品牌商赞助"></el-radio>
                        <el-radio label="线下场地免费"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="活动形式">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>

    </body>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                }
            },
            methods: {
                onSubmit() {
                    this.$message('提交成功')

                    this.$notify({
                        title: '提示',
                        message: this.renderData(),
                        duration: 0
                    });
                },
                renderData() {
                    var result = "";
                    Object.keys(this.form).map(item => {
                        result = result + this.form[item] + ","
                    })
                    return result;
                }
            }
        })
    </script>
</html>