vue组件学习

vue小项目
参考学习:https://blog.csdn.net/qq_36538012/article/details/86625718

vue组件学习
参考学习：https://blog.csdn.net/WU5229485/article/details/82908068

https://www.cnblogs.com/CyLee/p/8425191.html
https://www.cnblogs.com/avon/p/5943008.html

面试题：
参考学习：https://www.cnblogs.com/sichaoyun/p/8406194.html
https://juejin.im/post/5d59f2a451882549be53b170#heading-1
https://www.cnblogs.com/xiaohuochai/p/7388866.html

局部组件：

	<div id="app">
		<zu-jian></zu-jian>
	</div>

	<script>
		var zuJian = Vue.extend({template:"<div>我是子组件</div>"})
		new Vue({
			el:"#app",
			data:{},
			components:{
				"zu-jian":zuJian
			}
		})
	</script>

	<div id="app">
		<zu-jian></zu-jian>
	</div>

	<script>
		var zuJian = {template:"<div>我是子组件</div>"};

		new Vue({
			el:"#app",
			data:{},
			components:{
				"zu-jian":zuJian
			}
		})
	</script>

全局组件：

<div id="app">
		<zu-jian ></zu-jian>
	</div>
	
	<script>
		var zuJian = Vue.extend({
			template:"<div>我是全局组件</div>"
		})
		Vue.component('zu-jian',zuJian)
		
		new Vue({
			el:"#app",
			data:{
			}
		})
	</script>

<div id="app">
		<zu-jian ></zu-jian>
	</div>
	
	<script>
		var zuJian = {
			template:"<div>我是全局组件</div>"
		}
		Vue.component('zu-jian',zuJian)
		
		new Vue({
			el:"#app",
			data:{
			}
		})

	</script>