VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >
  • vue学习指南:第六篇(详细) - Vue的组件 component

1. 什么是组件?有两种解释

1. 第一种解释:

什么是组件?

      1. 组件是 vue 中的一个可复用的实例,所以new Vue() 是vue中最大的那个组件(根组件),有名字,使用的时候以单标签或双标签使用。

      2. Vm = new vue() 是最大的组件,具有很多实用性的属性,比如 data,methods,computed等,所以定义的组件也有这些属性。

 

2. 第二种解释:

什么是组件?

      1. 组件的出现就是为了拆分 vue 实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以调用对应的组件即可。

组件化和模块化的不同之处?

模块化:是从代码逻辑的角度,进行划分的,在node是给予模块化的,node没ui界面,node用得最多的是模块化,把代码按照不同的功能进行划分,保证每个模块化的值单一。方便后台代码,分离开发,保证每个功能模块的 值 能单一。

组件化:是从ui界面的角度来划分的,方便ui组件的重用

 

3. 组件的定义

      1. vue 使用 Vue.component() 方法定义组件,这个方法有两个参数,第一个是组件名,第二个是 options对象,这个对象里面有 template,data,methods,computed等属性。

      2. template 是模板,里面是html格式,只能有一个顶层标签。

      3. data 是放数据的,它是一个函数 return 一个对象,数据都放在这个对象离面。

全局注册组件:

      1. Vue.component 第一个参数,组件的名称,将来 在引用组件的时候,就是一个以标签形式来引入它的。

      2. 第二个参数:将Vue.extend 省略掉,直接 {} 创建的组件,其中 template就是组件将来要展示的html内容。

1
2
3
Vue.component('mycom3', {
    template:'#tmp1'
})

3. 属于组件的结构,也要符合定义组件的规则,只能有一个唯一的根元素

1
2
3
4
5
6
<template id="tmp1">
    <div>
        <h1>这是 template 在外部定义的组件结构,这个方式有代码的提示和高亮</h1>
        <h3>好用</h3>
    </div>
</template>

4. 在被控制的 #app 外面 使用咱们的 template 元素定义属性的模板结构

1
2
3
<div id="app">
    <mycom3></mycom3>
</div>

以上都是创建全局的组件,所谓全局就是创建的组件不仅仅,能让你app1能使用,

你再创建个vue根元素也能使用。

  

 

 插件私有组件:

 

组件中的 data 和 实例中的 data 有什么区别?

      1. 组件可以有自己的 data 数据

      2. 组件的 data 和 实例的 data 有点不一样,实例中的data,可以为一个对象,但组件中的data,必须是个方法。

      3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行。

      4. 组件中的 data 数据 使用方法 和 实例中的data 使用方式完全一样。

 

作者:晋飞翔


相关教程