看了这些，还担心学会不会vue3

一、组件

1.组件就是把复杂项目拆分成简单的组件，可以让团队开发更高效，组件更是我们是可以重复使用的模块。通俗的来说，组件其实就是个小的Vue，它也具有data，methods，watch，computed等！

2.创建一个组件

 下面来看一个注册完整使用的组件吧！（看看你有没有创建成功哦！！！）

二、组件的传参

1.父传子
props
    <steper :value="5">
    steper内部
props:{value:{type:Number,default:1}}
    steper内部使用(只读，不能修改)
this.value 

 ！！！常用值的类型

String     Number    Boolean    Array    Object    Date    Function    Symbol

2.子传父

子传父
emit事件
    在steper内部
this.$emit("numchange",this.num)
numchange事件名称，this.num 事件值
    父组件
<steper @numchange="w1=$event">
$event 就是子组件通过numchange传递过来的值 this.num

下面让我们写一个简简单单的小案例 用一个按钮来控制文字的消失与出现 效果如图

用上面的开关按钮来控制哦！！！ 

 

 下面附加源码图，小伙伴们看看谁做的好哦！！！！

 三、动画

Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。

组件进入和离开 DOM 的钩子 使用内置的 <transition> 组件

如：<button @click="flag=!flag">切换</button> <br>

<transition name="fade">

  <img src="./images/sun.jpeg" alt="" width="120" v-if="flag">

</transition>

 怎么样是不是和我们的css有些区别呢？但是也会有很多很多类似的地方哦！比如关键帧！！

好了看了这么多，小伙伴们都想跃跃欲试了吧！下面让我们写一个好玩的案例，用一个小按钮来控制小太阳的出现与消失吧！ 

这样的哦！！！

 

 下面附加源码和图片哦！