一、选择

        <el-select v-model="value" placeholder="请选择" @change="handleChange">

 methods: {
            handleChange(value) {
                v.$message.error(value);
            }
        }

        @change="handleChange"中@change作用相当于Vue的@click() 和 Js的 onclick()，用于绑定事件。

        v.$message.error(value);页面窗口弹出提示框。

        <el-select v-model="value" placeholder="请选择" @change="handleChange">
            <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            el-option>
        el-select>
 
         return {
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: ''
            }
        },

二、表格

        :data="tableData"需要循环的数组。

            <el-table
                :data="tableData"
                style="width: 100%">
 
            <el-table-column
            -prop数组里的值 label表头显示内容--->
                    prop="date"
                    label="日期"
                    width="180">
            el-table-column>
 
            <el-table-column
                    prop="address"
                    label="地址">
            el-table-column>
 
            el-table>
          
 
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
            }] 

        按钮删除元素，获取值与调用方法

                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    el-button>
 
                    methods: {
                    handleDelete(i,emp){
                        v.empArr.splice(i,1);
                        }
                    }

 插入值到数组     f() {
    v.arr.push({name: v.emp.name, salzry: v.emp.salary, job: v.emp.job})
},

三、导航栏

           :default-active="activeIndex2"默认选中el-menu-item index="1"。

            mode="horizontal"横向展示列表菜单。

    <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
    <el-menu-item index="1" >精彩活动el-menu-item>
    <el-menu-item >当季女装el-menu-item>
    <el-menu-item >过季男装el-menu-item>
    <el-menu-item >亚洲电影el-menu-item>
    <el-menu-item >欧美电影el-menu-item>
 
    return {
              activeIndex: '1',
              activeIndex2: '1'
            };

四、分栏

        span="12"，分为12栏。

    
    <el-row gutter="10">
        
        <el-col span="12">
            <div class="c1">div>
        el-col>
        <el-col span="12">
            <div class="c1">div>
        el-col>
    el-row>

五、页面布局

 <h1>上下h1>
    <el-container>
        
        <el-header>Headerel-header>
        <el-main>Mainel-main>
    el-container>
 
    <h1>上中下h1>
    <el-container>
        <el-header>Headerel-header>
        <el-main>Mainel-main>
        <el-footer>Footerel-footer>
    el-container>
 
    <h1>左右h1>
    <el-container>
        <el-aside width="200px">Asideel-aside>
        <el-main>Mainel-main>
    el-container>
 
    <h1>上下（左右）h1>
    <el-container>
        <el-header>Headerel-header>
        <el-container>
            <el-aside width="200px">Asideel-aside>
            <el-main>Mainel-main>
        el-container>
    el-container>
 
    <h1>上下左右上下h1>
    <el-container>
        <el-header>Headerel-header>
        <el-container>
            <el-aside width="200px">Asideel-aside>
            <el-container>
                <el-main>Mainel-main>
                <el-footer>Footerel-footer>
            el-container>
        el-container>
    el-container>

六、走马灯

        :src="i" 单向绑定元素。

    <h1>图片轮播图h1>
    <el-carousel trigger="click" height="600px">
        <el-carousel-item  v-for="i in arr">
            <img :src="i" width="100%" alt="">
        el-carousel-item>
    el-carousel>
 
 
    return {
                arr:["../a.jpg","../b.jpg","../c.gif"]
            }

        卡片化

    <h1>卡片化h1>
    <template>
        <el-carousel :interval="4000" type="card" height="300px">
            <el-carousel-item  v-for="i in arr">
                <img :src="i" width="100%" alt="">
            el-carousel-item>
        el-carousel>
    template>

        卡片化可以单独使用

        

                

h1

        

七、竖的水平分割线

     "vertical">

八、其他

        background-size: cover; /*浏览器缩放，背景不会变大变小*/ 

        hite-space: nowrap;/*让内容在一行里显示*/

        text-overflow: ellipsis;/*超出内容按省略号显示*/

        阴影效果

        .p_img:hover {

        position: relative; top: 5px;

        /*元素阴影*/

        box-shadow: 0 0 5px 5px #233;

        }