vue填坑之路——Day2（基础）

网络请求

HTTP报文

GET请求报文和响应报文

axios

axios英文文档

---

Vue实例生命周期

生命周期钩子：created、mounted 等等，
生命周期钩子函数：在Vue实例存活的不同阶段执行的函数，函数的this 指向调用它的Vue实例。

Vue过渡动画

元素从DOM插入或移除时触发过渡效果。触发场景有

条件渲染 v-if
条件展示 v-show
动态组件 transition

1. 单元素/组件过渡 transition+v-if/v-show

当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

• 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
• 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
• 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

6个过渡类名

• 他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如
  Animate.css 结合使用十分有用。
• 2.1.8版本及以上支持v-enter-to、v-leave-to 。v 指代transition 的属性name。
• 在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

---

路由

使用路由

先准备好两个组件。

// const Foo = { template: '<div>foo</div>' }
// const Bar = { template: '<div>bar</div>' }
var Foo = Vue.component('Foo', {
    template: '<div>foo</div>'
});
var Bar = Vue.component('Bar', {
    template: '<div>bar</div>'
});

路由配置：

const routes = [
    {
        path: '/foo',
        component: Foo
    },
    {
        path: '/bar',
        component: Bar
    }];

// 创建路由实例
const router = new VueRouter({
        routes
    });

创建挂载根实例，记得要通过 router 配置参数注入路由。通过vm.$router 访问路由

var vm = new Vue({
    el:"#app",
    data: function(){
        return {
            father: 'father'
        }
    },
    router:router, // 注入路由
    methods: {
        goBack: function() {
            window.history.length > 1
            ? this.$router.go(-1)
            : this.$router.push('/')
        }
    }
    });

html如下

<router-link to = '/foo'>go to foo</router-link>
<router-link to = '/bar'>go to bar</router-link>
<button @click = 'goBack'>go back</button>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

显示Foo组件时，路径为http://localhost:3000/#/foo

动态路由

路由规则path: '/bar/:id' 。则路径/bar/foo1、/bar/foo2 都将映射到相同路由。通过$route.params.id 可以访问到当前路径动态的id，即'foo1' 或'foo2'。

设置多段“路径参数”，对应的值都会设置到$route.params。

模式	匹配路径	$route.params
/user/:username	/user/evan	{ username: ‘evan’ }
/user/:username/post/:post_id	/user/evan/post/123	{ username: ‘evan’, post_id: 123 }

嵌套路由

在嵌套的出口中渲染组件，需要在VueRouter 的参数中配置children。

const routes = [
    {
        path: '/account',
        alias: '/',
        component: Account,
        children: [
        {
            // 注意path不能加斜杠 '/'
            // 以 '/' 开头的嵌套路径会被当作根路径
            path: 'login',
            component: Login
        },
        {
            path: 'register',
            component: Register
        }]
    }];
    const router = new VueRouter({
        routes
    });

组件：

var Account = Vue.component('Account', {
        template: '<div><h1>账号切换</h1><router-view></router-view></div>'
        // 在外层组件中使用<router-view>，作为子组件渲染的出口
    });

    var Login = Vue.component('Login', {
        template: '<div>LOGIN</div>'
    });

    var Register = Vue.component('Register', {
        template: '<div>REGISTER</div>'
    });

当路径匹配到/account/login，渲染Login 组件；当路径匹配到/account/register，渲染Register 组件。

/#/account/login                     /#/account/register
+------------------+                  +-----------------+
| Account          |                  | Account         |
| +--------------+ |                  | +-------------+ |
| | Login        | |  +------------>  | | Register    | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+