H5 vue 初識(shí)

1 . 開(kāi)始構(gòu)建一個(gè)項(xiàng)目

使用vue init webpack test(項(xiàng)目文件夾名)命令初始化一個(gè)vue項(xiàng)目

vue init webpack test(項(xiàng)目文件夾名)

2. 開(kāi)始構(gòu)建環(huán)境

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: '景點(diǎn)門(mén)票景點(diǎn)門(mén)票景點(diǎn)門(mén)票'
      }]
    }
  },
  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 居中 --- 絕對(duì)定位和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