使用 vue 开发过程中遇到的问题或知识点总结, 持续更新中...
1. 国际化
国际化插件: vue-I18N
2. 让多行内容显示一行, 多余的用... 表示
- 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
- }
- }
- }
12. 返回记住滚动条位置
详细解析见文章: Vue 返回记住滚动条位置详解
来源: https://juejin.im/post/5c7deb78f265da2dbc59ae00