Vue.js 3 Step 创建一个组件

Step1:Vue.extend()创建组件
Step2:Vue.component()注册组件,注册的标签一定要用小写
Step3:挂载点使用组件


<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>3 Step 创建一个组件</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="app1">
			<!-- Step3:挂载点1使用组件 -->
			<my-component></my-component>
		</div>
		<div id="app2">
			<!-- Step3:挂载点2使用组件 -->
			<my-component></my-component>
		</div>
		<div>
			<!-- 这里不属于挂载点,所以不会显示! -->
			<my-component></my-component>
		</div>
		<script type="text/javascript">
			//Step1:创建组件
			var myComponent = Vue.extend({
				template: "<div>这是一个组件</div>"
			})
			//Step2:注册组件 在这里采用"全局注册"组件,也就是每个挂载点都可以使用组件
			Vue.component('my-component', myComponent)

			new Vue({
				el: '#app1', //挂载点1
			})
			new Vue({
				el: '#app2' //挂载点2
			})
		</script>
	</body>

</html>

全局注册和局部注册

全局注册:

Vue.component('my-component', myComponent)

局部注册:

我们需要在声明挂载点的地方注入组件即可:

			new Vue({
				el: '#app1',
				components:{
				'my-component', myComponent'
				}
			})

这样只能在挂载点为#app1地方使用my-component组件,在挂载点#app2的地方使用my-component组件就会报错

语法糖创建并注册组件

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>3 Step 创建一个组件</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="app1">
			<!-- Step3:挂载点1使用组件 -->
			<my-component></my-component>
		</div>
		<div id="app2">
			<!-- Step3:挂载点2使用组件 -->
			<my-component></my-component>
			<hr>
			<strong>使用语法糖创建并注册组件</strong>
			<sugar-component></sugar-component>
		</div>
		<div>
			<!-- 这里不属于挂载点,所以不会显示! -->
			<my-component></my-component>
		</div>
		<hr >
		<strong>使用语法糖在局部注册并创建多个组件</strong>
		<div id="app3">
			<sugar-component2></sugar-component2>
			<sugar-component3></sugar-component3>
		</div>
		<script type="text/javascript">
			//Step1:创建组件
			var myComponent = Vue.extend({
				template: "<div>这是一个组件</div>"
			})
			//Step2:注册组件 在这里采用"全局注册"组件,也就是每个挂载点都可以使用组件
			Vue.component('my-component', myComponent)

			//Step2: 可以使用语法糖,省略Step1,“全局注册”组件的同时创建模板内容
			Vue.component('sugar-component', {
				template: '<div>这是用语法糖创建并注册的组件,这样就可以省略自己使用Vue.extend创建组件的步骤,系统会自动为我们使用Vue.extend去创建组件。</div>'
			})

			new Vue({
				el: '#app1', //挂载点1
			})
			new Vue({
				el: '#app2' //挂载点2
			})
			new Vue({
				el: '#app3', //挂载点3,同样可以再局部使用语法糖创建并注册组件
				components: {
					'sugar-component2': {
						template: '<div>这是使用语法糖在局部注册并创建组件的内容。</div>'
					},
					'sugar-component3': {
						template: '<div>使用语法糖,在局部可以同时创建并注册“多个组件”的内容。</div>'
					}
				}
			})
		</script>
	</body>

</html>

posted @ 2019-05-18 09:23  duanyong  阅读(1493)  评论(0编辑  收藏  举报