vue第二周

vue学习的总结，主要是vue-router和vuex,希望对各位能有所帮助！

vue-router，vuex

• vuex
  • Vuex: 公共状态管理的一种模式 简单的说：最好的一种组件传值的方式 特点： 1、数据是响应式的 2、数据不能够直接进行改变 1、安装 cnpm install vuex --save vuex数据传递的流程 当组件需要修改store中的数据的时候，必须通过dispatch触发actions里面的方法(actions里面的所有方法中有会有 2个参数 第一个是对象这个对象里面有我们后续要用到的commit，第二个参数是dispatch传递过来的参数)。actions中 通过commit的方法来触发mutations里面的方法(mutations里面所有的方法都会有2个参数 参数1是state 参数2是commit 传递过来的参数)。mutations中的方法用来修改state中的数据。当state中的数据发生改变后，组件中的数据也会发生改变 因为数据是响应式的
  • 属性：state
    • state: 用来保存公共的状态的地方 state的辅助函数 mapState mapState函数会返回一个对象，如果需要使用mapState的时候必须要配合组件的computed进行使用 1、方法一 computed:mapState(["n"]) 2、方案二 computed:mapState({ n:state=>state.n }) 3、方案三 computed:{ ...mapState({ n:state=>state.n }) }
  • 属性action
    • actions： 1、编写异步 2、actions中的方法可以用来触发mutations中的方法 actions辅助函数 mapActions 1、方案一 methods:mapActions(["handleActionModify"]) 2、方案二
  • 属性mutation
    • mutations: 用来修改state中的数据 mutations辅助函数 mapMutations mapMutations会返回一个对象，必须要配合methods进行使用 1、方案一 methods:mapMutations(["handleMutationsModify"]) 2、方案二 methods:{ ...mapMutations({ handleMutationsModify:"handleMutationsModify" }) }
  • 属性getter
    • getters: getter依赖state中的状态，当state中的状态发生了改变后，getter中的方法就会立即触发，类似于computed getters中的辅助函数 mapGetters 1、方法一 computed:mapGetters(['方法名称']) 2、方法二 computed:mapGetters({ key:val })
• mock模拟数据
• json-server
• better-scroll
• APP开发
  • A. 原生开发
  • B. Webapp
  • C. 混合开发
• 脚手架在vue 中的运用
• scoped私有属性
• 内置组件：keep-alive
• 动态组件
• 插槽
  • 插槽： 一般情况下当组件当做标签使用的时候，组件标签内部嵌套的元素默认是不会显示的。 如果需要将其进行显示则需要用到插槽 (匿名插槽) 基本使用： 在组件标签内部通过template标签进行包裹需要进行嵌套的内容 在组件内部通过slot内置组件进行接收 (命名插槽) 基本使用： 在组件标签内部通过template标签进行包裹需要进行嵌套的内容，如果是命名操作的情况下，则只需要给template标签 加一个属性v-slot:名字 在组件内部通过slot内置组件进行接收，命名插槽的时候需要给slot加一个name属性 代表需要插入的名称 (作用域插槽) 基本使用： 所谓的作用域插槽其实就是带参数的插槽
• 动画
  • 动画: 1、凡是需要执行动画的组件或者是标签，都必须通过transition内置组件进行包裹 2、凡是被包裹的组件或者标签在切换的时候必须经历v-if、v-show 解析动画： 动画的六部分组成 name:代表动画的名称。name在transition这个内置组件身上定义的 进场： name-enter name-enter-active name-enter-to 出场 name-leave name-leave-active name-leave-to 当你使用第三方类库的时候就可以用以下的方式书写 <transition enter-class="" enter-active-class="" enter-to-class="" leave-class="" leave-active-class="" leave-to-class="" > <div class="box" v-if="show"></div> </transition> 当想要一组元素进行动画展示的时候需要用transition-group 另外每个元素身上必须加一个key值
