组件

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

全局组件

export

source

<div id="app">
	<!-- 使用组件 -->
  	<my-comp></my-comp>
</div>
// 定义组件
var Mycomp = Vue.extend({
	template: '<div>'+
			'<p>我的第一个组件</p>'+
			'<button v-on:click="click_test" class="btn btn-primary">按钮</button>'+
		'</div>',
	methods : {
		"click_test" : function(){
			alert("测试事件");
		}
	}
});

// 注册组件,为全局组件
Vue.component('my-comp', Mycomp);

// 创建根实例
new Vue({
  el: '#app'
})

局部组件

export

source

<div id="app2">
	<!-- 使用组件 -->
  	<my-part></my-part>
</div>
var part = Vue.extend({
	data: function(){
		return {
	        array: [
	        	"a","b","c"
	        ]
	    };
	},
  	template: '<ul>'+
  		'<li v-for="item in array">{{ item }}</li>'+
  		'</ul>',
  	methods : {
		// 这里绑定事件
	}
});

var app = new Vue({
    el: '#app2',
    components: {
	    'my-part': part
	}
});