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方法
}