理论周 day2

用户9025704487940
72 阅读4分钟

一、知识回顾

熟练度错觉

  1. HTML区域语法
  • {{}} 数据渲染
  • v-html 渲染富文本
  • v-if v-elseif v-else v-show
  • v-bind:class 简写 :class
  • v-on:click 简写 @click
  • v-for="(item,index) in 数据" 嵌套循环注意事项
  • v-model 数据双向绑定
  1. JS区域语法
  new Vue({
    el:'#app',  //地盘
    data:{},   //经济
    computed:{}, //对data进行处理
    methods:{},  //职能部门
  })

二、watch监听

监听data的 变化，作出事件响应 使用场景

  1. 监听音乐播放时间变化，同步改变进度条

  2. 监听数据变化，进行本地缓存

  3. 浅监听

stu(){  //监听stu的变化  【浅监听】
  console.log('监听到了stu的变化');
  localStorage.setItem('stu',JSON.stringify(this.stu))
}
  1. 深监听
stu:{   //深监听
  handler(){  //处理函数
    console.log('深监听');
    localStorage.setItem('stu',JSON.stringify(this.stu))
  },
  deep:true   //开启深监听
}

三、生命周期钩子函数

在Vue实例创建过程中，会自动触发执行的一些特殊的函数

  1. 生命周期的四个阶段 生命周期函数图
  • 创建阶段
  • 渲染阶段
  • 更新阶段
  • 销毁阶段

  1. created的使用场景

  2. 使用axios发起异步请求

基于Promise对象封装而成的，专门用于发起http异步请求的方法库 文档

  • 回调函数的方式 【可能会导致回调地狱】

    • $.ajax({ url:'', success:(res)=>{

      } })

  • promise写法

    • axios({ url:'' }).then(res=>{

      })

  1. 使用axios请求在线接口
axios({
  url,
  method:'get',
  headers:{ //验证信息，是可选的，后端来决定
    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1610071819201726023958529"}',
    'X-Host': 'mall.film-ticket.film.list'
  }
}).then(res=>{
  console.log(res);
})

消息发送的解决方案

  1. 使用两个input 【不容易想到】

对于理论的熟练度

四、学员信息录入系统

  • 渲染用户 v-for v-if 【完成】
  • 录入功能 v-model v-on:click 【完成】
  • 删除用户 Array.splice(index,1)
  • 删除所有
  • 学员筛选功能 computed

五、尝试新功能

  • 将录入的学员存入本地存储 watch监听
  • 初始化的时候，提取本地存储的内容，做渲染 created

ES6标准入门

六、任务

  1. 理论内容

  2. 课堂案例

  3. 拓展功能

v-bind:class属性控制语法

参考文档

  • 三目运算
  • 对象
  • 数组 适合同时控制多个class变化
  • 数组+ 三目 适合同时控制多个class变化
  • 数组+ 对象 适合同时控制多个class变化

一、组件化介绍

  1. 什么是组件化？

组件是一个独立封装，带有功能的一个代码板块 组件三要素： + 结构 HTML + 样式 CSS + 功能 JS、JQuery、Vue

  1. 为什么采用组件化？

提高代码的复用性、提升开发效率 项目可维护性较好

  1. 如何实现组件化开发？

先挂载、后使用

  • 封装组件
  • 挂载组件
  • 调用组件

二、vue中组件化

在Vue项目开发时，组件都会被封装成为一个独立的 .vue文件

  1. 全局挂载
Vue.component('my-select',{  //为Vue全局挂载组件
    template:`<div class="my-select">
                此处定义组件结构
              </div>`
  })
  1. 局部挂载
new Vue({
    el:'#app',
    components:{  //局部挂载组件
      'my-select':{
          template:`<div class="my-select">
                  <input type="text">
                </div>`
      },
      'my-alert':{},
      'my-button':{}
    }
  })
  1. 组件的复用性

开放封闭 原则

  • 开放 组件应该提供一些供使用者可自定义调整的接口
  • 封闭 组件内部的通用功能，应该在内部实现后，方便直接调用

三、props组件传参

在组件内部开放一个数据接口，供用户向组件内部传递自定义的数据

  1. 在组件内部定义props
props:['list','holder'],
  1. 在调用组件的时候，传递props
<my-select :list="food" holder="请选择食物"></my-select>
  1. 命名规范
  • 全小写 listdata
  • 全大写 LISTDATA const定义的常量才会使用
  • 小驼峰 listData
  • 大驼峰 ListData
  • 烤串命名法 list-data
  1. props 命名要求
  • 组件外部全小写传递 listdata，内部全小写接收 listdata
  • 组件外部烤串传递 list-data，内部使用小驼峰接收 listData

四、组件内部可以使用那些配置项？

  1. new Vue 实例对象

    • el

    • data 是对象

    • computed

    • watch 可以监听data中的数据变化，作出反应

    • methods

    • created 等生命周期

    • components

  2. Vue.component 组件对象

    • template

    • data 组件内部的data，必须是函数

    • props 接收外部数据包

    • computed

    • watch 可以监听data、props中的数据变化，作出反应

    • methods

    • created 等生命周期

    • components

select组件封装

任务

  1. 知识点

    • watch
    • 生命周期
    • axios
    • 组件封装 select课堂案例

  2. 独立完成课堂案例

    • 用户信息录入综合案例，必须能够独立完成 【！！重要！！】

  3. 【拓展练习】封装分割线组件 分割线示例

    • 分割线显示的文字内容 title
    • 控制文字位置 orientation 左中右
    • 控制线条样式 dashed 是否为虚线
    • 控制线条颜色 color
    <my-divider title="" orientation="right" :dashed="true" color="red"></my-divider>
avatar
文章
阅读
粉丝