文章目录

1.vue动画1.1 transition1.2 动画钩子函数-实现半场动画（入场动画）1.3 列表动画 2.Vue 创建组件的方式2.1 Vue.extend2.2 Vue.component2.3 使用template标签的id2.4 使用vue实例的components创建私有组件 3.组件中的data和methods4.组件之间的切换方式4.1 v-if 和 v-else 实现两个组件之间的切换4.2 component 标签 5.组件切换动画

1.vue动画

1.1 transition

使用transition元素，把需要动画控制的元素包裹起来,并且给动画的时间点和时间段设置样式

<style> /* *v-enter 进入之前的时间点，元素的起始状态，此时尚未开始进入动画 *v-leave-to 动画离开之后的时间点，离开的终止状态，元素动画已结束 */ .v-enter, .v-leave-to { opacity: 0; transform: translateX(80px);//初始位位置，设置位移量 } /* *v-enter-active 入场时间段 *v-leave-active 离场时间段 */ .v-enter-active, .v-leave-active { transition: all 0.4s ease; } </style> <div id="app"> <input type="button" value="toggle" @click="flag=!flag"> <transition> <h3 v-if="flag">this is H3</h3> </transition> </div>

上面这种方式会将所有的transition包裹的元素添加同样的动画，怎么才能够实现不同的transition实现不同的效果呢，只需要改变transition的’v-'前缀就行，同时给transition添加一个name属性的值，这个name属性的值就对应v-前缀中的v，也就是说v是vue中默认的。比如下面所示：

<style> /* *v-enter 进入之前的时间点，元素的起始状态，此时尚未开始进入动画 *v-leave-to 动画离开之后的时间点，离开的终止状态，元素动画已结束 */ .v-enter, .v-leave-to { opacity: 0; transform: translateX(80px);//初始位位置，设置位移量 } /* *v-enter-active 入场时间段 *v-leave-active 离场时间段 */ .v-enter-active, .v-leave-active { transition: all 0.4s ease; } /* *arvin-enter 进入之前的时间点，元素的起始状态，此时尚未开始进入动画 *arvin-leave-to 动画离开之后的时间点，离开的终止状态，元素动画已结束 */ .arvin-enter, .arvin-leave-to { opacity: 0; transform: translateX(80px);//初始位位置，设置位移量 } /* *arvin-enter-active 入场时间段 *arvin-leave-active 离场时间段 */ .arvin-enter-active, .arvin-leave-active { transition: all 0.4s ease; } </style> <div id="app"> <input type="button" value="toggle" @click="flag=!flag"> <transition> <h3 v-if="flag">this is H3</h3> </transition> <input type="button" value="toggle2" @click="flag2=!flag2"> <transition name="arvin"> <h3 v-if="flag2">this is 2222H3</h3> </transition> </div>

1.2 动画钩子函数-实现半场动画（入场动画）

<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled"> </transition>

只需要写入场钩子函数即可：

<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div class="ball" v-show="addBall"></div> </transition> <script> var vm = new Vue({ el: '#app', data: { addBall: true, flag: false, flag2: false }, methods: { beforeEnter(el) { //动画入场之前设置元素未入场的起始样式 el.style.transform = "translate(0,0)"; }, enter(el，done) { // 动画开始之后的样式，可以设置完成动画之后的结束状态 el.offsetWidth;//这一句必须加否则无过渡效果，还可以写成el.offsetRight/el.offsetTop/el.offsetBottom （写一个就行）。 el.style.transform = "translate(150px,500px)"; el.style.transition = 'all 1s ease';//过渡时间设置为1秒 //如果想让动画执行完立即执行afterEnter需要执行done() done 其实就是afterEnter函数的引用 done(); }, afterEnter(el) { this.flag = !this.flag; } } }); </script>

注意：动画钩子函数的第一个参数el表示要执行动画的DOM元素，是原生的JS DOM 对象即可认为是el = document.getElementById(’’);

1.3 列表动画

在实现列表过渡的时候，如果需要过渡的元素通过v-for循环渲染出来的，不能使用transition包裹，需要使用transition-group，要为v-for循环创建的元素设置动画，必须为每一个元素设置 :key属性

<style> li { border: 1px dashed #999999; margin: 6px; line-height: 38px; padding-left: 6px; font-size: 16px; } li:hover { background-color: lightblue; transition: all 0.4s ease; } .v-enter, .v-leave-to { opacity: 0; transform: translateY(80px); } .v-enter-active, .v-leave-active { transition: all 0.6s ease; } .v-move {//.v-move 和 .v-leave-active 可以设置元素移动时的渐变效果，也就是删除时下面的元素移动的效果 transition: all 0.6s ease; } .v-leave-active {//只设置.v-move 是不行的，还要设置.v-leave-active 为相对定位 position:absolute } </style> <div id="app"> <div> <label> Id: <input type="text" name="" id="" v-model="id"> </label> <label> Name: <input type="text" name="" id="" v-model="name"> </label> <input type="button" value="添加" @click="add"> </div> <ul> <transition-group> <li v-for="item in list" :key="item.id"> {{item.id}} - - - - - - {{item.name}} </li> </transition-group> </ul> </div> <script> var vm = new Vue({ el: '#app', data: { id: '', name: '', list: [{ id: 1, name: '比亚迪' }, { id: 2, name: '布加迪' }] }, methods: { add() { this.list.push({ id: this.id, name: this.name }); } } }); </script>

2.Vue 创建组件的方式

2.1 Vue.extend

使用Vue.extend 创建Vue组件分为两步：

使用Vue.extend 创建一个全局的组件模板对象使用Vue.component(‘组件的名称’,上一步创建的组件模板对象)// 此处组件名称采用驼峰命名在页面中使用上一步组件名称小写且以短横线隔开

示例如下：

<div> <my-Component></my-Component><!--第三步--> </div> <script> //第一步 var comp = Vue.extend({ template:'<h1>这是使用Vue.extend创建的组件</h1>'//通过template属性，指定组件要展示的HTML结构 }); //第二步 Vue.component('myComponent',comp); </script>

注意：template属性里面的模板内容只能有一个跟标签

2.2 Vue.component

Vue.component('myComponent2',{ template:'<h3>这是通过Vue.component 中直接添加一个对象的方式 创建的组件</h3>' });

2.3 使用template标签的id

<div id = "app"> <my-cmp></my-cmp> </div> <template id='atmp'> <div><!-- template 中只能有一个跟标签--> <h4> Hello H4 by template tag </h4> </div> </template> <scritpt> Vue.component('myCmp',{ template: '#atmp';//在vue控制的app之外创建一个带有id的templaget标签，只需要将对应的id传入即可 }) </scritpt>

2.4 使用vue实例的components创建私有组件

在vue实例中添加components,

语法格式：

components:{ '组件名称':模板对象 }

示例如下：

var vm = new Vue({ el:'#app', data: {}, methods:{}, directives:{}, components:{//定义实力内部私有组件 'login':{ //使用的时候只能在app中才能使用<login></login> template:'<h3>这是私有的login组件</h3>'//使用template id的方式也可以的 } } });

3.组件中的data和methods

Vue.component('mycmp',{ template:'<h3>Hello h3 {{msg}}</h3>',//这里msg就是下面的内容 data: function(){ return { msg:'这是组件中的data数据' } } });

组件中的data是一个有返回值，且返回值是一个对象的方法；

将data定义成一个function是为了实现让每个组件实例只用自己的数据，而不会发生多个组件操作同一个数据的问题。

例如：

<body> <div id="app"> <counter></counter> <counter></counter> <counter></counter> </div> <template id="tmp"> <div> <input type="button" value="+1" @click="increament"> <h3>{{count}}</h3> </div> </template> <script> //var dataObj = { count: 0 };//模拟data是一个对象而不是一个方法，这样当上面多个counter操作时，会相互影响 Vue.component('counter', { template: '#tmp', data: function () { //return dataObj;//为了不受影响，将此行注释掉，换成下面的方式 return {count:0};//这样的话就不会相互影响了 }, methods: { increament() { this.count++; } } }) var vm = new Vue({ el: '#app', data: {}, methods: {} }); </script> </body>

4.组件之间的切换方式

4.1 v-if 和 v-else 实现两个组件之间的切换

通过使用v-if和v-else设置为同一个布尔变量来控制组件的显示就可以实现组件视觉上的切换

<div id="app"> <a href="" @click.prevent="flag=true">登录</a> <a href="" @click.prevent="flag=false">注册</a> <login v-if="flag"></login> <register v-else="flat"></register> </div> <scritpt> Vue.component('login',{ template:'<h3> 这是 login</h3>' }); Vue.component('register',{ template:'<h4> 这是register </h4>' }); </scritpt>

4.2 component 标签

Vue提供了component，来展示对应名称的组件。component是一个占位符，:is属性可以用来指定要展示的组件的名称。

<div id="app"> <a href="" @click.prevent="comName='login'">登录</a> <a href="" @click.prevent="comName='register'">注册</a> <component :is="comName"> </component> </div> <script> Vue.component('login',{ template:'<h3>登录组件</h3>' }); Vue.component('register',{ template:'<h3>注册组件</h3>' }); var vm = new Vue({ el:'#app', data:{ comName:'login';//comName是当前component中的 :is绑定的组件的名称 }, methods:{} }); </script>

5.组件切换动画

只需要用transition标签包裹住component就可以了，如下

<style> .v-enter, .v-leave-to{ opacity:0; transform: translateX(150px); } .v-enter-active, .v-leave-active{ transition:all 0.5s ease; } </style> <div id="app"> <a href="" @click.prevent="comName='login'">登录</a> <a href="" @click.prevent="comName='register'">注册</a> <transition mode="out-in"><!-- mode是切换模式 out-in 是当前组件消失后下个组件再进入--> <component :is="comName"> </component> </transition> </div> <script> Vue.component('login',{ template:'<h3>登录组件</h3>' }); Vue.component('register',{ template:'<h3>注册组件</h3>' }); var vm = new Vue({ el:'#app', data:{ comName:'login';//comName是当前component中的 :is绑定的组件的名称 }, methods:{} }); </script>