分类 技术文章 下的文章

接触Vue以来,觉得Vue的文档不太友好,知识点太碎片化,可能一个重要的知识点仅仅在文中提一下,但不会出现在索引中。文档读起来也比较晦涩。

有一个router-view

<router-view class="content"></router-view>

假设下面的组件会渲染到上面的router-view中:

<template>
    <div class="box">
        ...
    </div>
</template>

- 阅读剩余部分 -

Vue中的混入(mixin)是一个比较简单的知识点。熟悉CSS预处理语言比如lesssass的开发者对mixin肯定很熟悉。Vue中的mixin几乎跟less等里面的mixin一样,都是将定义好的一些功能原样注入Vue组件当中,也有些类似面向对象编程中的继承(我只是说类似:) )。

mixin是一个对象,这个对象的属性可以是Vue实例或者组件实例的生命周期钩子、属性等,当全局混入或者混入到组件后,Vue实例或者组件实例就拥有了mixin中定义的生命周期钩子、属性等等。如果两者中有重复的,会按照一定的规则合并。

- 阅读剩余部分 -

这里以通过Vue Router切换不同组件来说明transition的用法。
app.vue中有一个配置了切换效果的<router-view>

...
<transition :name="transitionStyle">
    <router-view class="content" />
</transition>
...

由于要实现组件切换的前进后退效果,所以transitionname是动态绑定的,这里不讨论如何实现前进后退,只讨论其中的前进。

想要当前组件向左滑出去的同时,即将显示的组件从右滑动进来,就像iOS版本的微信的左滑切换效果。

很多初学者发现,按照文档设置了相应的class之后,组件之间的切换会出现空白,实际上这就是Vue的文档没有描述清楚的地方。


- 阅读剩余部分 -

Vue官方文档:https://cn.vuejs.org/v2/guide/custom-directive.html

什么是Vue自定义指令?

Vue自定义指令用起来就像Vue内置的v-modelv-on...之类,只不过实现了一些自己想要的功能。因为Vue自定义指令的钩子函数会传入一个el,它是自定义指令绑定到的那个DOM元素,所以Vue自定义指令可以用来直接和DOM打交道。

如何注册一个指令?

自定义指令分为全局和组件内的局部指令。全局自定义指令注册方法:

Vue.directive('myDirective', {
    // inserted是内置的钩子函数
    inserted: function (el) {
        // 一些操作...
    },
    // 指令的其他内容和钩子函数,如果需要的话...
})

- 阅读剩余部分 -

MDN上的apply介绍: apply- MDN

apply()方法的第二个参数除了可以是数组外,从 ECMAScript 第5版开始,还可以是一个类数组对象:

从 ECMAScript 第5版开始,可以使用任何种类的类数组对象,就是说只要有一个 length 属性和(0..length-1)范围的整数属性。例如现在可以使用 NodeList 或一个自己定义的类似 {'length': 2, '0': 'eat', '1': 'bananas'} 形式的对象。

- 阅读剩余部分 -

在使用Vue Router配置了异步组件后,即使没有激活这些异步组件,在浏览器中仍然可以看到请求这些组件。比如下面的配置:
router.js:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/Chat',
      name: 'Chat',
      component: () => import( /* webpackChunkName: "Chat" */ './views/Chat.vue')
    }
  ]
})

- 阅读剩余部分 -

iOS有很多独特(奇怪)的表现,最近在做一个H5页面时,遇到了真机上滑动不流畅的问题。查阅资料得知,可以给带滚动条的那个元素设置-webkit-overflow-scrolling: touch解决这个问题,但设置之后依然如故。最后经过实验,必须给滚动元素显式的设置overflow: auto|scroll才能解决这个问题。
具体原理留待空闲时研究。

image组件底部有空白,这可能是小程序自身的bug,对image设置vertical-align为任意值即可消除。


更新时间:2019-06-22

一直以来对小程序image组件底部空白的理解是错误的,以前以为是inline-block元素底部自带的一点空白,现在在用到image的时候发现其实不是的。

小程序image组件有一个默认的高度:240px,如果image组件不设置mode,并且高度不够240px,底部就会出现空白。

消除image组件空白有两种方法:设置合适的mode、设置固定高度

比如,要图片宽度是100%,高度自适应,就可以这样设置:

<image mode='widthFix' src='xxxx.png'></image>

经过实验发现,给image设置height: auto会导致图片高度为0,所以不能通过重置高度来消除空白,只能设置固定的高度,比如:height: 100%height: 40px等。


更新时间:2019-06-26

image垂直排列的时候,image的宽度是100%modewidthFix,底下依然会有空白,这就是我在开头的时候遇到的情况了。