一. vue补充
1. 获取DOM元素
救命稻草，
document.querySelector在template中标示元素`
ref = "xxx"在要获取的时候，
this.$refs.xxx获取元素创建组件，装载DOM，用户点击按钮
ref在DOM上获取的是原生DOM对象ref在组件上获取的是组件对象$el是拿其DOM这个对象就相当于我们平时玩的this，也可以直接调用函数
总结：
$属性：$refs获取组件内的元素 $parent：获取当前组件对象的父组件 $children：获取子组件 $root：获取new Vue 的实例 vm $el：组件对象的DOM元素
重点：理解 $nextTick 的作用，参考：
Vue.nextTick 的原理和用途
二. 路由
1. 路由原理
传统开发方式url改变后立刻发起请求，响应整个页面，渲染整个页面
SPA锚点值改变后不会发起请求，发起ajax请求，局部改变页面数据页面不跳转，用户体验更好
2. SPA
single page application（单页面应用程序）
前端路由
锚点值监视
ajax获取动态数据
核心点是锚点值
前端框架Vue/angular/react都很适合开发单页面程序
3. 基本使用
vue-router其实vue的核心插件
1. 下载
npm i vue-router -S2. (重要)：安装插件
Vue.use(VueRouter)3. 在main.js中引入
vue-router对象：import router from './x.js'4. 创建路由对象
var router = new VueRouter()5. 配置路由规则
router.addRouters([路由对象])路由对象
{path:'锚点值',component:要（填坑）现实的组件}
6. 将配置好的路由对象交给
Vue在
options中传递->key叫做router
7.留坑（使用组件）
<router-view></router-view>
4. router-link
to帮助我们生成
a标签的href锚点值代码维护不方便，如果需要改变锚点值名称
则需要改变[使用次数+1（配置规则）]个地方的代码
### 5. 命名路由
1. 给路由对象一个名称
{name:'home',path:'/home',component:Home}2. 在
router-link的to属性中描述这个规则<router-link :to="{name:'name'}"></router-link>通过名称找路由对象，获取其path，生成自己的href
大大降低维护成本，锚点值改变只用在main.js中改变path属性即可
阶段总结：
** vue-router使用步骤：
1. 引入
2. 安装插件
3. 创建路由实例
4. 配置路由规则
5. 将路由关联Vue
6. 填坑
** router-link to = "/xxx"命名路由：
1. 在路由规则对象中加入name属性
2. 在router-link中 :to="{name:'xxx'}"
** 生僻API梳理：
1. Vue.use(插件对象); // 过程中会注册一些全局组件，及给vm或者组件对象挂载属性
2. 给vm及组件对象挂载的方式：
Object.defineProperty(Vue.prototype,'$router',{
get:function(){
return 自己的router对象
}
})重点：vue.js关于Object.defineProperty的利用原理，参考：
Object.defineProperty()
6. 参数router-link
Vue.prototype.xxx = {add:fn}所有组件中，使用
this.xxx就能拿到这个对象查询字符串
1. 配置：
:to="{name:'detail',query:{id:hero.id}}"2. 规则
{name:'detail',path:'/detail',component:Detail}3. 获取
this.$route.query.id4. 生成
<a href="/detail?id=1">
path方式
1. 配置
:to="{name:'detail',params:{id:hero,id}}"2. 规则
{name:'detail',path:'detal/:id'}3. 获取
this.$route.params.id4. 生成
<a href="detail/1">
查询字符串配置参数
router-link一次
获取的时候一次
path方式配置参数
router-link一次
规则配置的时候声明位置
获取的时候一次
总结书写代码注意事项
path方式需要在路由规则中声明位置
7. vue-router中的对象
$route路由信息对象，只读对象$router路由操作对象，只写对象
8. 路由嵌套
市面上所谓的用单页面应用框架开发多页应用
潜逃路由
案例
进入我的主页显示：电影/歌曲
代码思想
router-view第一层，包含一个router-view
1.
router-view的细分2. 每一个坑挖好了，要对应单独的组件
9. 知识点介绍
路由
meta元素数据 ->meta是对于路由规则是否需要验证权限的配置路由对象中和name属性同级
{meta:{isChecked:true}}
路由钩子 -> 权限控制的函数执行时期
每次路由匹配后，渲染组件到
router-view之前router.beforeEach(function(to,from,next){ })
10. 编程导航
1. 跳转到指定的锚点，并显示页面
this.$router.push({name:'xxx',query:{id:1},params:{name:'abc'}})2. 配置规则
{name:'xxx',path:'/xxx/:name'}3. 根据历史记录前进后退
this.$router.go(-1|1)1代表前进，-1代表后退
作者：lotosv2010
原文链接：https://www.cnblogs.com/lotosv2010/p/9782036.html