Vue组件化开发(1)

组件化：

一个页面可以拆分为一个个组件，每个组件有自己独立的结构、样式、行为。

好处：

有下面两个，都是为了提升开发效率

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 行为