一、过度&动画介绍?????
Vue在插入、更新或者移除 DOM时，提供多种不同方式的应用过渡效果
1.在CSS过渡和动画中自动应用class.
2.可以配合使用第三方 CSS 动画库，如 Animate.css
3.在过渡钩子函数中使用JavaScript直接操作 DOM.
4.可以配合使用第三方JavaScript 动画库,如 Velocity.js
二、组件过渡
Vue提供了 transitIon的封装组件，在下列情形中,可以给任何元素和组件添加进入/离开过渡。
当插入或删除包含在transition组件中的元素时，Vue将会做以下处理：
1.自动检索目标元素是否应用了CSS过渡或动画,如果是，在恰当的时机添加/删除CSS类名。
2.如果过渡组件提供了JavaScript钩子函数,这些钩子函数将在恰当的时机被调用。
3.如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画，DOM操作(插入/删除)在下一帧中立即执行。
三、过度的类名：(在进入/离开的过渡中，会有6个class 切换。)
1. v-enter:定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2. v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效(与此同时v-enter被移除)，在过渡/动画完成之后移除。
4. v-leave:定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to:2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效(与此同时v-leave被删除)，在过渡/动画完成之后移除。
四、自定义过渡的类名：过度的类名：
我们可以通过以下 attribute 来自定义过渡类名：
1.enter-class
2.enter-active-class
3.enter-to-class?(2.1.8+)
4.leave-class
5.leave-active-class
6.leave-to-class?(2.1.8+)
他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如?Animate.css?结合使用十分有用。
五、javascript钩子函数
1.一个元素出现的过渡包括四个节点:before-enter, enter, after-enter, enter-cancelled,分别代表开始出现前,出现中,出现后。元素的离开也一样。借助V-on可以在这些节点挂载钩子函数，用于在元素过度的各节点触发这些函数。
2.出现前主要用于配置一些参数:如将opacity设置为0,enter是进入的动画过程函数。同理before-leave是离开前的状态设置,leave对应的是消失的过程函数。
3.以上钩子函数会被传入被过渡元素el作为第一个参数。
4.js钩子函数依赖Velocity
Velocity是一个具有与jQuery的$ .animate()相同的API的动画引擎。它适用于和不使用jQuery。它速度非常快,它具有彩色动画,变换，循环,缓动，SVG支持和滚动功能。这是jQuery和CSS转换的最佳组合。
六、路由信息对象
1.一个路由对象(route object)表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录(route records)。
2.路由对象是不可变(immutable)的,每次成功的导航后都会产生一个新的对象。
3.路由对象出现在多个地方：
1)在组件内,即this.$route
2)在$route观察者回调内
3)router.match(location)的返回值
七、路由信息对象的属性
1. $route.path
-类型:string
-字符串,对应当前路由的路径,总是解析为绝对路径,如“/foo/bar"
2.$route.params
-类型: Object
-一个key/value对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
3.$route.query
-类型: Object
-一个key/value对象，表示URL 查询参数。例如,对于路径
/foo?user=1，则有$route.query. user ==1,如果没有查询参数.则是个空对象。
4.$route.hash
-类型:tring
-当前路由的hash 值(带#),如果没有hash 值,则为空字符串
5.$route.fullPath
一类型:string
-完成解析后的URL,包含查询参数和hash 的完整路径。
6.$route.name
-当前路由的名称,如果有的话。(查看命名路由)
7.$route.matched
-一个数组，包含当前路由的所有嵌套路径片段的路由记录。路由记录就是routes配置数组中的对象副本（还有在children 数组).
八、路由
1.<router-link>即: API<router-link>组件支持用户在具体路由功能的应用中(点击)导肌。通过属性指定目标地址,默认渲染成带有正确链接的<a/>标签,可以通过配置tag属性生成别的标签.另外,当目标路由成功激活时,链接元素自动设置一个表示激活的CSS类名。另外，router-link可以直接添加class和style来写样式。
2.<router-view>:组件是一个功能组件，渲染路径匹配到的视图组件。<router-view>渲染的组件还可以内嵌自己的<router-view>,根据嵌套路径,渲染嵌套组件。
1)注:无论是HTML5历史模式还是哈希模式,它的表现行为一致,所以,当你要切换路由模式,或者在IE9降级使用哈希模式,无须作任何变动。
2)在HTML5 history模式下，router-link会拦截点击事件，让浏览器不在重新加载页面。
九、路由传值的具体思路：
一、js
1.引入<Vue Router>
2.创建对象
3.使用Vue Router( Vue.use )
4.创建路由：
(1)调用组件。
(2)路由对象。
(3)放在router对象中。(把对象放在Vue Router中)
(4)对象放入Vue中。
二、DOM
1.<Vue Router>导航信息
2.<route-view>放入、切换的数组组件(渲染组件)
十、实例：
index.html:
<!doctype html>
<html>
<head>
<title>VUE练习</title>
<link rel="stylesheet" href="./css/index.css" type="text/css">
</head>
<body>
<div id="e">
<h2>路由</h2>
<p>
<router-link to="/foo">对象</router-link>
<router-link to="/bar">工具</router-link>
</p>
<router-view></router-view>
</div>
<script src="./bundle.js"></script>
</body>
</html>
index.js:
import _ from 'lodash';
import Vue from 'vue';
import router from './router';
new Vue({
el: "#e",
data: {
},
router,
methods: {
},
components: {},
})
router.js:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const Foo = { template: '<div>foo</div>' };
const Bar = { template: '<div>bar</div>' };
const router = new VueRouter({
routes:[
{ path: "/foo", component: Foo }, { path: "/bar", component: Bar }
]
})
export default router;
最终效果图：
动态路由：
index.html:
<!doctype html>
<html>
<head>
<title>VUE练习</title>
<link rel="stylesheet" href="./css/index.css" type="text/css">
</head>
<body>
<div id="e">
<h2>路由</h2>
<p>
<router-link to="/foo/a">对象</router-link>
<router-link to="/bar">工具</router-link>
</p>
<router-view></router-view>
</div>
<script src="./bundle.js"></script>
</body>
</html>
router.js:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const Foo = { template: '<div>foo<p>{{$route.params.id}}</p></div>' };
const Bar = { template: '<div>bar</div>' };
const router = new VueRouter({
routes: [
{ path: "/foo/:id", component: Foo }, { path: "/bar", component: Bar }
]
})
export default router;
最终效果图：
多层路由嵌套：
index.html:
<!doctype html>
<html>
<head>
<title>VUE练习</title>
<link rel="stylesheet" href="./css/index.css" type="text/css">
</head>
<body>
<div id="e">
<h2>嵌套路由</h2>
<p>
<router-link to="/foo/a">首页</router-link>
<router-link to="/foo/b">第二页</router-link>
<router-link to="/foo/c">第三页</router-link>
<router-link to="/foo/d">第四页</router-link>
<router-link to="/foo/e">尾页</router-link>
</p>
<router-view></router-view>
</div>
<script src="./bundle.js"></script>
</body>
</html>
index.js:
import _ from 'lodash';
import Vue from 'vue';
import router from './router';
new Vue({
el: "#e",
data: {
},
router,
methods: {
},
components: {},
})
router.js:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const Foo = { template: '<div>我是公共部分<p>{{$route.params.id}}</p><router-view></router-view></div>' };
const A={template:'<div>我是A部分</div>'};
const B={template:'<div>我是B部分</div>'};
const C={template:'<div>我是C部分</div>'};
const D={template:'<div>我是D部分</div>'};
const E={template:'<div>我是E部分</div>'};
const router = new VueRouter({
routes: [
{
path: "/foo/:id", component: Foo, children: [
{
path: "/foo/a",
component: A,
},
{
path: "/foo/b",
component: B,
},
{
path: "/foo/c",
component: C,
},
{
path: "/foo/d",
component: D,
},
{
path: "/foo/e",
component: E,
},
]
},
]
})
export default router;
注:如果path中的路径为空,则默认就是那个页面,一般作为首页显示!