Vue 开发经验小记

栏目: 编程语言 · 发布时间: 5年前

内容简介:重点是父元素的使用只需要在
white-space : nowrap
overflow: hidden
text-overflow : ellipsis
复制代码

3.显示宽高相等的图片,宽度为屏幕宽度,高度与宽度相等

<div class="image-header">
  <img :src="food.image"/>
</div>

.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.给组件绑定原生事件

<custom @click.native='handleClick'></custom>
复制代码

只需要在 @click 后面加上 .native 就可以直接处理原生点击事件了

6. vue中组件间传值

6.1 父子组件间传值

  • 父组件给子组件传值,直接通过 props 传值
<custom content="hello world"></custom>
复制代码
  • 子组件给父组件传值,通过 emit 发送事件
this.$emit('chooseType', type)
复制代码

父组件接收事件:

<custom content="hello world" @chooseType="handleType"></custom>
复制代码

6.2 非父子组件传值

主要通过事件总线传值

在根节点给 Vue 挂载一个空的 Vue 对象

Vue.prototype.bus = new Vue();
复制代码

需要发送事件的组件里

this.bus.$emit("change", params)
复制代码

接收事件的组件

this.bus.$on("change", (msg) => {
    //do yourself work
})
复制代码

7. 动态组件

动态切换显示的组件

<component :is='type'></component>

data(){
	components:{
        component-one,
        component-two
	}
    return{
        type: 'component-one'
    }
}
复制代码

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

8. v-once 指令

只渲染元素和组件 一次 。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>
复制代码

9.过渡和动画

9.1 过渡

.fade-enter-active, .fade-leave-active{
	transition: opacity 2s
}
.fade-enter, .fade-leave-to{
	opacity: 0
}
复制代码

9.2 动画结合 Animate.css

//引入 animate.css
<link rel="stylesheet" type="text/css" href="animate.css">

//布局
<transition enter-active-class="animated bounce" leave-active-class="animated shake">
	<p v-if="show">hello world</p>
</transition>
<button @click='toggleShow'>toggle</button>
复制代码

要定义 enter-active-classleave-active-class 的类名,且必须有 animated ,想要什么动画效果就写在第二个位置上

解决第一次显示没有动画的bug

<transition 
	appear 
	enter-active-class="animated bounce" 
	leave-active-class="animated shake" 
	appear-active-class="animated bounce">
	<p v-if="show">hello world</p>
</transition>
复制代码

<transition> 上添加 appearappear-active-class 即可。

9.3 同时使用过渡和动画

<transition 
    name="fade"
    type='transition'
    appear 
    enter-active-class="animated bounce fade-enter-active" 
    leave-active-class="animated shake fade-leave-active" 
    appear-active-class="animated bounce">
    <p v-if="show">hello world</p>
</transition>
复制代码

enter-active-classleave-active-class 加上相应的类名 fade-enter-activefade-leave-active ,然后在样式中定义过渡效果即可。

.fade-enter-active, .fade-leave-active{
	transition: opacity 2s
}
.fade-enter, .fade-leave-to{
	opacity: 0
}
复制代码

动画执行的总时长是根据动画还是过渡来定呢?可以手动指定:

//指定整体动画时间为过渡动画时间
type='transition'
复制代码

还可以自己指定动画总时长:

//指定动画时长为10秒
:duration="10000"

//分别指定进场时长5秒和出场动画时长10秒
:duration="{enter: 5000, leave: 10000}"
复制代码

9.4 多个组件和元素的过渡

  • 多个元素过渡
<div id="app">
	<transition name="fade" mode="out-in">
		<div v-if="show" key="hello">Hello world</div>
		<div v-else key="bye">Bye world</div>
	</transition>
	<button @click="toggleShow">Add</button>
</div>
复制代码

需要给元素加 key , 防止vue复用元素导致没有动画效果。

可以指定切换模式, mode="out-in" :先出后进, mode="in-out" :先进后出

  • 多个组件过渡跟多个元素过渡类似

9.5 vue中列表过渡

使用 transition-group 属性

<div id="app">
	<transition-group name="fade">
		<div v-for="item in list" :key="item.id">
			{{item.title}}
		</div>
	</transition-group>
	<button @click="add2List">Add</button>
</div>


<style type="text/css" >
	.fade-enter-active, .fade-leave-active{
		transition: opacity 2s
	}
	.fade-enter, .fade-leave-to{
		opacity: 0
	}
</style>
复制代码

10. img 标签的 src 动态绑定

路径前加 require()

<img :src="bookingManageImg" slot="icon"/>

bookingManageImg(){
    return this.selectedTab === "bookingManage" ? 	require('../assets/manage_focus.png') : require('../assets/manage_normal.png')
},
复制代码

11. vuex 在页面刷新后状态丢失解决办法

刷新页面后,存在 vuex 的数据会丢失,给调试带来不便。把用户的登录信息放到 sessionStorage 中避免丢失。

const USER_INFO = "userInfo";

export default new Vuex.Store({
  state: {
    userInfo: JSON.parse(sessionStorage.getItem(USER_INFO))
  },
  mutations: {
    setUserInfo(state, userInfo){
      //存储到 sessionStorage 中以防刷新页面后状态丢失
      sessionStorage.setItem(USER_INFO, JSON.stringify(userInfo));
      state.userInfo = userInfo
    }
  }
}
复制代码

以上所述就是小编给大家介绍的《Vue 开发经验小记》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

HTML5+CSS3精致范例辞典

HTML5+CSS3精致范例辞典

杨东昱 / 清华大学出版社 / 2013-1 / 48.00元

《HTML5+CSS3精致范例辞典(全彩印刷)》是专为希望成为网页设计师的学习者打造的工具书,书中详细说明了设计网页所需的HTML标记语言,对HTML5的网页标签规范作了完整说明,如元素标签的功能、属性以及如何使用等。有了基本网页制作能力,如何让网页更出色,版面更富变化、更易维护管理,那就得靠CSS帮忙了。《HTML5+CSS3精致范例辞典(全彩印刷)》还详细解说了最新CSS3的样式元素,除了说明......一起来看看 《HTML5+CSS3精致范例辞典》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

在线进制转换器
在线进制转换器

各进制数互转换器

URL 编码/解码
URL 编码/解码

URL 编码/解码