• vue-router
  • * 路由:根据用户请求的路径，返回不同的页面或者数据 node:后端路由 接口 前端路由:当前端路由进行页面跳转的时候不会经过后端服务器，根据页面的路径来进行当前页面的渲染 原理： 1、history.js 2、onhashchange vue中使用插件的流程？ 1、引入vue 2、引入插件 3、通过vue.use使用插件 安装 cnpm install vue-router -S 创建一个router文件夹 创建index.js文件 做路由的配置 路由配置常用的数据 mode:路由的一种形式 hash路由 : 底层原理 onhashChange 路径会携带一个# history路由 : history.js 路径不会携带# 但是如果你需要使用history的时候必须后端进行一个配置，否则会出现404 routes：路由配置的一些规则 是一个数组 数组中一个对象就是一个路由的配置 使用路由的时候需要知道的2个内置组件 1、 <router-view></router-view> : 当路径匹配成功后需要渲染组件的位置 2、 <router-link ></router-link> 常用的属性： 1、to:页面跳转的路径 2、tag:将router-link渲染成指定的标签 router-link 底层其实就是通过a标签来实现的 例如 <a href="#/home">首页</a> routes中常用的属性： path:路径 当用户请求的路上遇path中的路径相符合的时候就会渲染相对于的组件 component: 需要渲染的组件 children:路由的嵌套 chidren就相当于一个小型的routes 同样children也是一个数组，数组中每一个对象都是二级路由的配置项 name:命名路由 props:true meta: 路由元信息 redirect:重定向 编程式导航 实现路由的跳转方式 1、<a href="#/home">首页</a> 2、<router-link ></router-link> 3、编程式导航(用js实现路由的跳转) 当vm添加了router这个对象后，实例身上就会多一个$router这个属性 这个属性可以实现路由的跳转 this.$router.push 跳转 this.$router.back 后退 this.$router.forward 前进 this.$router.replace 替换 this.$router.go()
  • 1. 内置组件
    • 1、 <router-view></router-view> : 当路径匹配成功后需要渲染组件的位置 2、 <router-link ></router-link> 常用的属性： 1、to:页面跳转的路径 2、tag:将router-link渲染成指定的标签 router-link 底层其实就是通过a标签来实现的 例如 <a href="#/home">首页</a>
  • 2. routes中常用的属性
    • path:路径 当用户请求的路上遇path中的路径相符合的时候就会渲染相对于的组件 component: 需要渲染的组件 children:路由的嵌套 chidren就相当于一个小型的routes 同样children也是一个数组，数组中每一个对象都是二级路由的配置项 name:命名路由 props:true meta: 路由元信息 redirect:重定向
  • 3. 实现路由的跳转方式
    • 1、<a href="#/home">首页</a> 2、<router-link ></router-link> 3、编程式导航(用js实现路由的跳转) 当vm添加了router这个对象后，实例身上就会多一个$router这个属性 这个属性可以实现路由的跳转 this.$router.push 跳转 this.$router.back 后退 this.$router.forward 前进 this.$router.replace 替换 this.$router.go()
  • 4. 路由传参
    • 动态路由传参(必须传值) 1、在定义路由的时候通过 /:属性 来定义传递参数的属性 2、在进行路由跳转的时候将传递的参数携带过去 通过 /路径/参数1/参数2 3、接收： 在需要接收的组件内部通过 this.$route.params进行接收 query传参(非必须) 根据url地址做拼接 1、定义路由的时候按照正常的规则定义 2、在进行路由跳转的时候通过跳转地址的url路径做拼接(类似于get请求的拼接) 3、接收： 在需要接收的组件内部通过 this.$route.query进行接收 路由解耦: 只使用于动态路由 1、在定义路由的时候通过 /:属性 来定义传递参数的属性 2、在定义路由的时候需要加一个属性props:true 路由解耦 2、在进行路由跳转的时候将传递的参数携带过去 通过 /路径/参数1/参数2 3、接收：通过props进行接收
  • 5. 路由守卫
    • 路由守卫： 路由跳转前后需要做的一些验证 全局守卫 beforeEach 一般情况下用来做 用户是否登录的验证 以及权限的校验 局部守卫 beforeRouteEnter 当路由进入的时候 beforeRouteEnter:中是访问不到this的 场景: 1、验证用户是否登录 2、验证用户的权限 3、推荐 4、定位 5、热力图 前端埋点 beforeRouteUpdate 当路由更新的时候 场景：当路由发生改变，而当前组件没有经历创建和销毁的时候就需要用beforeRouteUpdate beforeRouteLeave 当路由离开的时候 场景： 1、用户未支付的时候 2、退出登录 3、埋点 4、答题系统
  • 6. 关于路由的面试题
    • 面试题，当路由发生改变的时候页面数据没有发生改变应该如何解决 1、beforeRouteUpdate 2、watch监听$route的变化 面试题：单页面开发首屏加载慢如何解决？(单页面开发首屏出现白屏/加载时间过长如何解决)? 1、路由懒加载实现同步的过程 A：异步组件的方式 (resolve)=>require(["加载的路径"],resolve)//由qi B：ES的import方式 ()=>import("./路径") 2、骨屏注入 3、nuxt后端渲染
  • 7. 单页面开发与多页面开发的区别 以及优缺点