Vue基础3（组件与动画）

接上

组件

        组件的作用

                1.组件是Vue的一个重要特点

                 2.实现了多人协作开发

                3.通过组件划分降低开发难度

                4.实现复用，降低重复劳动

        组件的解释

                组件就是定义好的功能模块

                （建议：多用props，少在组件中使用data。这样可以降低组件的耦合性，提高组件的复用性）

        组件的定义和使用

                1.定义

                        注意：template有且只有一个根节点

                        const steper={template：`<span></span>`}

                2.在父组件中注册

                        components：{steper：steper}

                3.在组件的模板中使用

                        <steper></steper>

        传参

                父传子：

                        父         <model   :visible="visible">

                        子         props:{ ​visible:{type:Boolean,default:false} ​}

                        子使用          注意 vue是单向数据流，父组件传递给子组件的props是只读的（不能修改） this.visible

                子传父：

                        子     this.$emit('updata:visible',false)

                        父     监听事件，修改值 <model @updata:visible="visible=$event"></model>

        插槽

                插槽是：组件的嵌套内容

                父   <modal> <input> <button>确认</button> ​</modal>

                子组件    模板中使用     

                        template：`<div><slot></slot></div>`

动画

        动画就是两个状态形成的过度

        进入和离开                v-show        v-if

        transition   单个动画元素

                属性  ：

                        name  名称

                        enter-active-class=“fadeln animated”   指定进入的class

                        leave-active-class = “”    指定离开的class

                产生状态与类

                        v-enter-active   进入整个状态

                                v-enter  进入的开始状态

                                v-enter-to   进入的结束状态

                        v-leave-active   离开的整个状态

                                v-leave     离开的开始状态

                                v-leave-to         离开的结束状态

        transition-group    动画组

                属性   tag 

                         表示用什么标签包裹所有的动画组元素

                产生状态与类

                        除与transition 相同的以外还有  v-move   正在移动中的元素