vue复习笔记
## 90 Vuecli脚手架的介绍和安装
脚手架最重要生成的东西还是webpack配置
脚手架依赖2个东西 一个是node 一个是webpack
91 Vuecli2初始化项目过程
92 Vuecli CLI2目录结构解析
92 安装CLI错误和ESLint的规范
安装脚手架遇到的问题 如下
以管理员身份安装如下那个文件就可以重新安装
创建了ESLint不使用的情况下 关掉它的办法
改为false就可以了
95 runtimecompiler和runtimeonly的区别
他们的区别只在main.js里面
96 掌握VUECLi创建项目和目录结构
现在发布的3是脚手架三 只是工具的三
把testcli3创建起来后npm run serve
启动一个本地服务器 在哪个文件夹下启动都可以
97 VueCli配置文件的查看和修改
gui即用户界面
可以手动改路径
管理下面这个项目
因为没有配置 所以通过用户图形化界面来管理这个东西
一旦写箭头就意味着是模糊的版本不是真实的版本
下面那个id才是真实的版本
要想知道真实的版本 要么看
要么看它打包出来的东西 不要看源码 源码最终也是要打包的
69+9
dev那个里面的版本是没有参考价值的
98 箭头函数的使用和this指向
有一个参数的时候小括号可以省略掉
上面的这个this打印出来是window
99 什么是路由和其中的映射关系
100 前端渲染 后端渲染 前端路由 后端路由
一个路由对应一个组件 这就是前端路由
101 url的hash和html的History
url没有改 后面多了个aaa
push和back相当于入栈和出战
102 vue-router安装和配置方式
删掉 重新创建以方便看懂
把ROUTER文件夹也删掉 重新创建
103 路由映射配置和呈现出来
1创建路由组件
有了这两个东西 要和路径进行映射
一个路径出现时显示Home组件 另一个路径出现时显示about组件
映射关系在如下配置 一个对象就是一个映射关系
一个映射关系对应一个对象
2配置映射关系
3 使用路由 通过rouyer-link和router-view 绝对哪一个路径在什么时候显示的
这2个vouter-link是vue-router里面已经注册过的全局组件 所以这两个组件可以在任意位置用
vouter-link最终会被渲染成a标签
因为下面这个APP里面的 东西 必然会被render出来
render会替换它
render就是下面这个东西 所以就相当于把下面那坨东西替换到el
那坨东西里面有2个按钮所以那2个按钮显示出来了
至于渲染到标签上边还是下边 渲染到左边还是右边
还需要一个router-view决定之后渲染出来的home组件或者about组件在哪个位置
就相当于一个占位 把某个组件渲染出来之后它就会替代vouter-view
注意要点一下首页或者关于它才出来
104 路由的默认值和修改为history模式
ba
的上下左右都可以有其它东西
进去的时候还得用户点击一下才能显示首页不太好 应该是默认首页 用户想切换的时候就直接切换
如下 把新建的路径写在第一个 进去就是首页
但是问题在于路径并不是显示的首页 所以给它重定向
在又觉得上面这个hash值不好看 用html的history
105 oruter-link的其它属性补充
希望vouter渲染出来的不仅仅是a标签还有其它标签
可以来回返回 说明源码里面用的pushState
replace就不可以返回
不希望它来回
必须点首页才能返回到首页则用replace
直接加一个replace就可以了
把样式复制过去给按钮设置样式 然后点击时就会变红
如果决定名字太长希望直接active{
}
假如有很多个vouter 想统一修改的话 就在路由里面修改
路由相关的配置都在index.js里面
linkActiveClass:'active'
106 通过代码跳转路由
如果不想用vouter-link
监听东西的时候上面这个路径并没有反应
希望点击按钮的时候上面的路径也改变的话 不要用history.pushState之类的这样子会绕过vue-router 最终一定是通过vue-router里面的东西来修改
$router这个属性来自于vue-router源码里面 它给所有组件里面都加了一个router属性
如上,这样子点击的时候 路径就不会跳转了
107 vue-router动态路由的使用
之前做的这种比较特殊的东西还是放在最前面比较好
先导入user文件
然后得设置在什么时候显示那个东西 router-link
还未达到需求 登录用户是张三 希望路径后面跟一个张三之类的
在vouter-link跳转的时候给它拼接上一些东西就可以了
上面这个东西它应该是动态获取d
改下面这个list list是啥 路径的后缀就是啥
有希望获取到路径后面的id
并且在如下区域做一个展示
直接用mustache 并且里面有一个属性$route
一共有三个路由
const routes = [
{
//协议头://host/query
path:'/home',
component:Home
},
{
path:'/about',
component:About
},
{
path: '/user/:userID',
component:User
}
下面这个 return this.$route
指的是上面这三个 谁处于活跃状态那么拿到的就是谁 当然那个默认路由一般情况下是不去拿它的
下面这个userId
和下面的这个userId对应
如果下面 那里变成abc
那么这里也变成abc就可以拿到
注意:computed要小写 不然还是弄不出来
而router是
这个整个大的路由对象
108 vue-router打包文件的解析
npm run build重新打包之后
先关掉丑化
重新打包 npm run build
109路由懒加载的使用
通过路由懒加载的方式导入路由
重新打包之前只有这三个文件
重新打开之后 多了三个文件 因为三个组件用了懒加载
一个懒加载会对应一个js文件
109路由懒加载的使用
110 vue-router路由的嵌套使用
为了有对应的子组件 先创建子组件
希望这俩都在首页里面展示
之前是在上面配置映射关系 但是现在不能 不然就是属于并集关系
但它们是包含在里面的 并不是同一层级关系
子组件的话 在path中不需要加/ 它到时候会自动添加 直接写就ok
没有组件 那么也对它进行懒加载
如下配置映射关系
然后要告诉子路由到时候显示在啥位置
子路由最终肯定是显示在首页上面的 所以要在首页里面设置router-view
111 vue-router参数传递1
给它传递些 年龄 名字之类的参数
那么to后面对应的不能是字符串 只能是一个大括号 要想大括号生效 必须前面加上v-bind
<router-link v-bind:to="{ }">档案</router-link>
语法写成对象的方式 依然有效果
想传递更多数据就是在query里面传入
这样子写 路径就有变化
url后面这个东西其实名字就叫做query
路径里面有了query还不行 还要把它取出来
如果想取单独信息的话
112 vue-router参数传递2
如果传数据的时候不是通过vouter-link bind to
而是通过button 点击哪个就传递哪个 同时 传递过去一些数据
先不传递数据 只是通过代码跳转的写法
如上点击用户那里就传过来了
效果如下 我的失败了
问题在于
有大量数据要传的时候一般用query方式
113 vue-router和route的y由来