学习VUE&ElementUI

目录

1.Vue 的介绍

2.Vue 的简单使用

3.Vue 的常用指令

4.Element 的基本使用

5.Element 基础布局

6.Element 容器布局

7.Element 表单组件

8.Element 表格组件

9.Element 顶部导航栏

10.Element 侧边导航栏

11.Vue 自定义组件

12.Vue 的生命周期

13.Vue 异步操作


1.Vue 的介绍

Vue是一套构建用户界面的渐进式前端框架。

只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合。

通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。

特点 易用:在有HTMLCSSJavaScript的基础上,快速上手。 灵活:简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。 性能:20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。

2.Vue 的简单使用

Vue 核心对象:每一个 Vue 程序都是从一个 Vue 核心对象开始的。

选项列表
        el选项:用于接收获取到页面中的元素。(根据常用选择器获取)。
        data选项:用于保存当前Vue对象中的数据。在视图中声明的变量需要在此处赋值。         methods选项:用于定义方法。方法可以直接通过对象名调用,this代表当前Vue对象。

数据绑定
        在视图部分获取脚本部分的数据。
         {{变量名}}

<body>
<!--视图-->
<div id="div">
    <div>姓名:{{name}}</div>
    <div>班级:{{classRoom}}</div>
    <button onclick="hi()">打招呼</button>
    <button onclick="updata()">修改班级</button>
</div>
</body>
<script>
    //脚本
    vm = new Vue({
        el: "#div",
        data: {
            name: "张三",
            classRoom: "一班"
        },
        methods: {
            study() {
                alert(this.name + "正在" + this.classRoom + "好好学习!");
            },
        }
    })

    //定义方法
    function hi() {
        vm.study();
    }

    //定义方法
    function updata() {
        vm.classRoom = "二班";
    }
</script>

3.Vue 的常用指令

指令:是带有 v- 前缀的特殊属性,不同指令具有不同含义。例如 v-html,v-if,v-for。

使用指令时,通常编写在标签的属性上,值可以使用 JS 的表达式。

表单绑定:
        v-model:在表单元素上创建双向数据绑定。

双向数据绑定:
        更新data数据,页面中的数据也会更新。
        更新页面数据,data数据也会更新。

MVVM模型(ModelViewViewModel):
        是MVC模式的改进版在前端页面中,JS对象表示Model,页面表示View,两者做到了最大限度的分离。 将Model和View关联起来的就是ViewModel,它是桥梁。 ViewModel负责把Model的数据同步到View显示出来,还负责把View修改的数据同步回Model。

常用指令

学习VUE&ElementUI

<body>
<!--视图-->
<div id="div">
    <!--文本插值-->
    <div v-html="msg"> 1111</div>

    <!--绑定属性-->
    <img v-bind:src="imgSrc">
    <img :src="imgSrc">

    <!--条件渲染-->
    <div v-if="num %2 == 0">我是div1</div>
    <div v-if="num %2 == 1">我是div2</div>
    <div v-show="flag">我是div3</div>

    <!--列表渲染-->
    <ul>
        <li v-for="name in names">
            {{name}}
        </li><br>
        <li v-for="value in student">
            {{value}}
        </li>
    </ul>
    <table>
        <tr>
            <td>name</td>
            <td>age</td>
        </tr>
        <tr v-for="s in studentList">
            <td>{{s.name}}</td>
            <td>{{s.age}}</td>
        </tr>
    </table><br>

    <!--事件绑定-->
    <button v-on:click="next()">下一张图片</button>
    <button @click="getInfo()">下一张图片</button>
    <button onclick="getInfo()">改变table的内容</button><br><br>

    <!--表单绑定-->
    <form autocomplete="off">
        姓名:<input type="text" name="username" v-model="username">
        <br>
        年龄:<input type="number" name="age" v-model="age">
    </form>

