2020/7/31 vue 复习

Vue动画

看图可知 v-enter与v-leave-to样式可以写在一起

               v-enter-to与v-leave样式可写在一起

 

v-if比较懒，要是为false 都不会在代码中，为true就会创建出来，为false就会销毁掉

v-show 是通过样式display:none来切换显示与隐藏的

频繁切换：v-show   很少切换v-if

 

需要被动画控制的元素用<transition>标签包裹起来

 

修改v-前缀

如果标签定义了name属性 那么动画前缀就用.name- (这样类属性变为专有的),不在用.v-

.v-会被所有transition里动画公用

 

注意：script标签 写js代码的时候 src为空就要删掉不然会导致里面的js文件失效

 

引入第三方类animated.css动画的使用：

在enter-active-class要加原始类animated 再选择动画的形式 动画进去的前半场： bounceIn

 在需要动画的元素中加入原始类同样可以，俩者等价：

绑定属性duration来统一控制动画入场离场是时间

属性值以对象的方式来分别设置进场和离场的时间

 

前面不管是用v-enter这种方法，还是用第三方库都无法实现半场动画（过来了就必须得回去） 如加入购物车的小球这类半场动画就无法实现，就用钩子函数来实现（动画生命周期函数与vue生命周期函数类似）

半场动画就写入场的动画函数就行

动画钩子函数第一个参数el表示要执行的dom元素，是原生的dom对象 可以认为el是通过 document.getElementById(‘’) 获取到的  与自定义指令中的el一样就是指代的绑定这个方法的元素

 

动画效果出不来，要加一个el.offsetWidth/ el.offsetHeight/ el.offsetLeft/ el.offsetRight 来强制刷新动画，才会出来动画效果，否则只是一个状态到另外一个状态，没有过程

 

enter(leave)函数中的第二个参数done(形参名自己定义)，调用done() 相当于直接调用afterEnter() 防止有延迟 从enter到afterEnter时间太久  但是将done()改为afterEnter(el)手动调用还是无效，所以用done就好了

 

为什么下次点击的时候，小球又从原来的地方开始，不是在200px,200px位置消失的吗？

因为beforeEnter作用 每次点击都会开始一个新的动画周期函数，都会从初始的0,0位置

 

 

 

在使用列表过度的动画的时候，如果过渡到元素通过v-for循环渲染出来的不能用transition标签包裹，需要使用transitionGroup

用transitionGroup标签的时候（v-for循环创建的元素）一定要给每个子元素添加:key属性

 

列表删除动画：(有意思)

 19.列表动画.html

.v-move: 删除时，下面列表顶上去的动画

但是必须在.v-leave-active中加

position：absolute，不然顶上去是没有缓动动画的，因为位置被占据了

但是移除的列表项因为设置absolute原因导致消失的的时候变小，所以给li  加  width:100%;

 

 

 

在这列加appear 实现了 刚进入页面 数据飘上来的效果（入场效果）

 

 

transition-group中 tag属性设置标签 ，不设置会默认以span便签，这样span便签里面要是有块级元素，就不符合w3c规范  于是：将外面ul去掉，设置transition-group中的tag=’ul’

 

设置后：更符合规范

 

如果不设置：(transiition-group自动生成span标签，这样span里面有块元素，不规范)

 

 

Vue组件：

很多页面结构类似，前端的组件化，减少代码提高重用

根据组件名称来用标签的形式来引用，其中template属性就是组件将来要展示的内容

 

用myCom1命名+》     <my-com1>

用mycom1 命名+》     <mycom1>

 

或者直接将Vue.extend写到Component中去

以上是创建全局组件的第一种方式

 

创建全局组件的第二种方式：将Vue.extend省去

 

注意： 不论是哪种方式创建出来组件，组件模板中内容template属性指向的模板内容，只能有且只有一个根元素 好比在一个页面中，只有一个HTML标签作为根元素 ，所以这里要将<h3>和<span>用<div>标签包裹起来 根元素就一个<div>

 

创建全局组件的第三种方式

前俩种写html不提示，于是第三种将 <template>标签定义在控制区#app外面 Vue.compontent属性值直接为标签的id

 

通过对象字面量定义组件模板

 

自定义私有组件：