Vue 组件(全局+局部)

原来 Vue 这么简单!!! - - - vue组件

Vue_组件

1.思维导图:
在这里插入图片描述
Vue中的组件
1.组件(Component)是 Vue.js 最强大的功能之一;
2.组件可以扩展 HTML 元素,封装可重用的代码;

Vue视图层的灵魂 — 组件化
所谓组件化,就是把页面拆分成多个组件,每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。

代码:
第一部分:引入vue.js(不可或缺!!!)

<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue.min.js" ></script>

第二部分:HTML部分

<body>
		<div id="app">
			<my-cpn></my-cpn>
		</div>
	</body>

第三部分:js部分(1、创建组件构造器对象

const cnp = Vue.extend({
			template:`
			     <ul>
			        <li>XXXXX</li>
			        <li>XXXXXXX</li>
			        <li>XXXX</li>
			        <li>XXXX</li>
			        <li>XXXX</li>
			     </ul>
		});

第四部分:js部分(2、全局组件

      //组件的注册
       Vue.component('my-cpn',cnp);
	  //组件的使用	
		const app = new Vue({
			el:'#app'
		})

第四部分:js部分(3、局部组件

    // 组件注册和使用
		const app = new Vue({
			el:'#app',
			components:{
				'my-cpn':cnp
			}
		})

代码解释:

调用Vue.extend()创建的是一个组件构造器,构造器有一个选项对象,选项对象的template属性用于定义组件要渲染的HTML;

调用Vue.component()注册组件时,需要提供2个参数:组件的标签名组件构造器;注册的组件要挂载到某个Vue实例下,否则它不会生效;

运行效果:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值