1. 构造组件，及组件引用：1.1 构造一个组件，1.2 注册一个组件，1.3 实例化Vue()即引用Vue()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./vue/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="box">
<ccc></ccc>
</div>
<ccc></ccc>
<script>
// 构造组件，使用extend()字样进行
var c = Vue.extend({
template: '<h3>这是一个H3标题标签</h3>'
});
// 注册组件，注册一个名称为ccc ,内容为c的组件
Vue.component('ccc', c);
new Vue({
el: "#box",
});
</script>
</body>
</html>
运行结果：
2. 引用几次，就调用几次
<body>
<div id="box1">
<ccc></ccc>
</div>
<div id="box2">
<ccc></ccc>
</div>
<ccc></ccc>
<script>
// 构造组件
var c = Vue.extend({
template: "<h3>这是一个测试字符串</h3>"
});
// 注册组件
Vue.component("ccc", c);
// 引用Vue
new Vue({
el: "#box1",
});
new Vue({
el: "#box2",
});
</script>
</body>
运行结果：
3. 局部注册，只有局部才能引用
<body>
<div id="box1">
<ccc></ccc>
</div>
<div id="box2">
<ccc></ccc>
</div>
<ccc></ccc>
<script>
// 构造组件
var c = Vue.extend({
template: "<h3>这是一个测试字符串</h3>"
});
// 引用Vue + 局部注册
new Vue({
el: "#box1",
components: {
'ccc': c,
},
});
// 虽然有引用，但是没有注册，所以也不会进行替换
new Vue({
el: "#box2",
});
</script>
</body>
运行结果：
4. 父组件与子组件，即在父组件下注册子组件，同样可以实现替换
5.注册全局组件
<body>
<div id="box1">
<ccc></ccc>
</div>
<div id="box2">
<ccc></ccc>
</div>
<ccc></ccc>
<script>
Vue.component('ccc', {
template: "这是一个测试组件，这是ccc",
}); new Vue({
el: "#box1"
});
</script>
</body>
运行结果：
6. 简化组件的注册
<body>
<div id="box1">
<aaa></aaa>
<bbb></bbb>
</div> <ccc></ccc>
<script>
var a = Vue.extend({
template: "<h3>这是组件a 的内容</h3>",
});
var b = Vue.extend({
template: "<h3>这是组件b 的内容</h3>",
});
new Vue({
el: "#box1",
components: {
'aaa': a,
'bbb': b,
}
});
</script>
</body>
运行结果：
7. 使用script 标签分离模板：
<body>
<div id="box1">
<aaa></aaa>
<bbb></bbb>
</div>
<script type="x-template" id="a">
<h3>我是组件a</h3>
<p>我是段落a</p>
</script>
<script type="x-template" id="b">
<h3>我是组件b</h3>
<p>我是段落b</p>
</script>
<script>
new Vue({
el: "#box1",
components: {
'aaa': {
template: '#a',
},
'bbb': {
template: '#b'
}
}
});
</script>
</body>
运行结果：
