Vue组件第一天

1.什么是组件?

  组件就是一个特殊的Vue实例,所以大部分Vue实例选项在组件中都可以使用

  组件也拥有自己data,methods,computed,watch,

  组件不需要el,组件的模板就是template属性

2.定义组件的方式?

  全局定义,全局定义的组件在任何其他组件中都可以使用,我们把通用公共的组件定义为全局组件

  局部定义,定义在局部组件

  

  组件定义需要在创建

3.定义组件注意L  

  a.组件的名字不要和原生的html标签名重复

  b.组件的data必须是函数   data:function(){ return { foo:'bar'  } }

  c.组件是私有作用域

    外部访问不到组件内部的数据

    组件也访问不到外部数据

  d.组件最后要在视图中使用,所以我们需要在视图中调用组件

  e.从本质上来讲,组件就是让我们拥有了扩展HTML元素,封装可重用的代码

4.定义组件格式

  

  参数1:组件的名字

  参数2:选项对象

   Vue.component("app-header",{

    template:'<h1>我是header</h1>'

  })

5.如何调用组件?

  在html页面中再适合的位置调用下面的代码:

   <app-header></app-header>

6.组件通信:

  组件也提供了通信的能力,也就是输入与输出

7.一个合理的组件化构建的Vue应用应该是这样的:

  a.一个应用仅有一个根Vue实例

    根实例的作用就是用来启动Vue程序,把根组件挂载HTML节点入口

    挂载路由

    ....

  b.一个应用仅有一个根组件

8-0:组件树:

  在vue实例上有一个选项就是components,这个属于组件的根组件 ,然后可以在这个根实例里有可以设置组件对象,之前的App就是组件名,template就是组件的模板,所有的到html代码都必须放到template模板中

  注意:Vue也有template模板,实例模板会把el节点给替换掉了

     Vue中data属性必须是一个函数形式,所需要的属性通过return返回出去

      一定要将App根组件注册给根实例

      通过template将代码块放视图,template是组件选项对象

  

8.项目流程(组件):

原文地址:https://www.cnblogs.com/md-lw/p/8708763.html