# vue学习笔记

**Repository Path**: niclas0923/vue-learning-notes

## Basic Information

- **Project Name**: vue学习笔记
- **Description**: 个人学习vue的笔记仓库，开源是为了更方便的从服务器中拉取。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-06-21
- **Last Updated**: 2023-07-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, Vuex, vue-cli

## README

# Vue学习笔记
个人学习vue的笔记仓库，开源是为了更方便的从服务器中拉取。
## 目前学习动态：

### 01_基础功能
1. 数据绑定
    - v-model
    - :
    - {{}}
2. 数据代理
   - Object.defineProperty
3. 事件处理
   - @click
   - @scroll
   - @wheel
   - @keyup
4. 计算属性
   - computed
5. 监视属性
   - watch
6. 样式绑定
   - :class
   - :style
7. 条件渲染
   - v-if
   - v-else-if
   - v-else
   - v-show
8. 列表渲染
   - v-for
   - :key
9. 其他内置指令
   - v-text
   - v-html
   - v-cloak
   - v-once
   - v-pre
10. 自定义指令
    - directives
11. 生命周期钩子
    - beforeCreate
    - created
    - beforeMount
    - mounted
    - beforeUpdate
    - updated
    - beforeDestroy
    - destroyed
12. 组件
    - Vue.extend
    - components
    - template

### 02_脚手架
1. 分析
   - render
2. ref标记
   - $refs
3. props单项传参
4. mixin混合
   - import mixin from "./components/mixin";
   - mixins:[mixin]
5. 插件
   - Vue.use
6. scoped局部样式
7. 自定义事件
   - $on
   - $off
   - $emit
8. 全局事件总线
   - Vue.prototype.$bus = vm(this)
   - $bus
9. pubsub消息订阅
   - import pubsub from 'pubsub-js'
   - pubsub.subscribe
   - pubsub.publish
   - pubsub.unsubscribe
10. $nexTick
11. 过渡与动画
    - transition
12. 代理配置
    - proxy
    - target
13. vue-resource请求
    - Vue.use()
    - this.$http.get
    - this.$http.post
    - this->vm/vc
14. 插槽
    - slot
    - template v-slot
15. vuex基础及其简写形式
    - actions
    - mutations
    - state
    - getters
    - dispatch
    - commit
    - mapActions
    - mapMutations
    - mapState
    - mapGetters
16. vuex模块化以及命名空间
    - modules
    - "numbers/unAddSum"
17. vue-router路由的基础配置和使用
    - $route
    - $router
    - router-link to router-view
    - query
    - name
18. params传递数据和props接收的配置以及replace
    - path:"data/:id/:title"
    - props:true
    - replace
19. 编程式路由导航
    - $router.push
    - $router.replace
    - $router.forward
    - $router.back
    - $router.go
20. 缓存路由组件
    - keep-alive
21. 两个新的生命周期钩子
    - activated
    - deactivated
22. 全局路由守卫和独享路由守卫
    - beforeEach
    - afterEach
    - beforeEnter
23. 组件内路由守卫，hash与history模式
    - beforeRouteEnter
    - beforeRouteLeave
    - history模式路径中不存在“#”但是会存在后端问题，需要后端安装库或者正则表达等方式解决问题，node可用库内：connect-history-api-fallback
24. Element-UI的简单使用和适量引入

### 03_Vue3
1. 基础构建分析