1.国际化
国际化插件:vue-i18n
2.让多行内容显示一行,多余的用...表示
white-space : nowrapoverflow: hiddentext-overflow : ellipsis复制代码
3.显示宽高相等的图片,宽度为屏幕宽度,高度与宽度相等
.image-header position: relative width:100% height: 0 padding-top : 100% img position: absolute left: 0 top: 0 width: 100% height: 100%复制代码
重点是父元素的height设为0,padding-top设为100%
4.转换时间的工具类
/** * Created by solo on 2018/6/6. */export function formatDatetime(date, fmt) { if(/(y+)/.test(fmt)){ fmt = fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4-RegExp.$1.length)) } let obj = { "M+": date.getMonth() + 1, "d+": date.getDay(), "h+": date.getHours(), "m+": date.getMinutes(), "s+": date.getSeconds() } for(let key in obj){ if(new RegExp(`(${key})`).test(fmt)){ let str = obj[key] + '' fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str)) } } return fmt}function padLeftZero(str) { return ("00" + str).substr(str.length)}复制代码
使用
let date = new Date(timestamp)let fmtDate = formatDatetime(date, 'yyyy-MM-dd hh:mm')复制代码
5.给组件绑定原生事件
复制代码
只需要在@click后面加上.native就可以直接处理原生点击事件了
6. vue中组件间传值
6.1 父子组件间传值
- 父组件给子组件传值,直接通过props传值
复制代码
- 子组件给父组件传值,通过 emit发送事件
this.$emit('chooseType', type)复制代码
父组件接收事件:
复制代码
6.2 非父子组件传值
主要通过事件总线传值
在根节点给 Vue 挂载一个空的 Vue 对象
Vue.prototype.bus = new Vue();复制代码
需要发送事件的组件里
this.bus.$emit("change