关于Vue(旅游APP)的一些总结点

1、保持宽高比例

      .wrapper{

          width:100%;

          height:0;

          padding-bottom:31.25%

       }

2、

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是怪异模式了~

 

3、

overflow: hidden
white-space: nowrap
text-overflow: ellipsis


4、

使用 Props 传递数据

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

“prop” 是组件数据的一个字段，期望从父组件传下来。子组件需要显式地用 props 选项 声明 props：

 

 5.Vuex

    创建Vuex仓库，建立index.js文件

    import  Vue  from  ‘vue’

    import   Vuex   from  ‘vuex’

    export   default    Vuex.Store({

       state:{

             city:'上海'

       }，

      actions:{

         changeCity(ctx,city){

           ctx.commit{mutation名,参数}

       }

     }，

     mutations：{

        changeCity（state，city） 

         state。city=city

    }

   })

 

 在根实例main.js 传入 Store  仓库会被派发到各个子组件中子组件取值{{this.$store.state.city}}

 组件派发方法，action 接收  this.$store.dispatch('changCity',city)

 this.$store.commit('ChangeCity',city)调用mutation方法

 

6、vuex优化数据

     import {mapState,mapmutations}   form   ‘vuex’

     在computed属性中增加

     computed：{

        。。。mapState（【‘city’】）   将仓库中的数据映射到名字为city的计算属性中的数组

     }

     使用是就用 this。city

 

     methods:{

      ...mapMutauions(['changeCity'])   将仓库中的mutation方法映射到组件中的changeCity方法

    }