H5 vue 初识

H5 vue 初识

---

1 . 开始构建一个项目

使用vue init webpack test(项目文件夹名)命令初始化一个vue项目

vue init webpack test(项目文件夹名)

2. 开始构建环境

npm run start
或
npm run dev

3.vue模板

<template>
  <div class="list">list</div>
</template>

<script >
import HomeHeader from './components/Header'
import axios from 'axios'

export default {
  name: 'List',
  // 局部组件
  components: {
    HomeHeader
  },
  props: {
    list: Array
  },
  data () {
    return {
      iconList: [{
        id: '0001',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
        desc: '景点门票景点门票景点门票'
      }]
    }
  },
  methods: {
    getHomeInfo () {
      axios.get('/api/index.json')
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      console.log(res)
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        this.city = data.city
        this.list = data.swiperList
      }
    }
  },
  mounted () {
    this.getHomeInfo()
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.list
    color: red

</style>

4. div 居中 --- 绝对定位和0

.homeNav-img-div {
        position: absolute;
        width: 1.4rem;
        height: .5rem;
        line-height: .25rem;
        text-align: center;
        margin: auto; 
        top: 0; left: 0; bottom: 0; right: 0;
    }

5. div 宽高比 显示
   html

<div class="homeIcon">
        <div class="iconContent">
            
        </div>
    </div>

css

.homeIcon
    position relative
    width: 100%
    height 0
    padding-bottom 31%
    background-color yellow
    .iconContent
        position:absolute;
        top: 0;
        left: 0;
        width: 100%
        height: 100%
        background-color: blue