复习

  1. v-model 表单控件的绑定
  2. axios 发送http请求框架
    1. get axios.get(‘url’,{params:{k:v,k2:v2}}).then(response=>{ this.xxxx指向vue }).catch(error=>{…})
    2. post axios.post(‘url’,{k:v,k2:v2}).then(response=>{ this.xxxx指向vue }).catch(error=>{…}) 注意后端需要用@RequestBody接收
    3. 跨域问题 @CrossOrigin(“*”)
  3. 生命周期
    1. beforeCreate / created 初始化
    2. beforeMount / mounted 挂载
    3. beforeUpdate / updated 更新
    4. beforeDestroy / destroyed 销毁
  4. 计算属性 计算
    1. computed
  5. 过滤器 : 格式化 转换
    1. filters
  6. 事件修饰符跟按键修饰符
    1. 事件冒泡：嵌套标签，触发了内层标签的事件，也会触发外层标签的事件；两种处理模式，
      1. 冒泡 bubble： 先触发内层标签的事件，再触发外层标签的事件
      2. 捕获 capture：先触发外层标签的事件，再触发内层标签的事件
    2. 事件修饰符：行为控制 .stop 阻止事件传播 .capture 使用捕获模式… .prevent 阻止默认行为
    3. 按键修饰符： .enter .ctrl .esc
  7. 组件化编程
    1. 封装自定义组件/标签
    2. Vue.component(‘组件名’,{ }) 组件就是一个vue实例
      1. template 组件模板
      2. props 属性： 外部传入数据
  8. 父子组件传值
    1. 父->子 props
    2. 子->父 自定义事件 组件 this.$emit(“事件名”,事件对象) 外部 监听自定义事件
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  10.     </style>
  11. </head>
  12. <body>
  13.     <div id="app">
  14.         <input type="text" v-model="newTodo" @keyup.enter='addTodo'>
  15.         <div>
  16.             共有{{total}}目标，已完成{{finished}}目标，还有{{unfinished}}条未完成
  17.         </div>
  18.         <div>
  19.             <input type="radio" v-model="show" value="showAll">所有目标
  20.             <input type="radio" v-model="show" value="showFinished">已完成目标
  21.             <input type="radio" v-model="show" value="showUnfinished">未完成
  22.         </div>
  23.         <ul>
  24.             <!-- （2）在组件外部监听自定义事件del，交给处理函数 -->
  25.             <todo-item v-for='t in showTodos' @del='handleDelete' :todo="t" :key='t.text'></todo-item>
  26.         </ul>
  27.     </div>
  28.     <!-- 引入vue -->
  29.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  30.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  31.     <script>
  32.     //全局注册一个组件
  33.     Vue.component('todo-item',{
  34.         template:`<li style="list-style:none">
  35.             <input type="checkbox" name="" v-model="todo.state" id="">
  36.             <span contenteditable @keydown.esc='handleCancel' @focus="save" @blur='handleChange' >{{todo.text}}</span>
  37.             <span style='color:red;cursor:pointer' @click='del(todo)'>x</span>
  38.             </li>`,//html的内容
  39.         props:['todo'],//属性,
  40.         data:function(){
  41.             return {
  42.                 prev:this.todo.text
  43.             }
  44.         },
  45.         methods:{
  46.             del(todo){
  47.                 this.$emit("del",todo);//（1）在组件内触发一个自定义的事件，名为del，事件对象（事件内容）todo
  48.             },
  49.             handleChange(e){
  50.                 console.log("changing:"+this.prev +" canceled:"+this.canceled)
  51.                 this.todo.text=e.target.innerText;
  52.             },
  53.             handleCancel(e){
  54.                 console.log("cancel:"+this.prev)
  55.                 this.todo.text=this.prev;
  56.                 e.target.innerText=this.prev;
  57.                 e.target.blur();
  58.             },
  59.             save(){
  60.                 console.log("saving:"+this.todo.text)
  61.                 this.prev=this.todo.text
  62.             }
  63.         },
  64.         mounted(){
  66.         }
  67.     });
  70.     let app = new Vue({
  71.         el: "#app",
  72.         data:{
  73.             newTodo:"",
  74.             show:"showAll",
  75.             todos:[{text:"买锅",state:false},{text:"买刀",state:true},{state:false,text:"买把铁丝"}]
  76.         },
  77.         computed:{
  78.             total(){
  79.                 return this.todos.length;
  80.             },
  81.             finished(){
  82.                 return this.todos.filter(t=> t.state).length;
  83.             },
  84.             unfinished(){
  85.                 return this.total-this.finished;
  86.             },
  87.             showTodos(){
  88.                 switch(this.show){
  89.                     case "showAll": return this.todos;
  90.                     case "showFinished": return this.todos.filter(t=>t.state);
  91.                     case "showUnfinished": return this.todos.filter(t=>!t.state);
  92.                 }
  93.                 return this.todos;
  94.             }
  95.         },
  96.         methods:{
  97.             handleDelete(todo){
  98.                 console.log("外部")
  99.                 console.log(todo);
  100.                 this.todos.splice(this.todos.indexOf(todo),1);
  101.             },
  102.             addTodo(){
  103.                 let todo = {text:this.newTodo,state:false};
  104.                 this.todos.push(todo)
  105.                 this.newTodo="";
  106.             }
  107.         }
  108.         });
  109. </script>
  110. </body>
  111. </html>

