一、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>