vue组件

9.Vue组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

9.1全局组件

所有实例都能用全局组件。

案例1：

    <div id="app">
        <mycomponent></mycomponent>
    </div>
     <script>
 	    //注册组件
         Vue.component("mycomponent",{
             template:'<li>这里是组件的内容</li>'
         });
         var v= new Vue({
             el:"#app",
         });
     </script>

说明：

注册组件
Vue.component（"组件名称"，{组件的属性}）

案例2：

     	<div id="app">
			 <mymenu></mymenu>
		</div>
		
		<script>
			
		//注册组件	  mymenu：组件的名字  {}里面是组件的属性配置
		Vue.component("mymenu",{
			
			
		//data数据，这里的数据和vue实例中的数据不同，这里data类型是函数而非对象。	
		data:function(){
			return{
				count:0
			}
		},
		
		//组件的模板只能有一个根元素 
	    template:'<div><input type="button" value="-" @click="sub" />'+
	    '<input type="num" :value="count" /><input type="button" value="+" @click="plus" /></div>',
	    
	    //需要用到的方法