vue从创建到完整的饿了么（4）Home.vue布局及vue-resource使用

levius 发布于2019-08-20 18:58 / 1720人阅读

摘要：咱们在第一章创建的时候已经安装了。而从创建到使用到结束分为了十个周期，称为生命周期钩子，而是把数据加载的的时候调用这是我目前的理解。中有两个函数，第一个是请求成功的函数，第二个是请求失败的函数。

说明

1.上一章--引入UI框架
2.苍渡大神Github源码地址--源码地址
3.UI框架用的是Mint UI，上一章已经引入
4.数据接口地址--Github
5.下一章--v-for,v-bind以及计算属性的简单使用

头部

1.先看一下UI图

2.头部没有现成的组件，但是有一个固定定位的组件Header，稍加修改即可，home.vue修改如下

3.npm run dev 运行页面如下
登录与注册应该是连接，但咱们先这么写，后面用到再改，Header下的元素应该有个margin-top，这时发现这个css样式应该很多页面都要用，那应该写在全局的css里，怎么写才是全局的css？。咱们在main.js引入Mint-ui的时候，写了一段代码

import "mint-ui/lib/style.css"

这是引入Mint-ui的css，但咱们在home.vue组件并没有引入可以直接使用，那咱们的全局CSS是不是也是这么引入的呢？
4.在src文件夹下新建文件夹style，在style内新建文件mycss.css，代码如下

在main.js引入

import "./style/mycss.css"

在home.vue修改将全局css加入到元素上

页面效果如下

如果谷歌手机模式浏览字变小在index.html的head加入以下代码

可以看到全局样式已经应用，接下来写页面

home.vue主体

1.home.vue页面代码修改如下

2.mycss.css修改如下（body默认有个margin：8px，是因为Mint-ui么？）

body{
    margin: 0px;
    height: 100vh;
    background-color: #f5f5f5;
}

.fixed{
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 5;
}

.ih40{
    height: 40px;
    line-height: 40px;
}
.ih50{
    height: 50px;
    line-height: 50px;
}

.bgcol{
    background-color:#26a2ff;
}
.bgfff{
    background-color: #fff;
}
.bgf5{
    background-color:#F5F5F5;
}

.fs0-8{
    font-size: 0.8rem;
}
.fs1-2{
    font-size: 1.2rem;
}

.col9f{
    color: #9F9F9F;
}
.col{
    color: #26a2ff;
}
.box{
    box-sizing: border-box;
}

.padlr10{
    padding:0px 10px 0px 10px;
}
.padtop10{
    padding-top:10px; 
}
.padtop40{
    padding-top:40px;
}
.mgtop40{
    margin-top: 40px;
}
.mgtop10{
    margin-top: 10px;
}
.mgbot10{
    margin-bottom: 10px;
}

.ovhid{
    overflow: hidden;
}
.right{
    float: right;
}

.clear{
    clear: both;
}
/*一像素分割线*/
.after{
     position: relative;
}
.after::after{
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #e4e4e4;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
}
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .after::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .after::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}

页面效果

需要注意的是，我写了一个after的class，这是用来利用css伪类：：after来实现元素下边框一像素的class（手机上如果直接用border-bottom设置1px的话页面显示并不是一像素而是2像素或者3像素，虽然大部分用户并不能感觉出有什么区别，但是设计师会很不开心--这种代码网上有很多）。

3.ok，页面写好了，下面是请求数据。接口地址。以前发送请求获取数据，我是用ajax，但是vue自己封装了一个数据请求插件vue-resource，咱们先来试试。

vue-resource

1.安装vue-resource。咱们在第一章创建的时候已经安装了。未安装的可以进入vue项目后

 npm install --save vue-resource

安装成功后，可以打开项目的package.json文件查看所有的配置文件，其中就有vue-resource的版本信息

2.引入。

使用首先要引入，打开main.js，输入

import Resource from "vue-resource"
Vue.use(Resource)

ok，这就引入成功，就可以在组件中写代码使用。

3.使用
打开home.vue文件，在中输入

export default {
  data () {
    return {
     
    }
  },
  component:{
  //注册组件

  },
  mounted:function(){
  //生命周期
      this.$http.get("http://cangdu.org:8001/v1/cities?type=group").then(response => {
        console.log(response);
      }, response => {
        console.log(response);     
      });
  },
  computed:{
  //计算属性

  },
  methods:{
  //函数

  }
}

