Vue.js组件
组件的作用：组件是自定义元素，可扩展html元素，封装可复用的代码。
组件的注册一定要在初始化根实例之前，负责组件是不起作用的。
全局组件在初始化实例的时候被使用
局部组件仅在实例/组件作用域中可用
1、组件的注册
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="id">
<global></global>
<father></father>
</div>
</body>
<script>
Vue.component('global',{
template: '<div>注册全局组件</div>'
}) var partial = { //局部组件仅在一个实例/组件的作用域中可用
template: '<div>注册局部组件</div>'
} new Vue({
el: '#id',
components:{
'father':partial
}
})
</script>
</html>
2、DOM模板解释说明
当使用 DOM 作为模版时（例如，将 el 选项挂载到一个已存在的元素上）, 你会受到 HTML 的一些限制，因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。尤其像这些元素 <ul> ，<ol>，<table> ，<select> 限制了能被它包裹的元素， 而一些像 <option> 这样的元素只能出现在某些其它元素内部。
这时需要用到特殊的is属性
<table>
<my-row>...</my-row>
</table>
<!--上面的组件是无效的--> <table>
<tr is="my-row"></tr>
</table>
<!--上面的组件使用is属性才能被解析->
3、通过Vue构造器传入的各种选项大多数都可以在组件里用。 data 是一个例外，它必须是函数。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="id">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>
</body>
<script>
var data = { counter: 0 }
Vue.component('simple-counter', {
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
// 技术上 data 的确是一个函数了，因此 Vue 不会警告，
data: function () {
//所有组件都是返回同意个对象
// return data
//为每个组件返回全新的对象
return{
counter:0
}
}
}) new Vue({
el: '#id'
})
</script>
</html>