目录:

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相同。

小技巧:

注意:

03 (H5*) Vue第三天的更多相关文章

  1. day 82 Vue学习三之vue组件

      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...

  2. 总结Vue第三天:模块化和webpack模块化打包:

    总结Vue第三天:模块化和webpack模块化打包: 一.❀ 模块化 [导入import-----导出export] 1.为什么需要模块化? JavaScript 发展初期,代码简单地堆积在一起,只要 ...

  3. 一天带你入门到放弃vue.js(三)

    自定义指令 在上面学习了自定义组件接下来看一下自定义指令 自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是v ...

  4. Vue省市区三级联选择器V-Distpicker的使用

    Vue省市区三级联选择器V-Distpicker的使用 最近用的Vue+Element UI时,有些地方需要用到省市区三联选择器,网上安装并尝试了多种类似的插件,但都因为无法正常实现或是没有眼缘而弃用 ...

  5. vue.js 三种方式安装--npm安装

    Vue.js是一个构建数据驱动的 web 界面的渐进式框架.     Vue.js 的目标是通过简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易上手,便于与第三方库或既有项目整合.     ...

  6. 【转】vue.js三种安装方式

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  7. 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式:

    小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...

  8. vue.js三种安装方式

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

  9. vue.js 三种方式安装

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.它不仅易于上手 ...

随机推荐

  1. elk安装与搭建

    Elasticsearch安装配置 ·下载elasticsearch.tar.gz包,解压压缩包.(此处为单机版es,集群请参考 https://www.cnblogs.com/lazycxy/p/9 ...

  2. JQuery $.ajax(); 异步访问完整参数

    $.ajax 完整参数   jquery中的ajax方法参数 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post ...

  3. Scala 系列(十二)—— 类型参数

    一.泛型 Scala 支持类型参数化,使得我们能够编写泛型程序. 1.1 泛型类 Java 中使用 <> 符号来包含定义的类型参数,Scala 则使用 []. class Pair[T, ...

  4. Android进阶之路(2)-详解MVP

    ### MVP简介 >MVP 全称:Model-View-Presenter :MVP 是从经典的模式MVC演变而来,它们的基本思想有相通的[地方](https://baike.baidu.co ...

  5. 将excel中某列数据中,含有指定字符串的记录取出,并生成用这个字符串命名的txt文件

    Python 一大重要的功能,就是可处理大量数据,那分不开的即是使用Excel表格了,这里我做下学习之后的总结,望对我,及广大同仁们是一个帮助Python处理Excel数据需要用到2个库:xlwt 和 ...

  6. .net中DES加密算法研究

    /// <summary> /// DES加密算法 /// </summary> /// <param name="toEncrypt">要加密 ...

  7. https免费证书申请certbot,nginx

    官网:https://certbot.eff.org/ 下载: wget https://dl.eff.org/certbot-auto chmod a+x certbot-auto ./certbo ...

  8. python语言输入

    # 系统客户端包 import win32com.client speaker = win32com.client.Dispatch("SAPI.SPVOICE") # 系统接口 ...

  9. 到底什么是故事点(Story Point)?

    故事点是一个度量单位,用于表示完成一个产品待办项或者其他任何某项工作所需的所有工作量的估算结果. 当采用故事点估算时,我们为每个待办项分配一个点数.待办项估算结果的原生数据并不重要,我们只关注最后得到 ...

  10. P1963 [NOI2009]变换序列 倒叙跑匈牙利算法

    题意 构造一个字典序最小的序列T,使得 Dis(i, Ti) = di,其中i是从0开始的,Dis(x,y)=min{∣x−y∣,N−∣x−y∣} ,di由题目给定. 思路 二分图匹配,把左边的看成i ...