Vue组件实例

最新推荐文章于 2025-06-22 21:51:52 发布

原创

最新推荐文章于 2025-06-22 21:51:52 发布 · 3.4k 阅读

11 ·

CC 4.0 BY-SA版权

本文介绍了Vue组件的动画效果过渡模式，包括相同标签名、多个元素和组件的过渡。详细讲解了Vue生命周期中的created和mounted钩子。还讨论了渲染函数与JSX的使用，过滤器的文本格式化，表单验证的实现，自定义滚动事件的创建，以及通过axios访问API的方法和注意事项。示例代码展示了各种功能的实际应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 动画效果过渡模式

相同标签名的元素切换


<div id="demo">
 <transition>
   <button v-bind:key="isEditing" v-on:click="isEditing = !isEditing">
     {
  
  {isEditing ? 'save' : 'edit'}}
   </button>
 </transition>
</div>
<script>
new Vue({
 el:'#demo',
 data:{
    isEditing:true
 }
})
</script>

效果如下：
在这里插入图片描述

多个元素的过渡,可重写为绑定了动态属性的单个元素过渡

<div id="demo2">
 <transition name="fade" mode="out-in">
  <button v-bind:key="docState" v-on:click="rever">
    {
  
  { buttonMessage }}
  </button>
 </transition> 
</div>  
<script>
new Vue({
 el:'#demo2',
 data:{
    docState:0
 },
 methods: {
   rever:function(){
      this.docState += 1;
      if(this.docState > 2){
         this.docState = 0
       }
    }
 },
 computed: {
   buttonMessage:function(){
      switch(this.docState) {
        case 0: return '按钮一';
        case 1: return '按钮二';
        case 2: return '按钮三';
       }
     }
    }
})
</script>
<style>
   .fade-enter-active,.fade-leave-active{
     transition:all 0.3s ease;
   } 
   .fade-leave-active{
     opacity:0;
     transform: translateX(10px);
   }

</style>

效果如下：
在这里插入图片描述

多个组件的过渡，也可以使用动态组件，不需要使用 key 特性。

 <div id = "demo">
          <input type="radio" value="A" id="a" name="boy" v-model="view">
          <label for="a">A</label>
          <input type="radio" value="B" id="b" name="boy" v-model="view">
          <label for="a">B</label>
          <p>选择结果：{
  
  {view}}</p> 
          <transition name="fade" mode="out-in">
              <component v-bind:is="view"></component>
          </transition>
 </div> 
<script>
          new Vue({
            el:'#demo',
            data:{
              view:'A'
            },
            components:{
              'A':{
                template:'<div>模块 A</div>'
              },
              'B':{