Vue 学习笔记

Vue 学习笔记的思维导图， vuex 核心概念： 1. State 2. Getter 3. Mutation 4. Action 5. Module store 是什么？？？

Vue 学习笔记

• 0. 官方文档
  • https://cn.vuejs.org/guide/quick-start.html#using-vue-from-cdn
  • https://cn.vuejs.org/api/application.html
• 1. 引入 vue.js
• 2. 轻量式构建工具 vite(推荐)
• 3. 双向数据绑定
• 4. 响应式 API
  • proxy 拦截对象， 最终实现响应式
    • 数组更新检测
      • 数组改变，视图跟着改变
• 路由 vue-router
  • 新建一个专门的 router/index.js
  • 路由正则 与 重复参数
  • 嵌套路由
  • vue-router-404 页面
  • 通过 js 跳转页面
  • 命名路由 和 命名视图
  • go 前进和后退
  • 路由组件传参
  • 路由守卫
  • 路由懒加载
• 5. 声明式渲染
• 6. MVVM
• 7. 应用和组件
  • 根组件：App.vue
  • 子主题
• 基础
  • 子主题
• 深入组件
  • 子主题
  • 组件实例 property
  • 组件是可复用的带有名称的实例
  • 子主题
  • 子主题
  • 父子组件传值
    • prop
    • $.refs
    • $.emit
    • $.parent
    • $.root
  • 组件之间跨级通信
    • provide
    • inject
  • 插槽
    • 备用内容
    • 作用域插槽
• 思考
  • 1. 应用需要挂载到 DOM元素？？？
  • 2. methods 是 app实例的对象？
  • setup() 是什么？
• 生命周期
  • 子主题
  • 子主题
• 模板语法
  • 指令
    • v-once
    • v-html
    • v-bind
    • v-on
    • v-model
      • 表单输入绑定
    • v-for
    • v-if v-else-if v-else
    • v-show， 注意区别于 v-if
  • 插值
  • 计算属性
    • computed
      • 有缓存， 缓存失效时间？？？ 依赖关系改变时才会执行
  • methods
    • 调用一次，执行一次
  • 侦听器
    • watch
    • deep 侦听
  • <template> 标签内可以使用变量
• class 与 style 绑定
  • class 类名对象
  • class 类名数组
  • 数组+对象
• 事件处理
  • 监听事件
  • 方法事件处理器
  • 事件修饰符
  • 按键修饰符
• 组合式 API
  • 在模板中的使用
  • 在 setup 中定义变量（注意setup 与 data() 同级）
    • 需要手动暴露出去
    • 使用 watch()
    • 使用 computed
    • 生命周期钩子函数， 需要导入
    • 参数 props
    • 参数context
    • provide-inject
• vuex 核心概念
  • 1. State
  • 2. Getter
  • 3. Mutation
  • 4. Action
  • 5. Module
  • store 是什么？？？