Vue组件化开发

一.如何创建Vue全局组件

特点：在任何一个Vue控制的区域都能使用
1.创建组件构造器
注意点：创建组件模板的时候只能用一个根元素

// 创建构造器
  let Profile = Vue.extend({
    template: `
      
          
          我是描述信息
      
  `,
  })

2.注册已经创建好的组件
第一个参数：指定注册组件的名称
第二个参数：指定组件的构造器

Vue.component('abc', Profile)

3.使用注册好的组件

二.创建Vue全局组件的简写方式

第一种：注册组件，传入一个选项对象

第二种：

弊端：把模板编写在字符串模板中没有代码提示

第三种：

三.如何创建Vue局部组件

特点：只能在自定义的那个Vue实例中使用

四.自定义组件中data和methods和Vue实例中data和methods的区别

前提：
由于Vue实例控制的区域相当于一个大的组件, 在大组件中我们可以使用data和methods
而我们自定义的组件也是一个组件, 所以在自定义的组件中自然也能使用data和methods

Vue实例中data和methods


    
    
    
    {{appMsg}}

自定义组件中data和methods

为什么自定义组件中的data必须是一个函数？
自定义组件中的data如果不是通过函数返回的，那么如果同时使用多个相同的自定义组件，就会造成数据混乱的问题；
自定义组件中的data是通过函数返回的，那么每创建个新的组件，都会调用次这个方法将这个方法返回的数据和当前创建的组件绑定在一起，这样就有效的避免了数据混乱;

效果：

五.组件的切换

通过v-if/v-else来切换组件的显示隐藏
对于普通的元素我们可以通过v-if来实现切换,对于组件我们可以通过v-if来实现切换
因为组件的本质就是一个自定义元素
另外，通过v-if /v-else来切换组件不能保存组件的上一次的状态

效果:

动态切换组件
1.利用v-if/v-else-if/v-else的方法确实可以切换组件,但Vue组件中还有一种更加专业的方式:

2.当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题,为了解决这个问题,我们可以用一个元素将其动态组件包裹起来。通过元素包裹动态组件，能够让它第一次被创建的时候缓存下来。

效果：

六.如何给组件添加动画

1.如何添加组件动画
给组件添加动画和过去给元素添加动画一样
如果单个组件就用transition
如果多个组件就用transition-group
2.过度动画注意点：
默认情况下进入动画和离开动画是同时进行的，如果想要一个做完再做另一个，就需要指定动画模式
3.Vue 提供了过渡模式:
in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。

效果：