vue 组件学习

component

html：
	<div id="app">
		<compress message="--001"></compress>
		<runoob sgs="---0000001"></runoob>
		<runoob sgs="---0000002"></runoob>
		<runoob v-bind:sgs="msg"></runoob>	
		<ul>
			<shop-list v-for="item in infoType" v-bind:shop="item"></shop-list>
		</ul>
	</div>	
	<div id="app2">
		<compress message="--002"></compress>
	</div>
js：
	Vue.component("compress",{
		props: ['message'],
		template:'<p>全局组件 -{{message}}</p>'
	})
	
	var app2 = new Vue({
		el:"#app2"
	})
	
	var app = new Vue({
		el: '#app',
		data:{		
			infoType:[
				{sysId: '901',title: "网页"},
				{sysId: '552',title: "资讯"},
				{sysId: '432',title: "视频"},
				{sysId: '652',title: "图片"}
			]
		},
		components:{
			'runoob': {
				props: ['sgs'],
				template: '<h1>局部组件!{{sgs}}</h1>'
			},
			'shop-list':{
				props: ['shop'],
				template: '<li>{{shop.title}}</li>'	
			}
		}
	})

结果

全局组件 ---001

局部组件!---0000001
局部组件!---0000002
局部组件!我是v-text指令

1.网页
2.资讯
3.视频
4.图片

全局组件 ---002

transition

Enter：v-enter-active（v-enter、v-enter-to）
Leave： v-leave-active（v-leave、v-leave-to）

css 过渡：slide-fade
css 动画：bounce
自定义过过渡的类名：
	enter-class - string
	leave-class - string
	appear-class - string
	enter-to-class - string
	leave-to-class - string
	appear-to-class - string
	enter-active-class - string
	leave-active-class - string
	appear-active-class - string

事件：
	before-enter
	before-leave
	before-appear
	enter
	leave
	appear
	after-enter
	after-leave
	after-appear
	enter-cancelled
	leave-cancelled (v-show only)
	appear-cancelled

html
		<transition  name="fade" type="animation">
			<p v-if="show">hello</p>
		</transition>
js
		data:{
			show:true
		}
css	
		.fade-enter-active, .fade-leave-active {
			transition: color 1s
		}
		.fade-enter, .fade-leave-to{
			color:#f00
		}