Vue组件的用法

Vue组件，可以分为全局组件和局部组件。全局组件是在使用Vue环境中的都可以使用，局部组件只有在该实例作用域下有效。

关键字使用的是：component。

全部组件：

<div id="app">
		<my-component></my-component>
	</div>
	<script type="text/javascript" src="./js/vue.js"></script>
	<script type="text/javascript">
		Vue.component('my-component',{
			template:'<div>这里是组件的内容</div>>'
		});

		var app = new Vue({
			el:"#app"
		});
	</script>

template的DOM结构必须被一个元素包含。如果没有元素，则无法渲染。

局部组件简单实用：

<div id="app">
		<my-component></my-component>
	</div>
	<script type="text/javascript" src="./js/vue.js"></script>
	<script type="text/javascript">
		var Child = {
			template:'<div>局部组件内容</div>'
		}

		var app = new Vue({
			el:"#app",
			components:{
				'my-component':Child
			}
		});
	</script>

例子：

计算每个按钮被按下的次数：

<div id="app">
		<my-component></my-component>
		<my-component></my-component>
		<my-component></my-component>
	</div>
	<script type="text/javascript" src="./js/vue.js"></script>
	<script type="text/javascript">
		Vue.component('my-component',{
			template:'<button @click="counter++">{{counter}}<button>',
			data:function(){
				return {
					counter:0
				}
			}
		});

		var app = new Vue({
			el:"#app"
		});
	</script>

这样会计算每个按钮被按下的次数。

如果引用外部的变量，则可计算按钮被按下的总次数

<div id="app">
		<my-component></my-component>
		<my-component></my-component>
		<my-component></my-component>
	</div>
	<script type="text/javascript" src="./js/vue.js"></script>
	<script type="text/javascript">
		var data = {
			counter :0
		}
		Vue.component('my-component',{
			template:'<button @click="counter++">{{counter}}<button>',
			data:function(){
				return data;
			}
		});

		var app = new Vue({
			el:"#app"
		});
	</script>