关于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方法

}