Vue基础

这是一篇关于Vue基础的思维导图。一起来看一看吧！

Vue基础

• Vue动画
  • 入场动画和离场动画
    • 入场动画
      • v-enter:入场前的样式
      • v-enter-to入场完成后的样式
      • v-enter-active入场的时间段
    • 离场动画
      • v-leave离场的样式
      • v-leave-to离场完成后的样式
      • v-leave-active离场的时间段
    • 子主题
  • 使用过渡类名
    • 把需要添加动画的元素，使用v-if或者v-show控制
    • <transition>元素包裹
    • 添加两组类
      • .v-enter,.v-leave-to
      • .v-enter-active,.v-leave-active
    • 子主题
  • 使用第三方CSS动画库
    • 需要添加动画的元素v-if或v-show进行控制
    • 需要添加动画的元素用<transition>包裹
    • <transition>添加两个属性类enter-active-class，leave-active-class
    • 把需要添加动画的元素，添加一个class='animated'
    • 子主题
  • v-for的列表过渡
    • 把v-for循环渲染的元素，添加：key属性
    • 在v-for循环渲染的元素外层，包裹<transiton-group>标签
    • 添加两组类.v-enter,.v-leave-to和.v-enter-active,.v-leave-active
  • 子主题
• 生命周期
  • 生命周期：实例的生命周期，就是一个阶段，从创建到运行，再到销毁的阶段
  • 生命周期函数：在实例 的生命周期中，在特定阶段执行的一些特点的事件，这些事件叫做生命周期函数
    • 实例创建阶段
      • beforeCreate
      • created
      • beforeMount
      • mounted
    • 实例运行阶段
      • beforeUpdate
      • updated
    • 实例销毁阶段
      • beforeDestory
      • destoryed
• Vue过滤器
  • 全局 过滤器
  • 局部过滤器
  • 子主题
• JS单线程和异步
  • Promise
    • then
    • catch
    • async和await
  • 异步操作
  • 子主题
• axios
  • 导入
  • Vue.prototype.$http 使用时用 this.$http.get/post
  • axios.defaults.baseURL定义base地址和后面的请求地址进行拼接
  • 配合 await 和 async
    • post请求
    • get请求
• webpack
• elemetn-ui
  • 全部引入
  • 按需引入
  • 子主题
• v-cli快速构建项目
• 编程式导航
  • this.$router.push('路径的地址)
  • this.$router.go(n)
  • this.$router.forward()
  • this.$router.back()只能后退一步
• 路由管理
  • 路由配置四步走
    • 导入 router: import VueRouter from 'vue-router'
    • 挂载到Vue : Vue.use(VueRouter)
    • 配置路由规则：const router=new VueRouter({ routes:[{path: 锚链接 , component: 组件}，{规则2}，{规则3} ]
    • 挂载到Vue实例中：router
  • 路由守卫
    • router.beforeEach(to, from ,next)=>{处理逻辑})
  • 嵌套路由
    • children
  • 路由规则传值
    • this.$route.params
    • 开启props
  • 路由命名
  • 路由重定向
• 组件
  • 全局组件和局部组件
  • 组件传值
    • 父与子组件
      • 属性绑定
      • props接收
      • lodash深拷贝
    • 子与父组件
      • 事件绑定
      • $on 注册事件以及事件处理函数
      • $emit触发事件以及传参
    • 兄弟组件
      • 通过bus中间js文件，来注册事件，触发事件传值
  • ref引用组件
    • this.refs.??
  • .Vue文件
    • template模板
    • script行为
      • export default导出
    • style 样式
      • scope属性，避免样式冲突
  • 插槽
    • 匿名插槽
    • 具名插槽
    • 作用域插槽
• ES6导入与导出
  • 默认导入导出
    • 默认导出
      • export default{}
    • 默认导入
      • import 接收名称 from '模块名称'
  • 按需导入和导出
    • import {成员名称} from '模块名称'
    • export var a = 10
• watch监听
  • 监听某个数据变化后侧重于做某件事情
• computer计算属性
  • 同时监听多个数据变化后，侧重于得到一个新的值