vue处理用户注册信息

下拉列表、复选框上添加事件处理

处理用户注册信息主要是下拉列表、复选框上添加事件处理，从而实现注册用户时的信息处理。在选择“同意本站协议”复选框之前，“注册”按钮是不可用的。
在设计网页的过程中，合理地添加过渡和动画效果，可以提高用户的体验，帮助用户更好地理解页面中的功能。Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡和动画效果，包括在CSS过渡和动画中自动应用class、使用第三方动画库、在过渡钩子函数中操作DOM等。本章将重点学习创建过渡和动画效果的方法和技巧。
单元素／组件的过渡和动画
Vue提供了transition的封装组件，可以给元素和组件添加进入／离开的过渡效果。
CSS过渡
常用的过渡都是使用CSS过渡。下面是一个没有使用过渡效果的示例，通过一个按钮控制p元素显示和隐藏。

【例1】控制p元素显示和隐藏

   <div id="app">
       <button v-on:click="show = !show">今日秒杀的商品</button>
       <p v-if="!show">葡萄</p>
       <p v-if="!show">西瓜</p>
       <p v-if="!show">苹果</p>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
       const vm= Vue.createApp({
           data(){
             return{
                 show:true
               }
            }
         }).mount('#app');
    </sc

在谷歌浏览器中运行程序，单击“今日秒杀的商品”按钮后的效果如图所示。当单击该按钮时，会发现p标签出现或者消失，但没有过渡效果，给用户体验不太友好。
可以使用Vue的transition组件来实现消失或者隐藏的过渡效果。使用Vue过渡的时候，首先把过渡的元素添加到transition组件中。在Vue中，.v-enter、.v-leave-to、.v-enter-active和.v-leave-active样式是定义动画的过渡样式。
【例2】添加CSS过渡效果

<style>
       /*v-enter-active入场动画的时间段*/
       /*v-leave-active离场动画的时间段*/
       .v-enter-active, .v-leave-active{
            transition: all .5s ease;
        }
       /*v-enter：是一个时间点，进入之前，元素的起始状态，此时还没有进入*/
       /*v-leave-to：是一个时间点，是动画离开之后，离开的终止状态，此时元素动画已经结束*/
       .v-enter, .v-leave-to{
            opacity: 0.3;
            transform:translateY(200px);
       }
</style>
<div id="app">
    <button v-on:click="show = !show">宫词</button>
    <transition><p v-if="!show">一声何满子，双泪落君前。</p> </transition>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const vm= Vue.createApp({
        data(){
          return{
             show:true
           }
        }
     }).mount('#app');

在谷歌浏览器中运行程序，单击“宫词”按钮，显示效果如图10-2所示；再次单击“宫词”按钮，p元素开始过渡到下侧200px的位置，最终透明度为0.3。

过渡的类名

在进入／离开的过渡中，有6个class切换：
（1）v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
（2）v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效（与此同时v-enter被移除），在过渡／动画完成之后移除。
（3）v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡／动画完成之后移除。这个类可以被用来定义进入过渡的过程时间、延迟和曲线函数。
（4）v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
（5）v-leave-to：定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效（与此同时v-leave被删除），在过渡／动画完成之后移除。
（6）v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡／动画完成之后移除。这个类可以被用来定义离开过渡的过程时间、延迟和曲线函数。

一个过渡效果包括两个阶段，一个是进入动画（Enter），另一个是离开动画（Leave）。
进入动画包括v-enter和v-enter-to两个时间点和v-enter-active一个时间段。离开动画包括v-leave和v-leave-to两个时间点和v-leave-active一个时间段。

图过渡动画的时间点

定义过渡时，首先使用transition元素，把需要被过渡控制的元素包裹起来，然后自定义两组样式，来控制transition内部的元素实现过渡。

在上面示例中，如果再想实现一个上下移动的过渡，该如何实现呢？不可能共用同样的过渡样式。
对于这些在过渡中切换的类名来说，如果使用一个没有名字的，则v-是这些类名的默认前缀。上面示例中定义的样式，在所有动画中都是公用的，显然不是我们想要的，transition有一个name属性，可以通过它来修改过渡样式的名称。如果使用了，那么v-enter会替换为my-transition-enter。这样做的好处就是区分每个不同的过渡和动画。