JavaWeb-3

vue框架

1.概述

2.使用过程

3.指令

简写：

4.生命周期：只掌握mounted

Ajax

1.Ajoxs简写才是我们要记住的，原理以后慢慢补

2.知识点

3.作业，但是拿不到数据，也就没写

4.YAPI

5. 前端工程化------环境搭建:建议还是对着视频操作

6.vue项目创建

结构

默认8080，配置端口

数据：

7.element简单实用

1.导包

2.修改配置文件，

3.书写数据

4..修改程序入口

8.好用的小案例:最终样式

代码：cv高级工程师

<template>

    <div>

        <el-row>

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

            <el-button type="primary">主要按钮</el-button>

            <el-button type="success">成功按钮</el-button>

            <el-button type="info">信息按钮</el-button>

            <el-button type="warning">警告按钮</el-button>

            <el-button type="danger">危险按钮</el-button>

        </el-row>

     <el-table

          :data="tableData"

          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-pagination

         @size-change="handleSizeChange"

          @current-change="handleCurrentChange"

          :current-page="1"

          :page-sizes="[5, 10, 20, 50]"

          :page-size="100"

          :total="400"

          layout="total, sizes, prev, pager, next, jumper"

         >

        </el-pagination>

    <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">

      <el-table :data="gridData">

        <el-table-column property="date" label="日期" width="150"></el-table-column>

        <el-table-column property="name" label="姓名" width="200"></el-table-column>

        <el-table-column property="address" label="地址"></el-table-column>

      </el-table>

    </el-dialog>

    <br><br>

 

    <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">

     <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>

        <el-button type="primary" @click="onSubmit">立即创建</el-button>

        <el-button>取消</el-button>

      </el-form-item>

     

    </el-form>

    </el-dialog>

 

    </div>

</template>

<script >

export default {

    data() {

        return {

            tableData:

            [{date: '2016-05-02',name:'王小虎',address: '上海市普陀区金沙江路 1518 弄'},

             {date: '2016-05-04', name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'},

              {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'},

              {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}],

            gridData:

            [{ 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 弄' }],

              dialogTableVisible: false,

 

            form:

            {

                name: '',

                region: '',

                date1: '',

                date2: '',

                delivery: false,

                type: [],

            },

            dialogFormVisible: false,

         

               }

     }

   

   

   

    ,

    methods:{

        handleCurrentChange:function(val){

            alert("页码数发生变化"+val);

        },

        handleSizeChange:function(val){

            alert("每页记录数发生变化"+val)

        },

         onSubmit() {

            var str =  JSON.stringify(this.form) ;

           alert(str);

        }

    }

};

</script>

<style></style>