Vue-component

最新推荐文章于 2024-06-21 11:09:47 发布
最新推荐文章于 2024-06-21 11:09:47 发布
阅读量699 收藏
点赞数
分类专栏： vue component 文章标签： vue component
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/llzkkk12/article/details/78943537
版权

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

Vue data访问

<!-- prop -->

<div style="height: 150px;background: #CCC;margin: 5px;">

<div style="font-size: 20px;">

v2.prop属性</div>

<hr />

<div>

<div>

<comp05 msg="13579"></comp05>

</div>

</div>

</div>

 

<!-- 局部组件 -->

<div style="height: 150px;background: #CCC;margin: 5px;">

<div style="font-size: 20px;">

v1.局部组件</div>

<hr />

<div>

<div>

<comp03></comp03>

</div>

</div>

</div>

 

<!-- 全局组件 -->

<div style="height: 150px;background: #CCC;margin: 5px;">

<div style="font-size: 20px;">

v0.全局组件</div>

<hr />

<div>

<div>

<comp01></comp01>

</div>

</div>

</div>

 

<script>

/* 全局组件 */

Vue.component(

'comp01', {

template: '<h2>自定义组件!</h2>'

}

);

/* 通过 props 把数据传给子组件 */

Vue.component(

'comp05', {

props: ['msg'],

template: '<h4>{{msg}}</h4>'

}

);

new Vue({

el: "#appVue",

data: {

count: 999

},

/* 局部组件 */

components: {

'comp03': {

template: '<h3>自定义组件!</h3>'

}

}

}

 

)

</script>

 

<!DOCTYPE html>
<html style="height: 100%;">

	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="../lib/vue.v2.5.12.js"></script>
		<title>v-xxx</title>
	</head>

	<body style="height: 100%;">
		<style>
			.style0 {
				font-size: 25px;
				color: green;
			}
			
			.style1 {
				background: gold;
			}
		</style>
		<!-- 
			VUE组件
				
			REF:
				http://www.runoob.com/vue2/vue-component.html
				https://cn.vuejs.org/v2/guide/components.html
		-->
		<div id="appVue">
			<!-- prop -->
			<div style="height: 150px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v2.prop属性</div>
				<hr />
				<div>
					<div>
						<comp05 msg="13579"></comp05>
					</div>
				</div>
			</div>			
			
			<!-- 局部组件 -->
			<div style="height: 150px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v1.局部组件</div>
				<hr />
				<div>
					<div>
						<comp03></comp03>
					</div>
				</div>
			</div>			
			
			<!-- 全局组件 -->
			<div style="height: 150px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v0.全局组件</div>
				<hr />
				<div>
					<div>
						<comp01></comp01>
					</div>
				</div>
			</div>
		</div>
		<script>
			/* 全局组件 */
			Vue.component(
				'comp01', {
					template: '<h2>自定义组件!</h2>'
				}
			);
			/* 通过 props 把数据传给子组件 */
			Vue.component(
				'comp05', {
					props:['msg'],
					template: '<h4>{{msg}}</h4>'
				}
			);			
			new Vue({
					el: "#appVue",
					data: {
						count: 999
					},
					/* 局部组件 */
					components: {
						'comp03': {
							template: '<h3>自定义组件!</h3>'
						}
					}
				}

			)
		</script>
	</body>

</html>

REF:

http://www.runoob.com/vue2/vue-component.html

https://cn.vuejs.org/v2/guide/components.html