return中用来写需要用到的变量。
component中用来注册本组件需要引用的其他外部组件（用到的时候再说）。
mounted是vue的生命周期，大家都知道页面是有加载顺序的，不是说一下子页面就可以出来。而vue从创建到使用到结束分为了十个周期，称为生命周期钩子，而mounted是把vue数据加载的html的时候调用（这是我目前的理解）。
computed是计算属性，其中写一个个函数，这些函数用来计算属性，当属性改变时，函数的结果的也会随之改变，而我们使用时只需要调用一次函数即可（用到再说）。
methods中用来写函数，调用一次执行一次。

4.请求

咱们把数据请求放到 mounted中，vue-resource代码如下

this.$http.get("http://cangdu.org:8001/v1/cities?type=group").then(response => {
    console.log(response);
  }, response => {
    console.log(response);     
  });

this指向vue。数据接口中请求城市列表是GET请求，所以我们使用this.$http.get()方法。then中有两个函数，第一个是请求成功的函数，第二个是请求失败的函数。上面的代码使用了es6的箭头函数（我也只是看得懂，并没有用过）
城市的接口地址

数据请求代码这就写完了，咱们先运行试试，可以在控制台看到
ok，数据请求成功，下面就是怎样把数据放到页面里呢？

idc机房托管专线服务饿了么饿了么 js 饿了么配送调度饿了么api接口

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84958.html

vue从创建到完整的饿了么（3）引入UI框架

摘要：说明上一章从创建到完整的项目路由苍渡大神项目源码地址地址下一章布局以及框架咱们先看一下的效果图，原网址在此接下来用什么框架呢因为以前用的是，所以这次用练练手，文档在此首先下载结果如图那两个警告说的啥我也不懂，先不管大神指说明上一章--vue从创建到完整的项目（2）路由苍渡大神项目源码地址--Github地址下一章--Home布局以及vue-resource UI框架 ...

fantix 2019-08-20 18:53 评论0 收藏0
vue从创建到完整的饿了么（5）v-for，v-bind与计算属性

摘要：的命令都用来开头。用来绑定属性。排序思路重新创建一个，键名是从到，键值就是获取的数据的键值。计算函数写在哪一种方法是写在生命周期的数据请求里，直接返回一个处理好的，但咱们用另一种方法计算属性。把这个加到城市名字的上即可解决。说明 1.上一章--Home.vue及vue-resource使用2.cangdu大神的项目源码地址--Github地址3.接口地址--Github地址4.UI框...

james 2019-08-20 18:58 评论0 收藏0
vue从创建到完整的饿了么（2）路由

摘要：首先在下创建文件夹，在下创建文件，所有的路由控制都写在这个文件里。表示路径，表示显示的页面要显示哪个文件，表示的嵌套的路由。说明上一篇地址--创建苍渡大神Github项目源码地址--源码地址下一篇地址--引入UI框架 home.vue 创建根据源码，先在src文件夹下新建文件夹page，在page中新建home文件夹，在home文件夹中新建home.vue，hom...

mmy123456 2019-08-20 18:53 评论0 收藏0
vue2+webpack2实现饿了么移动端商家页面

摘要：这是一个基于全家桶实现的饿了么移动端项目地址如果觉得对您有帮助，您可以在上给我个支持一下，谢谢如果有问题，也欢迎一起讨论先来张项目动态截图感受下项目运行克隆项目到本地安装依赖本地开发，开启服务器，浏览器访问构建生产项目说明用到的技术栈这是一个基于Vue全家桶实现的饿了么移动端webapp项目github地址：https://github.com/JerryYgh/m...如果觉得对您...

Blackjun 2019-08-20 15:50 评论0 收藏0
vue2 + vuex 高度还原饿了么 App，与官方后台真实数据交互，获取商品信息，实现登陆、购

摘要：注此项目纯属个人瞎搞，正常下单请选择饿了么官方客户端。目前下单功能已经实现，下单功能完全采用官网真实数据，可以控制官网发短信或者打电话到指定的手机号码，下单后可以在手机中查看并且付款。前言 vue2的发布后自己也研究了一段时间，奈何公司的技术栈是以react为主，没有机会好好利用vue2去做一个完整的项目。虽然写了几个demo，但和写一个完整的项目还是有很大差别的。于是自己想着用空余...

JeOam 2019-08-20 14:26 评论0 收藏0