7 - 25~29

1、一般项目会将axios放在server文件夹中

2、./  本级目录  ../ 上一级目录

3、'' 需要用 + 号链接   ``  可以将其他类型的变量等使用 ${} 包含起来

4、v-for遍历对象 需要三个参数

              <div v-for="(value, key, index) in obj" :key="index">

MVVM

Model：模型层，数据

View：视图层，DOM，HTML操作的元素

ViewModel：连接前两者的中间件，Vue.js 就是这一层的实现者，核心是DOM监听与数据双向绑定

双向数据绑定：针对UI控件。

如果使用 vuex ，那么数据流是单向的--所以：全局性数据流是单向的，局部性数据流是双向的

单向绑定（data->DOM）：1、插值{{data}} 2、v-bind

双向绑定：v-model 使用位置  "input、select、textarea"

vuex

vuex 和 redux

状态自管理应用

state：驱动应用的数据源

view：以声明方式将 state 映射到视图

actions：响应在 view 上的用户输入导致的状态变化

虽然 vue 和 react 框架本身有自己的状态管理，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性就被破坏

（1）多个视图依赖于同一状态

（2）来自不同视图的行为需要变更同一状态

而 vuex 就是来解决上面两个问题的

Vuex 就是在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

attribute 和 property 的概念

attitude 是元素标签的属性，property 是元素对象的属性

如果在最开始的时候，更新 attribute value 的值，property 的值也会随之改变

但是更新 property value 的值（在文本框输入或给 input.value 赋新值），attribute 的值不会改变，此时再更新 attribute 的值，property 的值也不改变了

所以实际项目中，我们一般都是在处理作为 property 的 value

--> Vue.js 一般使用 :value 即可让 value 作为 property

--> Vue.js 动态组件需要使用 :value.prop 才可以作为 property

（因为 Vue.js 源码中将 value 强制转化为 property 时要满足 !el.component 即不为动态组件，因为动态组件的 el.component 的值为其 is attribute 的值。 即动态组件的 v-bind 默认都是作为 attribute 的，要作为property 就要使用 .prop ）

计算属性

计算属性的 重点突出在 属性 两个字上（属性是名词），首先它是个 属性 其次这个属性有 计算 的能力（计算是动词），这里的计算就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)， 仅此而已，可以想象为缓存

<!--方法通过()调用-->

<p>currentTime方法：{{currentTime1()}}</p>

<!--属性通过属性名称调用-->

<p>currentTime属性：{{currentTime2}}</p>

      methods: {

            currentTime1: function () {

                return Date.now();      //返回当前时间戳

            }

        },

        computed: {     //计算属性：methods和computed中的方法名不能重名！

            currentTime2: function () {

                this.msg;       //当数据发生改动时，会重新计算

                return Date.now();      //返回当前时间戳

            }

        }

调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，如果这个结果是不经常变化的呢?

此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销；

内容分发

在Vue.js 中我们使用<slot>元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中；

1、创建一个课程信息的组件

<div id="app">

    <course>

    

    </course>

</div>

<script type="text/javascript">

    //创建一个课程信息的模板

    Vue.component('course', {

        template:

        '<div>\

            <p>课程信息</p>\

            <ul>\

                <li>Java</li>\

            </ul>\

        </div>'

    });

</script>

2、需要让课程信息的标题和值动态绑定，需要留出一个插槽，将上面的代码留出一个插槽，即slot

<script type="text/javascript">

    //创建一个课程信息的模板

    Vue.component('course', {

        template:

        '<div>\

            <slot name="course-title"></slot>\

            <ul>\

                    <slot name="course-content"></slot>\

            </ul>\

            </div>'

    });

</script>

3、定义一个名为course-title的课程标题组件和course-content的课程内容组件

<script>

    //课程标题组件

    Vue.component('course-title', {

        props: ['title'],

        template: '<p>{{title}}</p>'

    })

    //课程内容组件

    Vue.component('course-content', {

        //这里的index，是数组的下标，使用for循环遍历出来

        props: ['item', 'index'],

        template: '<li>{{index+1}}---{{item}}</li>'

    })

</script>

4、实例化Vue并初始化数据

<script>

    let vm = new Vue({

        el: "#app",

        data: {

            title: "课程信息",

            list: ['Java', 'C++', 'C#'],

        }

    });

</script>

5、将这些值，通过插槽插入

<div id="app">

    <course>

        <course-title slot="course-title" :title="title"></course-title>

        <course-content slot="course-content" v-for="(item,index) in list" :item="item"

                        :index="index"></course-content>

    </course>

</div>

搭建项目 删除node_modules

解决公司安装限制

npm i --ignore-scripts

解决删除node_modules文件夹需要权限，同意后仍然删除失败的问题

1、在node_modules文件夹所在的目录打开cmd窗口，安装包管理器：rimraf 。rimraf 包的作用：以包的形式包装rm -rf命令，用来删除文件和文件夹的，不管文件夹是否为空，都可删除.

npm install rimraf -g

2、执行删除命令

rimraf node_modules

Object与Map区别

Map是Object的一个子类，可以有序保存任意类型的数据，使用键值对去存储，其中键可以存储任意类型

打印出来这种效果的：{__ob__: Observer} 是 object 类型

打印出来这种效果的：(2) ['inquestContinuedTime', 'singleInterrogateTime'] 是 map 类型

 想要将 object 类型转换成 map 类型需要使用

let map = Object.keys(object)

如果该对象必须通过JSON转换的，则只能用对象，目前暂不支持Map

写文档要偏向产品方向

“参与内外部客/用户需求沟通，准确有效地把用户需求转化为软件需求”

需求这项越往上越看需求分析的能力，体现的是将用户需求转化为产品需求的能力。