Vue全家桶之一Vue(基础知识篇)
全家桶:Vue本身、状态管理、路由.
异步组件:
去vue文档看一看就行
插槽:
是vue组件封装产生差异化和个性化的唯一解决方案
<slot></slot>-------Vue内置组件
放在html标签里的template可以代替组件定义时里的slot标签(slot标签可以理解为插槽)
slot标签有个默认的属性name为default
<slot name='default'></slot>
若组件中只有一个slot标签,则在引用插槽时,可以不需要写name,如![]()
![](data:image/png;base64,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)
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>
![](https://img2020.cnblogs.com/blog/2080560/202007/2080560-20200714150632612-502800879.png)
过滤后结果为 ¥8989
局部过滤器同理,只对当前组件起作用,
filter:{ };
事件总线:
来自于计算机主板南桥北桥之间数据交流。(数据通信)
( 易被面试官问 )
$on( )监听一个频道
$emit( )向指定频道发送一条消息
做一个聊天的小工具
![](https://img2020.cnblogs.com/blog/2080560/202007/2080560-20200714173421309-567603316.png)
小项目可用,大项目较少见。
单元素/组件的过渡
在vue中叫过渡动画
当插入或删除包含在 transition
组件中的元素时,Vue 将会做以下处理:
-
自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名。
-
如果过渡组件提供了 JavaScript 钩子函数,这些钩子函数将在恰当的时机被调用。
-
如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画,DOM 操作 (插入/删除) 在下一帧中立即执行。(注意:此指浏览器逐帧动画机制,和 Vue 的
nextTick
概念不同)
对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 <transition>,则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">,那么 v-enter 会替换为 my-transition-enter。
![](https://cn.vuejs.org/images/transition.png)
在引入animate动画库时记得style里不能有/* */的注释,否则会报错.
当<transition>标签里有多个标签都要效果,需要加key,不然动画会失效
过渡模式
同时生效的进入和离开的过渡不能满足所有要求,所以 Vue 提供了过渡模式
-
in-out:新元素先进行过渡,完成之后当前元素过渡离开。
-
out-in:当前元素先进行过渡,完成之后新元素过渡进入。