组件化：
一个页面可以拆分为一个个组件，每个组件有自己独立的结构、样式、行为。
好处：
有下面两个，都是为了提升开发效率
1.便于维护：相比于小项目全部写在一起，这样组件化开发就容易维护，一旦几百行的代码异常，只需要找某个独立的组件代码去调整即可，所以项目越大，若是不做拆分维护起来难度就越大
2.利于复用：
封装好的组件可以拆分出来，别的页面直接拿去用就可以，页面的风格保持一致，维护时会同步更新
组件分类：
普通组件，根组件
App.vue(单文件组件)的三个组成部分
template : 结构(有且只能一个根元素)
script : js逻辑
style : 样式(支持less,需要装包)
若需要让组件支持less，先去style标签，lang=less" 开启less功能，装依赖包：yarn add less-loader
代码深入：
App.vue里面只能有一个template ,vue2规范规定里面再有一个<div>根结构, 如果需要多个div , 就在外面再包一层div呗。
这里在template中写一个div，class为a1,字符:我是内容
<template >
<div class="a1"> 我是内容 </div>
</template >
然后去style 里面写样式:
<style>
.a1{
width:300px;
height:500px;
background-color:pink;
}
</style>
若是大div里面要再加一个小盒子, 就是:
<template >
<div class="a1">
<div class="a2"></div>
</div>
</template >
<style>
.a1{
width:300px;
height:500px;
background-color:pink;
}
a1.a2{
width:100px;
height:100px;
background-color:red;
}
</style>
这里再提供逻辑:
<script >
//export default意指 导出当前组件的配置项,里面可以提供data(较特殊) methods computed watch 生命周期八大钩子等
export default {
methods:{
}
}
</script >
这里演示点击蓝色div 弹出hello
<template >
<div class="a1">
<div class="a2" @click= "fn"></div>
</div>
</template >
<script>
export default {
methods:{
fn(){
alert('hello!')
}
}
}
</script>
<style>
.a1{
width:300px;
height:500px;
background-color:pink;
}
a1.a2{
width:100px;
height:100px;
background-color:blue;
}
</style>
并且created也是支持的
<template >
<div class="a1">
<div class="a2" @click= "fn"></div>
</div>
</template >
<script>
export default {
created(){
console.log('这是created钩子')
}
methods:{
fn(){
alert('hello!')
}
}
}
</script>
<style>
.a1{
width:300px;
height:500px;
background-color:pink;
}
.a2{
width:100px;
height:100px;
background-color:blue;
}
</style>
重新运行就正常运行了
总结:
(1)组件化:
页面可拆分成一个个组件，每个组件有着独立的结构、样式、行为① 好处:便于维护，利于复用,提升开发效率
② 组件分类:普通组件、根组件。
(2)根组件:
整个应用最上层的组件，包裹所有普通小组件，
一个根组件App.vue，包含的三个部分:
① template 结构(只能有一个根节点)
② style 样式(可以支持less，需要装包 less 和 less-loader)
③ script 行为