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">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <HelloBoy></HelloBoy> -->
<!-- <hello-boy></hello-boy> -->
<Hello></Hello>
<hello></hello>
</div>
<div id="root">
<Hello></Hello>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
const Hello = Vue.extend({
template: '<div> Hello 组件 </div>'
})
Vue.component( 'Hello', Hello )
new Vue({
el: '#app'
})
new Vue({
el: '#root'
})
</script>
</html>
组件的局部注册
<!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">
<title>Document</title>
</head>
<body>
<div id="app">
<Hello></Hello>
</div>
<div id="root">
<Hello></Hello>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script>
new Vue({
el: '#app',
components: {
'Hello': {
template: '<div> Hello </div>'
}
}
})
new Vue({
el: '#root'
})
</script>
</html>
