vue学习笔记

在进入/离开的过渡中，会有 6 个 class 切换。
v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入一帧后生效 (与此同时 v-enter 被删除)，在 transition/animation 完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (与此同时 v-leave 被删除)，在 transition/animation 完成之后移除。

v-enter和v-leave相当于初始化,也就是一开始的状态
v-enter-active和v-leave-active则会在开始到结束之间的这段时间进行动作
v-enter-to和v-leave-to则是结束时候的状态

vue过渡的重点:
transition: width.5s;
使用width作为参数时是没有过渡的

需要使用translateX这些css参数才行.

vue默认enter-to的透明度是1,就算手动设置enter-to,其最终值也会是1

leave是动画从显示到不显示的转变
enter则是动画从不显示到显示的转变

v-if和v-show:
他们都是不监听函数的,所有需要在data中设置让他们监听的值.

iframe的地址问题:
如果不确定iframe的src是基于那个地址的,可以在各个文件层级写一个index.html,看看最后会寻找到那一个

单页vue导入组件的问题:
文件名与组件名会有一个对应关系,比如文件名是aAndB,那么组件名就应该是a-and-b,否则vue就会找不到组件.

vue组件不响应对象数据的更新

那是因为传递的对象没有get,set属性.
使用Vue.set即可将其转换为响应式属性.

监听vuex中的数据变化

这需要watch与computed的配合,就像这样:

    watch:{
      bulk_purchase:function () {
        console.log('watch',this.$store.getters.getElBottomHeight.bulk_purchase);
      }
    },
    computed:{
      bulk_purchase:function () {
        this.set_content_sub_height();
      }

vue-router懒加载

如下书写即可

const test1 = () => import('../test1');
const test2 = () => import('../test2');

export default new Router({
  routes: [
    {
      path:'/test1',
      name:'test1',
      component:test1
    },{
      path:'/test2',
      name:'test2',
      component:test2
    }
  ]
})

最后编辑于：2018.08.19 17:58:44