vue学习

基础

脚手架

 

安装Vue脚手架

• npm install -g @vue/cli

• vue --version(一般是3.x.x)

• vue create my-project

拉取2.x模板

• npm install -g @vue/cli-init

• vue init webpack my-project

• vue init webpack my-project

什么是前端渲染，什么是后端渲染

• 后端渲染：后台服务器传到前台就已经渲染好了。

• 后端路由：后端处理URL和页面之间的映射关系

• 前端渲染：ajax时代

• 前端渲染： 由前端维护

• 前端路由：url由前端跳转，可能一个页面有好几个页面，在该页面，第一次请求全部把数据已经加载，后面再该页面跳转，不用请求后台

• 前端路由的核心：改变URL，但是页面不进行整体的刷新。

• SPA页面：单页富应用，整个网页只有一个html页面

路由不刷新跳转

• location.hash = "aaa"

• history.pushState({}, '', '/foo') 类似弹栈 先进后出

• history.back() 等价于history.go(-1)

• history.forward() 则等价于 history.go(1)

三大流行框架的路由实现

1. Angular的ngRouter

2. React的ReactRouter

3. Vue的vue-router

安装和使用vue路由

• 安装: vue-router

  • npm install vue-router --save

• 再模块化工程中使用它(因为是一个插件，所以可以通过Vue.use()来安装路由功能）

  1. 导入路由对象，并且嗲用Vue.user(VueRouter)

  2. 创建路由实例，并且传入路由映射配置

  3. 在Vue实例中挂载创建的路由实例

• 路由基础

  1. mode：‘history’ 去掉#/

  2. router-link to 去寻找路由中的组件

  3. router-view 显示上面找到的组件

  4. router-link中 tag=‘button’ 将a标签更换成按钮

  5. router-link中replace 不进行history.pushState方式跳转，浏览器上面可以向前、向后

  6. router-link中avtive-class='active' 更换 默认的class

  7. 路由配置xxx 相当于给6中所有的router-link配置该class

  8. 通过方法调用路由：this.$router.push(‘/home’)

  9. export default router 导出路由

  10. 一级目录要带/， 二级目录不要带/ 因为一级和 跟目录接触

  11. 大量传递参数用query 使用query接收手。 少量直接写参数：使用params接收

• 动态路由

  1. $route 拿取当前活跃的路由， this.$route.params.(变量)

• 路由懒加载

  • 一个路由打包一个js，这样请求快(懒加载:用到了在加载)

  • import Name from '../components/Name'
    更换成: const Name = () => import('../components/Name')

• 给页面起名字(浏览器上方)导航守卫

  • 方式一：
    当前组件加入
    created() {  
    document.title = '首页'
    }

  • 方式二：前置钩子
    路由中加入
    router.beforeEach((to, from, next) => {  
    document.title = to.matched[0].meta.title  
    next()
    })
    ​
    赋值   
    meta:{
        title: "Profile"
        }
    meta 是元数据：既数据的数据

• 跳转回原来的页面，还是显示原来的信息

  • 上一个组件 ，给 <router-view> 引入<keep-alive> 让显示页面保持缓存
    <keep-alive> 可以使用exclude属性 

  • 当前组件加入
    activated(){ 当进入该页面， 激活时
      this.$router.push(this.path)
    },
    beforeRouteLeave(to, from, next){  离开时 
      this.path = this.$route.path;  
      next();
    }

 

命名

• Profile -> 档案 做‘我的’用 代替mine my me

•