Vuejs第八篇之Vuejs组件的定义实例解析

var 变量名 = Vue.extend({template:”这里是html的模板内容”})
这样的形式创建，例如：

//定义一个组件 
var btn = Vue.extend({ 
template: "<button>这是一个按钮</button>" 
})

//注册他到Vue实例上 
Vue.component("add-button", btn); 

<add-button></add-button> 

<button>这是一个按钮</button> 

<div id="app"> 
</div> 
<script> 
//定义一个组件 
var btn = Vue.extend({ 
template: "<button>这是一个按钮</button>" 
}) 

Vue.component("add-button", btn); 

//创建根实例，也就是说让Vue对这个根生效 
var vm = new Vue({ 
el: '#app', 
template: "<add-button></add-button>" 
}); 
</script> 

<div id="app"> 
</div> 
<script> 
//定义一个组件 
var btn = Vue.extend({ 
template: "<button>这是一个按钮</button>" 
}) 
//创建根实例，也就是说让Vue对这个根生效 
var vm = new Vue({ 
el: '#app', 
template: "<add-button></add-button>", 
components: { 
"add-button": btn 
} 
}); 
</script> 

//定义一个组件 
Vue.component("add-button", { 
template: "<button>这是一个按钮</button>" 
}); 

//创建根实例，也就是说让Vue对这个根生效 
var vm = new Vue({ 
el: '#app', 
template: "<add-button></add-button>", 
components: { 
"add-button": { 
template: "<button>这是一个按钮</button>" 
} 
} 
}); 

var vm = new Vue({ 
el: '#app', 
template: "<add-button></add-button>", 
components: { 
"add-button": { 
template: "<button>这是一个按钮{{btn}}</button>", 
data: function () { 
return {btn: "123"}; 
} 
} 
} 
}); 

<div id="app"> 
</div> 
<div id="app2"> 
</div> 
<script> 
var obj = {btn: "123"}; 
var vm = new Vue({ 
el: '#app', 
template: "<add-button></add-button>", 
components: { 
"add-button": { 
template: "<button>这是一个按钮{{btn}}</button>", 
data: function () { 
return obj; 
} 
} 
} 
}); 
obj.btn = "456"; 
var vm2 = new Vue({ 
el: '#app2', 
template: "<add-button></add-button>", 
components: { 
"add-button": { 
template: "<button>这是一个按钮{{btn}}</button>", 
data: function () { 
return obj; 
} 
} 
} 
}); 
</script>