</div>
</body>
<script>
    //脚本
    let vm = new Vue({
        el: "#div",
        data: {
            msg: "<h3>哈哈哈</h3>",
            imgSrc: "img/01.jpg",
            num: 1,
            flag: true,
            names: ["张三", "李四", "王五"],
            student:{
                name:"张三",
                age:18
            },
            studentList:[
                {name:"张三",age:18},
                {name:"张三",age:18},
                {name:"张三",age:18}
            ],
            username:"张三",
            age:23
        },
        methods: {
            next(){
                this.imgSrc = "img/04.jpg"
            }
        }
    })

    function getInfo() {
        //模拟从后台获取数据
        vm.studentList = [
            {name:"张三",age:18},
            {name:"张三",age:18},
            {name:"张三",age:18},
            {name:"张三",age:18},
            {name:"张三",age:18},
            {name:"张三",age:18},
            {name:"张三",age:18},
            {name:"张三",age:18},
            {name:"张三",age:18}
        ]
    }
</script>

4.Element 的基本使用

Element:网站快速成型工具。是饿了么公司前端开发团队提供的一套基于Vue的网站组件库。

使用Element前提必须要有Vue。

组件:组成网页的部件,例如超链接、按钮、图片、表格等等~

<body>
    <div id="div01">

        <template>
            <el-table
                    :data="tableData"
                    height="800"
                    border
                    style="width: 70%">
                <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-column
                        prop="cao"
                        label="操作">
                    <el-button type="primary" icon="el-icon-edit" circle></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle></el-button>
                </el-table-column>
            </el-table>
        </template>

    </div>
</body>
<script>
    new Vue({
        el:"#div01",
        data() {
            return {
                tableData: [{
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }]
            }
        }
    })
</script>

5.Element 基础布局

将页面分成最多 24 个部分,通过 span 属性*切分。

学习VUE&ElementUI

<body>
<div id="div01">

    <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>

</div>
</body>
<script>
    new Vue({
        el: "#div01",
        data: {
        }
    })
</script>

6.Element 容器布局

将页面分成头部区域、侧边栏区域、主区域、底部区域。

学习VUE&ElementUI

学习VUE&ElementUI

<body>
<div id="div01">

    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-container>
                <el-main>Main</el-main>
                <el-footer>Footer</el-footer>
            </el-container>
        </el-container>
    </el-container>

</div>
</body>
<script>
    new Vue({
        el: "#div01",
        data: {
        }
    })
</script>

7.Element 表单组件

由输入框、下拉列表、单选框、多选框等控件组成,用以收集、校验、提交数据。

model:表单数据对象
rules :表单验证规则 验证 model
ref:指定验证规则 指向根据 rules 验证

<body>
<div id="div01">

    <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>
    new Vue({
        el: "#div01",
        data: {
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            }
        }
    })
</script>

8.Element 表格组件

用于展示多条结构类似的数据,可对数据进行编辑、删除或其他自定义操作。

<body>
<div id="div01">

    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <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>
    </template>

</div>
</body>
<script>
    new Vue({
        el: "#div01",
        data: {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }]
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            }
        }
    })
</script>

9.Element 顶部导航栏

<body>
<div id="div01">

    <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="1">处理中心</el-menu-item>
        <el-submenu index="2">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
            <el-submenu index="2-4">
                <template slot="title">选项4</template>
                <el-menu-item index="2-4-1">选项1</el-menu-item>
                <el-menu-item index="2-4-2">选项2</el-menu-item>
                <el-menu-item index="2-4-3">选项3</el-menu-item>
            </el-submenu>
        </el-submenu>
        <el-menu-item index="3" disabled>消息中心</el-menu-item>
        <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu>

