Vue Day 06

一、Vue-Cli2

1.1runtime-compiler和runtime-only

• runtime-compiler：template->ast->render->vdom->ui
• runtime-only:render->vdom->ui 性能高，代码量少

二、Vue-Cli3

2.1认识Vue CLI3

vue-cli 3 与 2 版本有很大区别

vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录
vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
移除了static文件夹，新增了public文件夹，并且index.html移动到public中

三、Vue-router

3.1认识路由

• 后端渲染（jsp）：服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示
• 后端路由：当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户顿
  
• 前端渲染：后端只提供API来返回数据 ,前端通过Ajax获取数据, 并且可以通过JavaScript将数据渲染到页面中
  
• 前端路由：改变URL，但是页面不进行整体的刷新，一个URL对应一个组件在页面上渲染

3.2前端路由的规则

• URL的hash：通过直接赋值location.hash来改变href, 但是页面不发生刷新

• HTML5的history模式：

  • history.pushState({},'','/foo')

  • history.replaceState({},'','/foo')

  • history.back()

  • history.forward()

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

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

3.3Vue-router基础

• 使用vue-router的步骤:

  • 第一步: 创建路由组件

    <template>
      <div>
        <h2>我是关于</h2>
        <p>哈哈哈</p>
      </div>
    </template>
    
    <script>
      export default {
        name: "About"
      }
    </script>
    
    <style scoped>
    
    </style>
    

  • 第二步: 配置路由映射: 组件和路径映射关系

    /*配置路由相关的信息*/
    import VueRouter from 'vue-router'
    import Vue from 'vue'
    import Home from '../components/Home'
    import About from '../components/About'
    //1.通过Vue.use（插件），安装插件
    Vue.use(VueRouter);
    
    //2.创建路由对象
    const router = new VueRouter({
      //配置路由和组件之间的关系
      routes: [
        {
          path:'/home',
          component:Home
        }, {
          path:'/about',
          component:About
        }
      ]
    });
    //3.将router对象传入vue实例中
    export default router;
    

  • 第三步: 使用路由: 通过router-link和router-view

    <template>
      <div id="app">
        <router-link to="/home">首页</router-link>
        <router-link to="/about">关于</router-link>
        <router-view></router-view>
      </div>
    </template>

router-link: 该标签是一个vue-router中已经内置的组件, 它会被渲染成一个a标签.

router-view: 该标签会根据当前的路径, 动态渲染出不同的组件.

3.4细节处理

• redirect

  默认情况下, 进入网站的首页, 我们希望router-view渲染首页的内容.但是我们的实现中,默认没有显示首页组件, 必须让用户点击才可以.解决办法

  {
        path:'',
        redirect:'/home'
      }
  /*我们在routes中又配置了一个映射. 
  path配置的是根路径: /
  redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了.
  */

• history

  改变路径的方式有两种:URL的hash,HTML5的history,默认情况下, 路径的改变使用的URL的hash.如果希望使用HTML5的history模式

  const router = new VueRouter({
    routes: [
      ...
    ],
    mode:'history'//=>路径的改变方式
  });

• router-link补充

to, 用于指定跳转的路径.
tag可以指定router-link之后渲染成什么标签
replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
active-class: 当router-link对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class，也可以在路由对象中添加默认的linkActiveClass属性

• 路由代码跳转

  有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了

<div id="app">
    ...
<button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button>
...
<script>
export default {
  name: 'App',
  methods:{
    homeClick(){
      this.$router.replace('/home');
    },
    aboutClick(){
      this.$router.replace('/about');
    }
  }
}
</script>