组件介绍和组件定义初识

最新推荐文章于 2022-12-04 20:44:21 发布

俗世凡人行

最新推荐文章于 2022-12-04 20:44:21 发布

阅读量875

点赞数

分类专栏： Vue 文章标签：组件短横线

本文链接：https://blog.csdn.net/weixin_41887155/article/details/107595482

版权

Vue 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

组件介绍和组件定义

Vue两大优点: 数据驱动和组件

组件是`可复用`的vue实例, 通过自定义元素实现一个组件;

组件解决了代码的冗余, 类似后端的函数(类);

组件是可以复用的Vue实例, 所以他们与new Vue接收相同的选项, 例如data,computed,watch,methods以及生命周期钩子等;
html不区分大小写,标签统一转成小写,注册一个全局组件 ,命名推荐用短横线kebab-case;

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

Vue.component('my-div',{
    template:'<h1>hello Vue</h1>',
});

var vm = new Vue({
    el:'#app'
});

eg

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>最简单的注册全局组件</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 组件也必须写到vue挂载的实例里面 -->
			<my-div></my-div>
			<my-div></my-div>
			<nice-div></nice-div>
		</div>		
	</body>
</html>
<script type="text/javascript">	
    //注册一个全局组件 ,命名推荐用短横线
	//my-div是自定义的一个组件名字,然后需要去模板里面定义
    Vue.component('my-div',{
		template:'<h1>hello vue</h1>'
	});
	Vue.component('nice-div',{
		template:'<h1>hello nice</h1>'
	});
	var vm = new Vue({	
		el:'#app',		
	})	
	
</script>