一个组件对外提供了哪些接口？

  • props属性
  • 自定义事件
  • slot插槽

插槽 slot

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Vue入门案例</title>
  8. </head>
  9. <body>
  10.     <!-- 视图 -->
  11.     <div id="container">
  12.         <submit-button>
  13.             <a href="">
  14.                 <img src="http://woniuxy.com/page/img/logo-500px.png" >
  15.             </a>
  16.         </submit-button>
  18.         <base-layout>
  19.             <template v-slot:header>
  20.                 一个菜单
  21.             </template>
  23.             <h2>好消息，好消息！</h2>
  25.             <template v-slot:footer>
  26.                 版权所有&copy 麦子科技
  27.             </template>
  28.         </base-layout>
  29.     </div>
  31.     <!-- 引入vue -->
  32.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  34.     <script>
  35.         Vue.component('submit-button',{
  36.             template:`
  37.                 <button @click='handleSubmit'>
  38.                     <slot>提交</slot>
  39.                 </button>
  40.             `,
  41.             methods:{
  42.                 handleSubmit(){
  43.                     alert('提交啦');
  44.                 }
  45.             }
  46.         });
  48.         Vue.component("base-layout",{
  49.             template:`
  50.             <div>
  51.             <header>
  52.                 <slot name='header'></slot>   
  53.             </header>
  54.             <main>
  55.                 <slot></slot>
  56.             </main>
  57.             <footer>
  58.                 <slot name='footer'></slot>   
  59.             </footer>
  60.         </div>
  61.             `
  62.         })
  65.         //创建VUE对象
  66.         //{}表示构造器参数
  67.         let app = new Vue({//ViewModel
  68.             el:"#container", //挂载点，与页面的某个dom节点关联
  69.             data:{ //数据 Model
  71.             },
  72.             methods:{
  74.             }
  75.         });
  76.     </script>
  77. </body>
  78. </html>

ElementUI的使用

https://element.eleme.cn/

基本案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.         <!-- 引入样式 -->
  9.         <link
  10.         rel="stylesheet"
  11.         href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
  12.         />
  13.         <title>Document</title>
  14.     </head>
  15.     <body>
  16.     <div id="app">
  17.         <el-button @click="visible = true">Button</el-button>
  18.         <el-dialog :visible.sync="visible" title="Hello world">
  19.             <p>Try Element</p>
  20.         </el-dialog>
  22.     </div>
  24.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  25.     <!-- 引入组件库 -->
  26.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  27.     <script>
  28.         let app = new Vue({
  29.             el:'#app',
  30.             data:{
  31.                 visible:false
  32.             }
  33.         });
  34.     </script>
  35.     </body>
  36. </html>

布局

通过基础的 24 分栏，迅速简便地创建布局。通过el-row和el-col布局，总共24分栏，span表示占用的栏数，offset表示偏移量

  1. <el-row>
  2.   <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
  3. </el-row>
  4. <el-row>
  5.   <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  6.   <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
  7. </el-row>
  8. <el-row>
  9.   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  10.   <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
  11.   <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  12. </el-row>

