vue笔记之创建组件

最新推荐文章于 2024-09-04 15:16:43 发布

qq_36781179

最新推荐文章于 2024-09-04 15:16:43 发布

阅读量150

点赞数

文章标签： vue 组件

本文链接：https://blog.csdn.net/qq_36781179/article/details/82877013

版权

模块化：是从代码逻辑的角度进行划分的
组件化：是从UI界面的角度进行划分的
第一种方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	<style type="text/css">
	
	</style>
</head>
<body>
	
	<div id="app">
		<!-- 如果使用组件直接把组件的名称，以html标签的形式，引入到页面中 -->
		<!-- <my-com1></my-com1> -->
		<mycom1></mycom1>
	</div>
	<script>
		// 1.1使用Vue.extend来创建全局的Vue组件
		// var com1 = Vue.extend({
		// 	template: "<h3>这是使用Vue.extend创建的组件</h3>"//通过template属性，指定了组件要展示的html结构
		// })
		// 1.2使用Vue.component("组件的名称","创建出来的组件模版对象")
		// 如果使用
		// 如果使用Vue.component定义全局组件的时候，组件名称使用了驼峰命名，则在引用组件的时候，需要把大写的驼峰改为小写的字母,同时两个单词之前使用 - 链接
		// 如果不使用驼峰命名就直接使用
		// Vue.component('myCom1',com1)
		// Vue.component('mycom1',com1)
		 
		
		 
		// Vue.component第一个参数：组件的名称，将来在引用组件的时候，就是一个标签形式引入；第二参数：Vue.extend创建的组件，其中template就是组件将来要展示的html内容
		Vue.component('mycom1',Vue.extend({
			template:'<h3>这是使用Vue.extend创建的组件</h3>'
		}))
		var vm = new Vue ({
			el:'#app',
			data:{
				
			},
			methods: {
				
			}

		});
		
	</script>
</body>
</html>

第二种方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	<style type="text/css">
	
	</style>
</head>
<body>
	<div id="app">

		<mycom2></mycom2>
	</div>
	<script>
		
		Vue.component('mycom2',{
			template:"<h3>直接使用Vue.component创建出来的组件</h3>"
		})
		var vm = new Vue ({
			el:'#app',
			data:{
				
			},
			methods: {
				
			}

		});
		
	</script>
</body>
</html>

第三种方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	<style type="text/css">
	
	</style>
</head>
<body>
	<div id="app">
		<mycom3></mycom3>
	</div>
	<template id="tmpl">
		<div>
			<h1>这是通过template元素，在外部定义的组件结构</h1>
			<h4>好用</h4>
		</div>
	</template>
	<script>
		
		Vue.component('mycom3',{
			template:"#tmpl"
		})
		var vm = new Vue ({
			el:'#app',
			data:{
				
			},
			methods: {
				
			}

		});
		
	</script>
</body>
</html>

创建私有组件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	<style type="text/css">
	
	</style>
</head>
<body>
	<div id="app">

		<login></login>
	</div>
	<script>

		var vm = new Vue ({
			el:'#app',
			data:{},
			//私有组件
			components:{
				login: {
					template:"<h3>这是私有的login组件</h3>"
				}
			}
		});
		
	</script>
</body>
</html>