内容简介:重点是父元素的使用只需要在
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-class
和 leave-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>
上添加 appear
和 appear-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-class
和 leave-active-class
加上相应的类名 fade-enter-active
和 fade-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精致范例辞典
杨东昱 / 清华大学出版社 / 2013-1 / 48.00元
《HTML5+CSS3精致范例辞典(全彩印刷)》是专为希望成为网页设计师的学习者打造的工具书,书中详细说明了设计网页所需的HTML标记语言,对HTML5的网页标签规范作了完整说明,如元素标签的功能、属性以及如何使用等。有了基本网页制作能力,如何让网页更出色,版面更富变化、更易维护管理,那就得靠CSS帮忙了。《HTML5+CSS3精致范例辞典(全彩印刷)》还详细解说了最新CSS3的样式元素,除了说明......一起来看看 《HTML5+CSS3精致范例辞典》 这本书的介绍吧!