Form

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.         <!-- 引入样式 -->
  9.         <link
  10.         rel="stylesheet"
  11.         href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
  12.         />
  13.         <title>Document</title>
  14.     </head>
  15.     <body>
  16.     <div id="app">
  17.         <el-container>
  19.         <el-header>
  20.         <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
  21.             <el-menu-item index="1">处理中心</el-menu-item>
  22.             <el-submenu index="2">
  23.                 <template slot="title">我的工作台</template>
  24.                 <el-menu-item index="2-1">选项1</el-menu-item>
  25.                 <el-menu-item index="2-2">选项2</el-menu-item>
  26.                 <el-menu-item index="2-3">选项3</el-menu-item>
  27.                 <el-submenu index="2-4">
  28.                     <template slot="title">选项4</template>
  29.                     <el-menu-item index="2-4-1">选项1</el-menu-item>
  30.                     <el-menu-item index="2-4-2">选项2</el-menu-item>
  31.                     <el-menu-item index="2-4-3">选项3</el-menu-item>
  32.                 </el-submenu>
  33.             </el-submenu>
  34.             <el-menu-item index="3" disabled>消息中心</el-menu-item>
  35.             <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
  36.         </el-menu>
  37.     </el-header>
  38.         <el-main>
  39.         <el-row>
  40.             <el-col :span='12' :offset="6">
  42.         <el-form ref="form" :model="form" label-width="80px">
  43.             <el-form-item label="活动名称">
  44.                 <el-input v-model="form.name"></el-input>
  45.             </el-form-item>
  46.             <el-form-item label="活动区域">
  47.                 <el-select v-model="form.region" placeholder="请选择活动区域">
  48.                     <el-option label="区域一" value="shanghai"></el-option>
  49.                     <el-option label="区域二" value="beijing"></el-option>
  50.                 </el-select>
  51.             </el-form-item>
  52.             <el-form-item label="活动时间">
  53.                 <el-col :span="11">
  54.                     <el-date-picker type="date" format='yyyy-MM-dd' value-format="yyyy-MM-dd" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
  55.                 </el-col>
  56.                 <el-col class="line" :span="2">-</el-col>
  57.                 <el-col :span="11">
  58.                     <el-time-picker format='HH:mm:ss' value-format='HH:mm:ss' placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
  59.                 </el-col>
  60.             </el-form-item>
  61.             <el-form-item label="即时配送">
  62.             <el-switch v-model="form.delivery"></el-switch>
  63.             </el-form-item>
  64.             <el-form-item label="活动性质">
  65.             <el-checkbox-group v-model="form.type">
  66.                 <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
  67.                 <el-checkbox label="地推活动" name="type"></el-checkbox>
  68.                 <el-checkbox label="线下主题活动" name="type"></el-checkbox>
  69.                 <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
  70.             </el-checkbox-group>
  71.             </el-form-item>
  72.             <el-form-item label="特殊资源">
  73.             <el-radio-group v-model="form.resource">
  74.                 <el-radio label="线上品牌商赞助"></el-radio>
  75.                 <el-radio label="线下场地免费"></el-radio>
  76.             </el-radio-group>
  77.             </el-form-item>
  78.             <el-form-item>
  79.                 <el-upload
  80.                     class="upload-demo"
  81.                     action="http://localhost:8080/upload"
  82.                     name='file'
  83.                     :on-preview="handlePreview"
  84.                     :on-remove="handleRemove"
  85.                     :before-remove="beforeRemove"
  86.                     multiple
  87.                     :limit="3"
  88.                     :on-success="handleSuccess"
  89.                     :on-exceed="handleExceed"
  90.                     :file-list="form.fileList">
  91.                     <el-button size="small" type="primary">点击上传</el-button>
  92.                     <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  93.                 </el-upload>
  94.             </el-form-item>
  95.             <el-form-item label="活动形式">
  96.             <el-input type="textarea" v-model="form.desc"></el-input>
  97.             </el-form-item>
  98.             <el-form-item>
  99.             <el-button type="primary" @click="onSubmit">立即创建</el-button>
  100.             <el-button>取消</el-button>
  101.             </el-form-item>
  102.         </el-form>
  104.     </el-col>
  105. </el-row>
  106. </el-main>
  107. <el-container>
  109.     </div>
  111.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  112.     <!-- 引入组件库 -->
  113.     <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  114.     <script>
  115.         let app = new Vue({
  116.             el:'#app',
  117.             data:{
  118.                 form:{
  119.                     name: 'defaultName',
  120.                     region: '大中国',
  121.                     date1: '',
  122.                     date2: '',
  123.                     delivery: false,
  124.                     type: [],
  125.                     resource: '',
  126.                     desc: '',
  127.                     fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
  129.                 },
  131.             },
  132.             methods:{
  133.                 onSubmit(){
  134.                     console.log(this.form);
  135.                 },
  136.                 handleRemove(file, fileList) {
  137.                     console.log(file, fileList);
  138.                 },
  139.                 handlePreview(file) {
  140.                     console.log(file);
  141.                 },
  142.                 handleExceed(files, fileList) {
  143.                     this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
  144.                 },
  145.                 beforeRemove(file, fileList) {
  146.                     return this.$confirm(`确定移除 ${ file.name }？`);
  147.                 },
  148.                 handleSuccess(response, file, fileList){
  149.                     console.log(file);
  150.                     let fileObj = {name:file.name,url:file.response.data};
  151.                     this.form.fileList.push(fileObj)
  152.                 }
  153.             }
  154.         });
  155.     </script>
  156.     </body>
  157. </html>

upload使用注意事项：

  1. name指定上传时的文件名
  2. action指定提交的目标地址
  3. 需要在成功回调on-success时手工添加到fileList中

作业：

  1. 前后端增查，按条件分页查询+查看详情+新增讲师

image.png