了解前端工程化之组件化——Vue组件

首先我们需要知道什么是组件化开发？

前端工程化包含这么四个方针：模块化、组件化、规范化、自动化

具体可以查看：了解前端工程化 

其中就有我们的组件化 ，它指的就是根据封装这么一个思想概念，将页面上可以重复使用的UI结构封装为组件，也叫做复用，可以大大的方便我们项目的开发以及维护

---

Vue中的组件化开发

首先我们要知道Vue是一个支持组件化开发的前端框架

那么哪个文件是Vue的组件呢？

没错，就是以.Vue后缀结尾的文件就是Vue的组件

vue组件中有三个部分，分别是：

template-->组件的模板结构

 这里需要注意的是template中只能有一个根元素，我们所有的元素都应该被包含在template中的一个根元素中（eg：div）

---

script-->组件的JavaScript行为

这里需要注意的是我们必须定义一个默认的导出对象：export default {  }

并且在该对象中我们定义data节点的时候，data不能指向对象，必须指向为一个函数，在这个函数中我们return出去的对象中定义数据（只有data需要指向函数，比如filters、computed等节点指向的还是对象）

那么为什么呢？ 

因为组件中data定义为一个对象的话，那么在模板中多次复用该组件，组件中的data会指向同一个引用；这时改变一个组件中的data，会导致其他组件data中的数据被污染

如果我们使用函数的话，每个组件中的data就会有单独的引用，并不会出现变量污染的问题

<template>
    <div id="app">
        <h1>我的姓名是：{
   
   { username }}我的年龄是：{
   
   { age }}</h1>
    </div>
</template>

<script>
export default {
    data(){
        return {
            username:"小蜗",
            age:22
        }
    }
}
</script>

tips：在组件中的this指向的是Vue组件的实例

---

style-->组件的样式

 style需要注意的点：style上有lang这样一个属性，用来指定预编译器（我们这里使用的是less预编译器）