03 (H5*) Vue第三天

目录：

1：Vue-resource中的全局配置。

2：Vue动画2部曲

3：animate动画

4：钩子函数动画

5：组件三部曲，推荐使用template标签来创建组件模板

1：Vue-resource中的全局配置。

1. 发送get请求：

getInfo() { // get 方式获取数据

  this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => {

    console.log(res.body);

  })

}

 

2. 发送post请求：

 

postInfo() {

  var url = 'http://127.0.0.1:8899/api/post';

  // post 方法接收三个参数：

  // 参数1： 要请求的URL地址

  // 参数2： 要发送的数据对象

  // 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded

  this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {

    console.log(res.body);

  });

}

 

3 发送JSONP请求获取数据：

 

jsonpInfo() { // JSONP形式从服务器获取数据

  var url = 'http://127.0.0.1:8899/api/jsonp';

  this.$http.jsonp(url).then(res => {

    console.log(res.body);

  });

}

4：全局配置。

Vue.http.options.emulateJSON = true;

Vue.http.options.root = '/root';

2：Vue动画

动画2部曲
1：transition标签包裹需要动画的标签

<transition>

            <h1 v-if="flag"> 这是一个H1标签</h1>

      </transition>

2. 自定义两组样式，来控制 transition 内部的元素实现动画

  <style>

        /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */

        /* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */

        .v-enter,

        .v-leave-to {

          opacity: 0;

        }

    

        /* v-enter-active 【入场动画的时间段】 */

        /* v-leave-active 【离场动画的时间段】 */

        .v-enter-active,

        .v-leave-active{

          transition: all 0.8s ease;

        }

      </style>

 

2：动画的name，来修改前缀

3：使用animate来做动画

4：钩子函数动画

5：组件化开发

定义Vue组件

什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；

组件化和模块化的不同：

 + 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；

 + 组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；

1：组件三部曲

  // 1：使用Vue.extend 来扩展组件模板对象   extend：扩展

        var com = Vue.extend({

            template : "<h3>自定义组件</h3>" ,

        });

    // 2：注册组件

        // Vue.component("MyCustomCom", com);

        Vue.component("my-custom-com", com);

 

    3：使用自定义组件

 <my-custom-com></my-custom-com>

2:第二种创建组件方式

组件的名字，组件对象。

Vue.component("my-custom-com2", {

            // template, 模板   extend 扩展。扩展组件模板

            template : "<h1>自定义创建组件方式2</h1>",

        });

3:template标签创建组件  推荐使用

 Vue.component("my-custom-com3", {

            template : "#com3",

        })

<template id="com3">

        <div>

            <h1>这是通过template标签创建的组件</h1>

        </div>

    </template>

4:组件中的数据。

　　1：必须是一个function

　　2：必须返回一个对象

　　3：和实例中的msg相同。

小技巧：

注意：