vue深入浅出知识

最新推荐文章于 2024-12-03 11:27:24 发布

置顶 LLLLLLLLLLLLL刘

最新推荐文章于 2024-12-03 11:27:24 发布

阅读量588

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue 知识点

本文链接：https://blog.youkuaiyun.com/weixin_44021910/article/details/91877369

Vue组件

全局注册/局部注册
局部注册组件在子组件中不可用
全局注册的行为必须在根Vue实例创建之前发生
camelCase的属性可以在组件中使用 kebab-case
可以以对象的模式指定每一个 props属性的类型
父级 props的更新会向下流动，反之则不行
由于JavaScript对象和数组是引用传入的，所以当子组件对props的改变将会影响到父组件
props类型校验可以是原生构造对象的中的任意一个，也可以自定义检验类型，通过 instanceof检查
对于绝大多数特性来说，外部传入的值会替换掉组件内部设置好的值，如input的type属性，但有的属性则是会进行合并，如class
inhertAttrs:false设置不希望根元素继承特性，可以使用 $attrs属性来设置继承的目标元素
v-on在设置事件监听器时，会把事件名全部转换成小写，推荐始终使用 kebab-case的事件名
v-model可以使用自定义组件中的 model属性自定义
父组件模板的所有东西都会在父级作用域内编译，子组件的所有内容都会在子组件作用域内编译
插槽( )/具名插槽( <slotname=“header">)/作用域插槽(
slot/slot-scope)
组件可用来缓存被切换后隐藏的组件的状态
$root访问根实例， $parent访问父组件实例(不推荐)
父组件访问子组件，使用 $refs属性来获取设置了 ref属性的子组件
provide属性允许我们指定要分享给后代组件使用的方法，然后后代组件使用 inject属性来获得祖先组件分享的方法(依赖注入)
事件侦听器（ $emit派发的事件）

v-on 指令侦听
$on 侦听一个事件
$once 一次性侦听一个事件
$off 停止侦听一个事件

慎用递归组件

尽量避免组件的循环引用
优先使用 template来定义模板，而不是 inline-template
$forceUpdate来强制更新view
组件包含大量静态内容时，可使用 v-once来标记，缓存静态内容

过渡 & 动画

transition组件控制过渡动画，可以给任何元素和组件添加进入/离开过渡
当插入或删除 transition中的元素时，vue会做如下处理
自动嗅探元素是否使用了css过渡和动画，适当时机添加/删除类名
元素的钩子函数会在适当时机被调用
元素既没有钩子函数也没有css动画，插入和删除操作在下一帧立即执行（浏览器逐帧动画机制）

过渡的类名

v-enter/v-enter-active/v-enter-to
v-leave/v-leave-active/v-leave-to

css动画用法同css过渡，区别是类名 v-enter不会在DOM插入后立即删除，而是在 animationend事件触发时删除
自定义过渡类名，使用以下属性指定:

enter-class/enter-active-class/enter-to-class
leave-class/leave-active-class/leave-to-class
自定义类名优先级高于普通的类名

使用 type属性设置 transition或 animation来申明vue使用的动画类型
transition组件上使用 duration来设置动画执行的时间
可以使用钩子函数

beforeEnter/enter/afterEnter/enterCancelled
beforeLeave/leave/afterLeave/leaveCancelled

钩子函数使用 v-on指令绑定
钩子和结合过渡和动画使用，也可以单独使用
在 enter/leave中，必须使用 done()来进行回调，否则会同步调用，过渡或动画会立即完成
对于纯使用JavaScript来进行的动画，推荐使用 v-bind:css=“false”来取消css的检测，减少css的影响

可使用 apear设置初始渲染的过渡