llzkkk12
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue实战之Vue中组件(component)
9.冄2.7.號的博客
08-01 1万+
es6基本语法及使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue之系列课程</title> </head> <body> <div id="app"> <h1>{{msg}}</h1> <!-- ES6: EcmaScri
Vue组件（Component）
leva的博客
02-08 9576
在正式介绍组件前，先看一个Vue组件的简单示例感受一下，代码如下：组件是可复用的Vue实例，且带有一个名字，在这个示例中组件名字是button-counter。可以在一个通过new Vue创建的Vue根实例中，把这个组件作为自定义标签来使用，代码如下：Web的组件其实就是页面组成的一部分，好比是计算机中的每一个硬件（如硬盘、键盘、鼠标等），它具有独立的逻辑和功能或界面，同时又能根据规定的接口规则进行相互融合，从而变成一个完整的应用。
＜component＞标签的介绍和使用
最新发布
qq_71214810的博客
06-21 2132
在 Vue.js 中，是一个特殊的元素，它允许你动态地绑定到一个组件。这意味着你可以根据某些条件或数据动态地渲染不同的组件. ... 元素有一个特殊的is属性，该属性用于指定要渲染的组件...
VUE-组件（component）
damadashen的博客
05-20 9508
VUE组件介绍
vue-component组件
CAUC_lin的博客
01-27 3676
组件（Component）是自定义封装的功能。在前端开发过程中，经常出现多个网页的功能是重复的，而且很多不同的页面之间，也存在同样的功能。将相同的功能进行抽取,封装为组件,这样，前端人员就可以在组件化开发时，只需要书写一次代码，随处引入即可使用。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象 为一个组件树。
Vue组件(component)
weixin_40123451的博客
09-07 4250
Vue推荐开发方式是：SPA（single page (web) application）单页面web应用，一个应用中只能存在一个vue实例。
vue-component-creator-plugin:通过自动创建的 vue 组件和 vuex 模块简化您的前端开发
05-31
vue-component-creator 一个头脑风暴插件，用于创建带有 Sass 文件的单个文件 vue.js 组件并完成 vuex 模块。 这个插件做了几件事情，以简化您的开发经验。 安装 在插件设置中搜索Vue Component Creator 。 或者从...
vue-component-compiler：将单个文件Vue组件编译为CommonJS模块
02-20
@ vue / component-compiler 用于编译Vue单个文件组件的高级实用程序 该软件包包含高级实用程序，如果您正在为将Vue单个文件组件编译为JavaScript的捆绑器或模块系统编写插件/转换，则可以使用这些实用程序。 在...
Atom-language-vue-component,向atom中的vue组件文件添加语法突出显示.zip
09-18
Atom-language-vue-component.zip,向atom中的vue组件文件添加语法突出显示Atom中支持的单个文件Vue.js组件的语法突出显示（由Vueify或Vue加载程序启用）。,atom是一个用web技术构建的开源文本编辑器。
generator-vue-component-developer:vue组件开发模板
05-13
Vue组件开发项目样板 > A component develop project boilerplate to enable your quick develop your component or directive and publish to npm 项目结构 |-- demo # demo project |-- App.vue # demo ...
前端开源库-fis3-parser-vue-component
08-30
在压缩包`fis3-parser-vue-component-master`中，包含了该插件的源码和相关文档。通过阅读源码，开发者可以了解其内部实现逻辑，这对于自定义插件或者优化现有功能非常有帮助。同时，文档通常会提供详细的使用指南和...
Vue中的component
Huaasshu的博客
02-28 9886
众所周知，Vue框架提供了自定义组件的功能，以便于我们在开发过程中定义自己需要的组件以实现不同的功能，满足不同的需求，增加代码的可复用性。 相信基本的创建组件的方式大家已经熟悉了，今天我来讲一讲component的使用 在Vue中，component可以作为一个占位符使用，就像template一样，不同的是component是组件的占位符，主要用于展示不同的组件，即component就是一个动态组件 :is属性可以用来指定要展示的组件名称，根据is的值来渲染组件 使用方法与普通组件相同，在我的理
【Vue】组件（component）
✈ 正在努力 の 寒江（StudiousTiger) ✌ 呐 ✈
07-13 7663
文章目录一、什么是组件二、为什么需要组件三、创建一个组件四、组件的复用五、通过 Prop 向子组件传递数据六、通过插槽分发内容七、动态组件八、注意事项 一、什么是组件 所谓的组件，其实就是我们通过vue自定义的一些标签。在自定义的标签中，其实已经封装好了一些自定义的特定的HTML代码。 你也许会疑问，为什么要特意的将HTML代码封装起来。其实是这样的，我们使用组件一方面可以减少HTML的代码（视觉上是这样的），另一方面可以极大的提高代码的复用。 你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它
Vue之Vue.component解析
热门推荐
玉案轩窗的博客
12-01 4万+
前言 本篇文章打算分析梳理下Vue提供的创建组件的方法，打开Vue官网，在API中只有Vue.component和Vue.extend提供组件的创建。 严格意义上是这么说，但是在实际项目中常使用局部注册以及文件即组件这种方式来实现开发，这里先不讨论这种方式背后的处理，主要放在Vue.component和Vue.extend这两个API的逻辑处理。 具体梳理 结合简单实例来梳理下整个的处理逻辑，实例...
vue-component
hotboyboy的博客
04-23 327
组件Component vue.extend()：调用vue.extend()创建的是一个组件构造器 通常在创建组件构造器时，传入template嗲表我们自定义组件的模板 该模板就是在使用到组件的地方，需要显示的HTML代码。 当我们通过调用Vue.component()注册组件时，组件的注册是全局的，这就意味着该组件可以在任意vue示例下使用 如果我们注册的组件挂载在某个实例中，那么就是一个局部组件 Hell vue </div&g
vue的组件 Vue.component
qq_42388853的博客
10-31 187
vue的组件 Vue.component 在标签上用v-bin：组件名 =“循环单属性” <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <zsp v-for="item in items" v-bi
Vue全家桶之组件（component）
m0_57002951的博客
03-29 2999
a、全局组件的使用 1）定义组件 2）使用组件 Vue中父组件向子组件传递事件并通过事件子组件传递数据到父组件
vue-flatpickr-component
07-16
vue-flatpickr-component 是一个基于 Vue.js 框架的日期选择器组件。它基于 Flatpickr 库开发，提供了丰富的日期选择功能，并可以灵活地集成到 Vue.js 项目中。 vue-flatpickr-component 具有以下特点和优势： 1. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值