</div>
</body>
<script>
    new Vue({
        el: "#div01",
        data: {
            activeIndex: '1',
            activeIndex2: '1',
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    })
</script>

10.Element 侧边导航栏

<body>
<div id="div01">

    <el-col :span="3">
        <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>导航一</span>
                </template>
                <el-menu-item-group>
                    <template slot="title">分组一</template>
                    <el-menu-item index="1-1">选项1</el-menu-item>
                    <el-menu-item index="1-2">选项2</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="分组2">
                    <el-menu-item index="1-3">选项3</el-menu-item>
                </el-menu-item-group>
                <el-submenu index="1-4">
                    <template slot="title">选项4</template>
                    <el-menu-item index="1-4-1">选项1</el-menu-item>
                </el-submenu>
            </el-submenu>
            <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <span slot="title">导航二</span>
            </el-menu-item>
            <el-menu-item index="3" disabled>
                <i class="el-icon-document"></i>
                <span slot="title">导航三</span>
            </el-menu-item>
            <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">导航四</span>
            </el-menu-item>
        </el-menu>
    </el-col>
    </el-row>

</div>
</body>
<script>
    new Vue({
        el: "#div01",
        data: {
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    })
</script>

11.Vue 自定义组件

了解 Element 组件后,发现组件其实就是自定义的标签。例如<el-button>就是对<button>的封装。

本质上,组件是带有一个名字且可复用的 Vue 实例,我们完全可以自己定义。

定义格式
        Vue.component(组件名称, {
                props:组件的属性,
                data: 组件的数据函数,
                template: 组件解析的标签模板
        })

<body>
<div id="div01">

    <my-button>我的按钮</my-button>


</div>
</body>
<script>

    Vue.component("my-button",{
        //属性
        props:["style"],
        //数据函数
        data:function () {
            return{
                msg:"我的按钮"
            }
        },
        //定义解析标签模板
        template:"<button style='color:red'>{{msg}}</button>"
    })

    new Vue({
        el:"#div01"
    })

</script>

12.Vue 的生命周期

生命周期的八个阶段:

学习VUE&ElementUI

生命周期,真正面向数据加载的两个环节:

学习VUE&ElementUI

学习VUE&ElementUI

13.Vue 异步操作

在Vue中发送异步请求,本质上还是AJAX。我们可以使用axios这个插件来简化操作

常用方法:

学习VUE&ElementUI

<body>
<div id="div01">

    <template>
        <el-table
                :data="tableData"
                height="800"
                border
                style="width: 70%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    prop="id"
                    label="ID"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄">
            </el-table-column>
            <el-table-column
                    prop="operation"
                    label="操作">
                <el-button type="primary" icon="el-icon-edit" circle></el-button>
                <el-button type="danger" icon="el-icon-delete" circle></el-button>
            </el-table-column>
        </el-table>
    </template>

    <br>
    <el-button type="primary" icon="el-icon-search" @click="getAll()">ajax 异步请求</el-button>
    <el-button type="primary" icon="el-icon-search" @click="send()">vue 异步请求</el-button>

</div>
</body>
<script>
    vm = new Vue({
        el: "#div01",
        data: {
            tableData: []
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 4 == 1) {
                    return 'warning-row';
                } else if (rowIndex % 4 == 3) {
                    return 'success-row';
                }
                return '';
            },
            // ajax异步请求
            getAll() {
                $.ajax({
                    //请求的方式
                    type: "post",
                    //请求的资源路径
                    url: "UserServlet",
                    //响应的数据类型
                    dataType: "json",
                    //回调函数
                    success: function (data) {
                        //展示返回的数据
                        // console.log(data);
                        vm.tableData = data;
                    }
                })
            },
            // vue异步请求
            send() {
                //get方式请求
                // axios.get("UserServlet?username" + this.username);
                //post方式
                // axios.post("UserServlet","username="+this.username);
                axios.post("UserServlet")
                    .then(resp => {
                        vm.tableData = resp.data;
                    })
                    .catch(error => {
                        alert(error)
                    })
            }
        }
    });
</script>
上一篇:elementUI table排序 sortable


下一篇:elementUI + springboot 实现excel导入