vue学习指南:第六篇(详细) – Vue的组件 component_哒哒_前端开发者

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

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

1. 第一种解释:

1. 第一种解释:

什么是组件?

什么是组件?

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

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

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

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

 

2. 第二种解释:

2. 第二种解释:

什么是组件?

什么是组件?

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

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

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

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

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

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

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

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

 

3. 组件的定义

3. 组件的定义

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

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

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

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

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

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

全局注册组件:

全局注册组件:

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

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

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

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

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

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

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

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

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

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

<div id="app">
	<mycom3></mycom3>
</div>
<div id="app">
	<mycom3></mycom3>
</div>

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

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

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

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

  

 

 插件私有组件:

 插件私有组件:

 

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

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

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

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

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

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

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

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

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

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

 

作者:晋飞翔

作者:晋飞翔

手机号(微信同步):17812718961

手机号(微信同步):17812718961

希望本篇文章 能给正在学习 前端的朋友 或 以及工作的朋友 带来收获 不喜勿喷 如有建议 多多提议 谢谢!

希望本篇文章 能给正在学习 前端的朋友 或 以及工作的朋友 带来收获 不喜勿喷 如有建议 多多提议 谢谢!

  

  

 

» 本文来自:前端开发者 » 《vue学习指南:第六篇(详细) – Vue的组件 component_哒哒_前端开发者》
» 本文链接地址:https://www.rokub.com/73322.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!