Vue全家桶之一Vue(基础知识篇)

全家桶:Vue本身、状态管理、路由.

 

异步组件:

    

去vue文档看一看就行

 

插槽:

是vue组件封装产生差异化和个性化的唯一解决方案

<slot></slot>-------Vue内置组件

放在html标签里的template可以代替组件定义时里的slot标签(slot标签可以理解为插槽)

 

slot标签有个默认的属性name为default

<slot name='default'></slot>

若组件中只有一个slot标签，则在引用插槽时，可以不需要写name，如

 

 

 

v-slot :  title ----------->对应组件定义时里template里的<slot name=' title '></slot>

v-slot: title ------简写#title

slot还可以传值，

 

 

 

mixin    混入(注入)

react已经没有混入了.

可以让根组件和子组件都有mixin里的属性

包括周期函数，data，methods等等.

 

局部混入(给组件添加选项--mixins:[这里放局部混入])

若混入的变量和本身的变量冲突了，局部优先，类似于Javascript定义.

 

 

 

 

自定义指令:

Vue.directive( ' 指令的名字 ' ,{

    inserted:function( el , binding ){

        el.style.color=binding.value;

    }

})

上面指挂载的节点，

指令也可以局部，写在组件内部即为局部指令.

一个指令定义对象提高几个特有的钩子函数：

①：bind：只调用一次，在指令第一次绑定到元素时调用。(一般可放一次性的初始化设置)

②：inserted：被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已被插入到文档中)

③：update： 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

④：componentUpdated:指令所在组件的VNode及其子VNode全部更新后调用.

⑤：unbind：只调用一次，指令与元素解绑时调用。

 

自定义指令里的钩子函数的参数：

 

 

 

过滤器:

Vue.filter('rmb',function(value){

    return '￥'+value.toFixed(0);

})

在html里用双大括号文本插值，

<h1>{{   goods.price  |  rmb     }}</h1>

 

过滤后结果为  ￥8989

局部过滤器同理，只对当前组件起作用，

filter:{        };

 

 

事件总线：

来自于计算机主板南桥北桥之间数据交流。（数据通信）

( 易被面试官问 )

$on( )监听一个频道

$emit( )向指定频道发送一条消息

做一个聊天的小工具

小项目可用，大项目较少见。

 

 

 

单元素/组件的过渡

在vue中叫过渡动画

当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

1. 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。

2. 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。

3. 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

在引入animate动画库时记得style里不能有/*    */的注释，否则会报错.

 

 

当<transition>标签里有多个标签都要效果，需要加key，不然动画会失效

 

过渡模式

同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了过渡模式

• in-out：新元素先进行过渡，完成之后当前元素过渡离开。
• out-in：当前元素先进行过渡，完成之后新元素过渡进入。