vue开发总结

vueCLI 区分开发测试、正式、环境

常用指令

常用指令	描述
{{}}	插值表达式
v-cloak	解决 插值表达式闪烁的问题
v-text	和插值一样也是使用vue中的变量，但是默认没有闪缩问题，但是会覆盖原本的内容，插值不会
v-html	显示HTML的内容
v-bind	Vue提供的属性绑定机制，单项绑定，M层绑定V层，缩写是 ‘:’
v-model	Vue提供的属性绑定机制，双向绑定，M层绑定V层，V层绑定M层
v-on	Vue提供的事件绑定机制，缩写是:’@’
v-if	每次都会重新删除或创建元素，有较高的切换性能消耗，如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show
v-show	每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式，有较高的初始渲染消耗，如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if
v-for	针对数据为数组的类型，循环的使用 (如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值)

事件修饰符

修饰符	说明
.stop	阻止冒泡
.prevent	阻止默认事件
.capture	添加事件侦听器时使用事件捕获模式（谁有该事件修饰符，就先触发谁）
.self	只当事件在该元素本身(比如不是子元素)触发时触发回调
.once	事件只触发一次

数组常用的循环方法

循环方法	说明
forEach	不可终止循环
some	返回true终止循环
findIndex	返回true可以终止循环，返回满足条件的索引
filter	过滤数组，返回过滤后的数组

过渡动画

要使用过渡动画效果的元素 必须被 transition标签包裹

过渡类名	说明
v-enter	这是一个时间点,是进入之前，元素的起始状态，此时还没有开始进入
v-enter-active	入场动画的时间段
v-enter-to	入场结束的时间点
v-leave	离场动画开始的时间点
v-leave-active	离场动画的时间段
v-leave-to	这是一个时间点,是动画离开之后，离开的终止状态，此时，元素 动画已经结束了

钩子函数	说明
v-on:before-enter=“beforeEnter”	入场动画之前执行beforeEnter方法
v-on:enter=“enter”	入场过程中执行的方法
v-on:after-enter=“afterEnter”	入场后执行的方法
v-on:enter-cancelled=“enterCancelled”	入场动画取消的时候执行方法
v-on:before-leave=“beforeLeave”	离场动画之前执行beforeLeave方法
v-on:leave=“leave”	离场动画过程中执行的方法
v-on:after-leave=“afterLeave”	离场结束后执行的方法
v-on:leave-cancelled=“leaveCancelled”	离场动画取消时执行的方法