设计logo网站免费国外,装饰公司营销网站建设,建设信用卡网站登录,微信怎么推广自己的产品1.单页应用程序是指所有功能都在一个html页面上
单页面应用程序#xff0c;之所以开发效率高#xff0c;性能好#xff0c;应用体验好#xff0c;最大的原因就是#xff1a;页面按需更新。
2.Vue中的路由
路径和组件的映射关系
Vue中的路由插件#xff1a;VueRouter之所以开发效率高性能好应用体验好最大的原因就是页面按需更新。
2.Vue中的路由
路径和组件的映射关系
Vue中的路由插件VueRouter掌握VueRouter的基本使用步骤
VueRouter的作用修改地址栏路径的时候切换显示匹配的组件。
3..vue结尾的文件分为2类
页面组件src/views文件夹页面组件用于页面展示配合路由使用
复用组件src/components文件夹复用组件用于展示数据常用于页面的复用
4.路由的封装抽离
所有的路由配置放置在main.js中不合适通常把路由模块抽离出来单独放在一个文件中有利于维护。
5.vue-router提供了一个全局组件router-link用于取代a标签
因为如果使用a标签进行跳转的话需要给当前跳转的导航加样式同时要移除上一个a标签的样式太麻烦
router-link-active用于模糊匹配常用
router-link-exact-active用于精确匹配
6.在进行路由跳转的时候传递参数
分为 查询参数传参 和 动态路由传参
7.两种路由跳转方式
7-1路径跳转
this.$router.push({ path: 路由路径
})
7-2命名路由跳转
{ name: 路由名, path: /path/xxx, component:XXX }
8.缓存组件
原因当路由被跳转后原来所看到的组件就被销毁了会执行组件内的beforeDestroy和destroyed生命周期钩子重新路由到该组件后该组件有会被重新创建会执行组件内的beforeCreatecreatedbeforeMountMounted生命周期钩子
解决方法利用keep-alive把原来的组件给缓存下来keep-alive是Vue的内置组件当它包裹动态组件时会缓存不活动的组件实例而不是销毁它们。好处就是在组建切换的时候把切换出去的组件保留在内存中防止重复渲染DOM目的就是提高用户体验。
9.Vuex
Vuex就是一个插件可以帮我们管理Vue通用的数据多组件共享的数据。例如购物车数据 个人信息数据
注意并不是所有的场景都适合使用Vuex只有在必要的时候才使用vuex。
10.vuex中的几个部分
state存放数据
mutations同步修改数据的方法
actions异步执行的方法
getters从state中筛选出符合条件的一些数据并且这些数据是依赖state的此时会用到getters
modules如果把所有的状态都放在state中当项目变得越来越大的时候vuex会变得越来越难维护因此把vuex中的数据进一步分为多个模块来管理。
