脚手架内各文件配置说明、组件化开发步骤

单文件组件

    1、先在项目当中创建一个components文件夹，用于放置后期定义的组件（配置对象）
    2、在写代码的地方，一般需要创建一个App.vue的文件，它用于组装定义好的组件，App本质也是一个组件
    3、vm实例最终只需要去把App组件给注册然后去渲染就好了
    一个.vue文件，里面包含了组件的结构样式和行为，其实本质就是配置对象（文件）
    写法高亮 比较明了  但是需要模块化  需要搭建环境

eslint的禁用

 1.    // 局部禁用某个错误提示，只能禁用当前这个文件当中的eslint错误
    /* eslint-disable no-unused-vars */

 2.    //package.json当中找到eslintConfig项，全局配置禁用某些错误提示，只能配置固定的错误类型，后期如果需要配置，要配置很多项错误类型
    "rules": {
        "no-unused-vars":"off"
        }

3.   //开发阶段直接关闭eslint的提示功能

    vue.config.js当中
    module.exports = {
        //  写自己想要配置的东西去覆盖系统自带的
        // 关闭ESLint的规则
         lintOnSave: false
    }

组件模板解析 

Vue渲染两种方式：

1.

  通过render函数去渲染App组件，它的内部调用了一个方法，h，这个方法内部

  自己写了一个解析器的功能

  后期使用的就是这个版本，因为它没有解析器，后期代码体积会小

render：h => h(App)

  // render:(h) => {

  //   return h(App)

  // }

2. components注册组件

需要引入带模板解析器的vue版本，那么会造成后期打包体积过大，浏览器加载效率低 

import Vue from 'vue'    //默认引入的这个vue版本是不包含模板解析器

import Vue from 'vue/dist/vue.esm'    //手动引入了带模板解析器的Vue版本

  // components:{

  //   App

  // },

  // template:'<App/>'

 组件化开发步骤

静态页面

拆分组件

组装组件（定义组件、注册组件、使用组件）

渲染组件

动态页面

1.初始化动态显示页面

        （1）设计数据

                  设计数据规范

                     数据的格式是什么？

                          看页面的功能，列表一般是数组，一般都是对象的数组

                     数据放在哪？

                          看数据是在哪个组件用还是在哪些个组件使用
                           如果数据仅仅是在哪个组件用，那么数据就定义在这个组件的data当中
                           如果数据是在哪些个组件用，那么数据应该写在这些组件的公共父组件当中

        （2）数据展示：  直接可以展示的数据

                                     需要计算才能展示的数据

2.交互 

v-bind

如果属性写在html标签身上就是绑定数据,不管有没有v-bind

如果属性写在组件标签身上，那么就是props传递数据，不管有没有v-bind

如果不写冒号传递是一个字符串，如果写了传递的就是动态数据

在组件中传递数据后，需要在另一个组件里声明接收

<Main :todoList="todoList"></Main>


props:['todoList'], 

checked

单个的checkbox 可读可写 有两种方案

      1、使用checked 配合后期 click  实现可读可写

      2、使用vmodel配合计算属性的get和set 实现可读可写