vue 函数返回两个值_Vue 开发经验小记（持续更新）

使用 vue 开发过程中遇到的问题或知识点总结，持续更新中…

最近更新：2019-11-29

1.国际化

国际化插件：vue-i18n

2.强制换行与禁止换行

让多行内容显示一行，多余的用...表示

white-space : nowrap

overflow: hidden

text-overflow : ellipsis

复制代码

内容超过宽度时强制换行

overflow: hidden;

word-wrap:break-word;

overflow-wrap: break-word;

复制代码注：CSS3中将 改名为 ，用时最好两个都写上

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')

复制代码

也可以使用第三方的库： moment.js 、dayjs

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", params)

复制代码

接收事件的组件

this.bus.$on("change", (msg) => {

//do yourself work

})

复制代码

7. 动态组件

动态切换显示的组件

data(){

components:{

component-one,

component-two

}

return{

type: 'component-one'

}

}

复制代码

是vue官方提供的标签，通过更改 is 指向的子组件名来动态切换组件。

8. v-once 指令

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态