文档介绍：Vue第一天
的组件有三个步骤: 创建组件构造器(()方法),注册组件(ponent())和实例化组件。
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id="container">
<component1></component1>
</div>
</body>
<script src="./"></script>
<script type="text/javascript">
// 1. 创建一个组件构造器
ponent1 = ({
template: '<div>hello world</div>'
});
// 2. 注册组件,ponent1>
ponent('component1', component1);
// 3. 实例化组件
new Vue({
el: '#container'
});
</script>
</html>
浏览器编译后html结构会变为 
<div id="container">
<div>hello world</div>
</div>
页面运行显示为 
hello world
。
2-1 () 是Vue构造器的扩展,()创建的是一个组件构造器,该构造器有一个选项对象,选项对象的template属性用于定义组件要渲染的html。
2-2 ponent() 是注册组件,需要2个参数,第一个参数是自定义组件的标签,第二个参数是组件的构造器。
2-3 组件需要挂载到某个Vue的实例下,否则不生效。
如下实例:
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id="container1">
<component1></component1>
</div>
<div id="container2">
<component1></component1>
</div>
<div id="container3">
<component1></component1>
</div>
</body>
<script src="./"></script>
<script type="text/javascript">
// 1. 创建一个组件构造器
ponent1 = ({
template: '<div>hello world</div>'
});
// 2. 注册组件,ponent1>
ponent('component1', component1);
// 3. 实例化组件 container1
new Vue({
el: '#container1'
});
// 3. 实例化组件 container2
new Vue({
el: '#container2'
});
// 不实例化 container3 因此第三个自定义标签是不会生效的
</script>
</html>
最终代码被渲染成为如下:
<div id="container1"><div>hello world</div></div><div id="container2"><div>hello world</div></div>
ponent()注册组件时,组件的注册是全局的,如果想要使用组件的局部注册的话,ponents属性实现局部注册。
如下代码:中间就把第二步注册组件哪项移到实例化组件里面来了;如下代码:
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id="container1">
<component1></component1>
</div>
<!-- ponent1组件,因为它是container1里面局部注册的-->
<div id="container2">
<component1></component1>
</div>
</body>
<script src="./"></script>
<script type="text/javascript">
// 1. 创建一个组件构造器
ponent1 = ({