Vue组件

基本知识点

组件：为了拆分Vue实例的代码量，能够以不同的组件来实现不同的功能模块，想要实现什么样的功能，就去调用对应的组件
组件和模块区别：
    模块化：是从代码的逻辑的角度进行划分的  方便代码进行分层开发，保证每个功能模块的智能单一
    组件化：从UI界面的角度进行划分的  方便UI组件的重用
组件的创建方式：
    不论是那种方式创建的，组件的template属性有且只有一个根元素

创建方式1

<div id="app">
	<!--如果使用组件，直接使用标签引入即可-->
	<!--命名可以驼峰，但是使用的时候要用短线替代-->
	<!--或者命名的时候都使用小写-->
	<my-com1></my-com1>
</div>
//1.使用Vue.extend来创建全局的Vue组件
var com1 = Vue.extend({
	//设置组件要展示的html结构
	template:'<h3>这里使用vue extend创建的组件</h3>'
});
//2.使用Vue.component('组件名称', 创建出来的组件对象)
Vue.component('myCom1', com1);

创建方式2

<div id="app">
	<my-com1></my-com1>
</div>
<script>
	//自定义组件方式2
	Vue.component('myCom1', Vue.extend({
			//设置组件要展示的html结构
			template:'<h3>这里使用vue extend创建的组件</h3>'
		})
	);
</script>

创建方式3

<div id="app">
	<mycom></mycom>
</div>
<script>
	Vue.component('mycom', {
		template: '<p>这是直接创建出来的组件</p>'
	})
</script>

创建方式4

<div id="app">
	<template id="tpl1">
		<div>
			<h3>这是通过template标签创建的，这里有高亮和代码提示</h3>
			<span>真好用</span>
		</div>
	</template>
</div>
<script>
	Vue.component('mycom', {
		template: '#tpl1'
	});
</script>

定义私有组件

<div id="app">
	<template id="tpl1">
		<div>
			<h3>这是通过template标签创建的，这里有高亮和代码提示</h3>
			<span>真好用</span>
		</div>
	</template>
</div>
<div id="app2">
	<mycom></mycom>
	<login></login>
	<template id="tpl2">
		<div>
			<h3>这是私有logout组件</h3>
		</div>
	</template>
</div>
<script>
	Vue.component('mycom', {
		template: '#tpl1'
	});
	var vm = new Vue({
		el: '#app'
	});
	var vm2 = new Vue({
		el: '#app2',
		//定义实例私有组件
		components:{
			login:{
				template: '<h1>这是私有的login组件</h1>'
			},
			logout:{
				template: '#tpl2'
			}
		}
	});
</script>	  	

组件中的data和methods

data
    Vue.component('com1', {
        // 组件中的数据使用方式和实例完全相同
        template: '<h1>这是全局组件 ---  {{ msg }}</h1>',
        //这里的data必须是函数，而且必须返回对象
        data: function(){
            return {
                msg: '这是组件中的data定义的数据'
            };
        }
        
    });

<div id="app">
	<counter></counter>
	<hr>
	<counter></counter>
	<hr>
	<counter></counter>
	<hr>
</div>
<template id="tpl">
	<div>
		<input type="button" value="+1" @click="increment">
		<h3>{{ count }}</h3>
	</div>
</template>
<script>
	var dataObj = { count: 0 }
	Vue.component('counter',{
			template: '#tpl',
			data: function(){
				// return dataObj;
				return { count: 0 };
			},
			methods: {
				increment(){
					this.count += 1;
				}
			}
		}
	);
	var vm = new Vue({
		el: '#app',
		data: {

		},
		methods: {
			
		}
	});
</script>    

不同组件之间的切换v-if和v-else

<div id="app">
	<a href="" @click.prevent="flag=true">登录</a>
	<a href="" @click.prevent="flag=false">注册</a>
	<login v-if="flag"></login>
	<register v-else="flag"></register>
</div>
<script>
	Vue.component('login', {
		template: '<p>登录组件</p>'
	});
	Vue.component('register', {
		template: '<p>注册组件</p>'
	});
	var vm = new Vue({
		el: '#app',
		data: {
			flag: false
		},
		methods: {
			
		}
	});
</script>  

组件切换的第二种方式

<div id="app">
	<a href="" @click.prevent="conName='login'">登录</a>
	<a href="" @click.prevent="conName='register'">注册</a>
	<!--展示对应名称的组件 component 是一个占位符-->
	<!--：is用来指定对应的组件名称-->
	<component :is="conName"></component>
	<!-- component template transition transitionGroup -->
</div>
<script>
	Vue.component('login', {
		template: '<p>登录组件</p>'
	});
	Vue.component('register', {
		template: '<p>注册组件</p>'
	});
	var vm = new Vue({
		el: '#app',
		data: {
			//当前component名称
			conName: 'login'
		},
		methods: {
			
		}
	});
</script>  

组件切换的切换动画

<style>
	.v-enter,
	.v-leave-to{
		opacity: 0;
		transform: translateX(150px);
	}
	.v-enter-active,
	.v-leave-active{
		transition: all 0.5s ease;
	}
</style>
<div id="app">
	<a href="" @click.prevent="conName='login'">登录</a>
	<a href="" @click.prevent="conName='register'">注册</a>
	<!-- 通过mode属性，设置组件切换时候的模式 -->
	<transition mode="out-in">
		<component :is="conName"></component>
	</transition>
</div>
<script>
	Vue.component('login', {
		template: '<p>登录组件</p>'
	});
	Vue.component('register', {
		template: '<p>注册组件</p>'
	});
	var vm = new Vue({
		el: '#app',
		data: {
			//当前component名称
			conName: 'login'
		},
		methods: {
			
		}
	});
</script>

以上是所有关于Vue组件的定义使用以及示例代码的总结。