.vue中字符串模板文件

<template></template>
<script></script>
<style lang="stylus" scoped></style>//使用stylus的语法格式 scoped表示只在当前内部使用

script中钩子及属性的使用语法

import BScroll from 'better-scroll'; //引入文件 
export default{
  name:'CityList',
  data(){
    return {
      datat:{}
    }
  },//自定义的值使用时需要加上this的指向
  props:{
    hot:Array,
    cities:Array
  }, //从父组件中获取的值
  computed:{
    json:function(){
      let jsont={}
      let allCityList=this.cities
      let arr=[]
      for(var i=0;i<allCityList.length;i++){
        if(arr.indexOf(allCityList[i].sortLetters)==-1){
          arr.push(allCityList[i].sortLetters)
        }
      }
      for(var j=0;j<arr.length;j++){
        let key=arr[j]
        jsont[key]=[]
        for(var xx=0;xx<allCityList.length;xx++){
          if(key==allCityList[xx].sortLetters){
            jsont[key].push(allCityList[xx])
          }
        }
      }
      return jsont
    }   
  },//通过计算属性获取值，获取速度比computed更快，刷新页面数据也不会丢失
  mounted(){
    this.scroll=new BScroll(this.$refs.wrapperList,{
      click:true
    })
   }//dom元素加载完成执行的操作

在template中即可使用上述操作结果

<div class="area" v-for="(item,key) of json"> //遍历json的返回结果
  <div class="title border-topbottom">{{key.toUpperCase()}}</div>
  <div class="item-list">
    <div class="item border-bottom" v-for="innerItem of item" :key="innerItem.id">      
     {{innerItem.name}}
    </div>
  </div>
</div>

在style样式文件中

@import "~styles/varibles.styl"//样式文件的引入
.list
 position:absolute
 top:1.58rem
 .title
  line-height:.4rem
  background:#eee
 .border-topbottom
  &:before
  background:#ccc
  &:after
  background:#ccc
 .button-list
   padding:.1rem
-------------------------------------------------------------------
对于修改非组件中的样式，可以采用样式穿透的方法
.wrapper >>>.swiper-pagination-bullet-active
  background:#fff !important