先说一下学习vue的过程
第一遍看全局，知道有哪些东西，每一部分都是干什么用的，哪些重要，哪些不重要。
第二遍重原理，从最核心的原理出发，一步一步尝试以最短的路径走通整个流程，完成核心任务。
第三遍补周边，把之前做的方案拿出来，看看哪些地方可以优化，哪些地方能做得更好。
第三步我当时自己用vue做一个自己的资讯网站，数据传递推翻了两次，都是做到一半发现太冗余，数据传递太麻烦直接重做，第三次才定下来。然而现在我又觉得要推翻重做，虽然网站数据传递基本实现了，但还是有很多问题，所以准备再做一遍，就当是加深理解了。
Vue
1,npm install --save vue-resource
2.<router-link to="/helloworld">helloworld</router-link>
3.使用props绑定静态数据
【1】这种方法用于传递字符串，且值是写在父组件自定义元素上的。
【2】下面示例中的写法，不能传递父组件data属性中的值
【3】会覆盖模板的data属性中，同名的值。
【4】可以使用required选项来声明这个参数是否必须传入。
当未传入参数时( Missing required prop:)
4 vue获得数组索引
v-for="(user,index) in users" {{ index }}
5.Vue路由器
<!-- named route -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<!-- with query, resulting in `/register?plan=private` -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
5vue命名路由
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>//
name属性对应routes的对象的name属性
router.push({ name: 'user', params: { userId: 123 }})//
在这两种情况下，路由器都将导航到路径/user/123。
6vue跳到指定路由
this.$router.push({ name: 'RegandLog', params: { id: 'admincenter' }});
7vue路由钩子函数（//router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards）
在全局注册
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
在路由（route.js）注册
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
在组件中注册，可以使用以下选项直接在路径组件（传递给路由器配置的组件）中定义路径导航保护：
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
beforeRouteEnter (to, from, next) {
// called before the route that renders this component is confirmed.
// does NOT have access to `this` component instance,
// because it has not been created yet when this guard is called!
},
8.slot
子件
<template>
<div class="hell"
<div class="header"><slot name=“a”>默认值</slot></div>
<div class="content"><slot name="b">默认值</slot></div>
</div>
</template>
父件
<template>
<hell>
<div slot="a">sdgdhj</div>
<div slot="b">werwr</div>
</hell>
</template>