VUE知识体系

这是一篇关于VUE知识体系的思维导图

VUE知识体系

• 第二部分
• 监听器watch
  • 普通监听
    • 用于字符串、数字、布尔
      • watch:{ str(new,old){ } }
  • 深度监听
    • 用于对象、数组
      • watch:{ str:{ handler(new,old){ }, deep:true 默认为false时不进行深度监听 } }
• 计算属性computed
• 过滤器filter
  • 局部过滤器filters
  • 全局过滤器vue.filter
• 生命周期
  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed
    • 页面销毁再重新挂载后，页面更新期的钩子函数不会再被触发
• 过度动画transition
  • 匿名动画
    • v-enter v-enter-active v-enter-to v-leave v-leave-active v-leave-to
  • 具名动画
    • name-enter name-enter-active name-enter-to name-leave name-leave-active name-leave-to
  • 第三方动画库animate.css
    • <link rel="stylesheet" type="text/css" href="css/animate.min.css"/> <transition enter-active-class="animated bounce"> <div v-if="show"> {{ counter }} </div> </transition> enter-active-class 元素进入 leave-active-class 元素离开的动画类名
• 组件components
  • 局部注册
  • 全局注册
• vue-cli脚手架
• 组件通信
  • 父组件到子组件props
    • 自定义验证规则validator
  • 子组件到父组件$emit
  • 非父子组件
• is属性和动态组件
• ref属性
  • 找到标签
  • 多个相同时形成数组
  • ref操作子组件
• 插槽slot
  • 匿名插槽
  • 具名插槽
• 作用域插槽
• 路由
  • 路由配置
  • router-view
  • router-link
  • push、replace、go
  • redirect重定向
• 路由嵌套
  • children
• 路由传参
  • 动态路由
  • 查询参数
• 路由进阶
  • 路由模式
    • hash(默认)
    • history
  • 路由命名
  • 路由别名
• 路由导航守卫
  • 路由独享守卫
    • beforeEnter
  • 组件守卫
  • 全局守卫
• stylus样式预处理器
  • npm i stylus
  • npm i stylus-loader@3.0.2
• vuex状态管理
  • State
    • 状态
  • Getter
    • 计算属性
  • Mutation
    • 更改state，同步函数
  • Action
    • 提交mutation，可执行异步操作
  • Module
• vuex辅助函数
  • mapState
  • mapGetters
  • mapMutations
  • mapActions
• vuex数据持久化
• elementui
• 主题