0409-0416的笔记

1 获取前几天，近几个月的时间

  function getDay(day) {
    var today = new Date();

    var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
    today.setTime(targetday_milliseconds); //注意，这行是关键代码
    var tYear = today.getFullYear();
    var tMonth = today.getMonth();
    var tDate = today.getDate();
    tMonth = doHandle(tMonth + 1);
    tDate = doHandle(tDate);
    console.log(tYear + "-" + tMonth + "-" + tDate)
    return tYear + "-" + tMonth + "-" + tDate;
  }
  function doHandle(val) {
    return val.toString().length === 1?`0${val}`:val;
  }
  getDay(0); //当天日期
  getDay(3); // 前三天
  getDay(7); // 前一周
  getDay(31); // 近一个月

2 vue的$nextTick()

官方说法：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新
简单来说，Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

3 vue的$set

在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。
根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
根据vue的两大缺陷：无法对对象添加新属性和删除新属性，二是不支持通过索引去设置数组成员，但官方又定义：Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上

$set可以解决这两者问题。

data () {
  return {
    arr: ['one','two','three'],
    obj: {
      name: 'peter',
      age: 26
    }
  }
}
methods: {
  btnclick () {
    this.arr[0] = 'four' // 这样数据发生了改变，但视图未更新
    this.$set(this.arr,0,'four') // 两者都改变
    this.$set(this.obj,'color','red')
  }
}

4 vue的watch

watch是类似于methods一样的对象，既然是对象，那么就有键值对，
键：就是你要监控的那个家伙，比如说$route，已存在的data的值，这个就是要监控路由的变化。或者是data中的某个变量，只要值发生了改变就会触发
值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。

  a: function (val, oldVal) {
    console.log(val,oldVal)
  }

值也可以是函数名：不过这个函数名要用单引号来包裹。

  b:'clickbtn'

值可以是对象，包括选项的对象
选项包括有三个。

• 第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。

• 第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）

• 第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。（页面加载之初先执行一次handler）

  c: {
    handler: function (val, oldVal) { /* ... */ },
    deep: true，
    immediate: true
  }
  

5 获取对象的长度

var obj = {'name' : 'Tom' , 'sex' : 'male' , 'age' : '14'};
var arr = Object.keys(obj);
console.log(arr);  // ['name','sex','age']
console.log(arr.length);  //3

6 vue的父调子的方法

父组件可以通过ref的方式去调用子组件的方法和值，具体：父组件想调用子组件的方法，可以在子组件中加上ref，然后通过this.$refs.ref.method调用

父组件：

  <template>
    <div @click="parent">
      <child ref="child"></child>
    </div>
  </template>
  <script>
    import child from '~/components/dam/child.vue';
    export default {
      components: {
        child
      },
      methods: {
        parent() {
          this.$refs.child.child();
        }
      }
    };
  </script>

子组件：

  <template>
    <div>{{name}}</div>
  </template>
  <script>
    export default {
      data() {
        return {
          name: '测试'
        };
      },
      methods: {
        child() {
          console.log(this.name);
        }
      }
    };
  </script>

在父组件中， this.$refs.child 返回的是一个vue实例，可以直接调用这个实例的方法，同样的也可以取到子组件的值。

7 vue的子调父的方法

子组件调用父组件有三种方式：

• 直接在子组件中通过this.$parent.event来调用父组件的方法

  父组件

    <template>
      <div>
        <child></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default {
        components: {
          child
        },
        methods: {
          parent() {
            console.log('测试');
          }
        }
      };
    </script>
  

  子组件

    <template>
      <div>
        <button @click="child()">点击</button>
      </div>
    </template>
    <script>
      export default {
        methods: {
          child() {
            this.$parent.parent();
          }
        }
      };
    </script>
  

• 在子组件里用$emit向父组件触发一个事件，父组件监听这个事件

  父组件

    <template>
      <div>
        <child @parent="parent"></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default {
        components: {
          child
        },
        methods: {
          parent() {
            console.log('测试');
          }
        }
      };
    </script>
  

  子组件

    <template>
      <div>
        <button @click="child()">点击</button>
      </div>
    </template>
    <script>
      export default {
        methods: {
          child() {
            this.$emit('fatherMethod');
          }
        }
      };
    </script>
  

• 父组件把方法传入子组件中，在子组件里直接调用这个方法

  父组件

    <template>
      <div>
        <child :parent="parent"></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default {
        components: {
          child
        },
        methods: {
          parent() {
            console.log('测试');
          }
        }
      };
    </script>
  

  子组件

    <template>
      <div>
        <button @click="childMethod()">点击</button>
      </div>
    </template>
    <script>
      export default {
        props: {
          fatherMethod: {
            type: Function,
            default: null
          }
        },
        methods: {
          childMethod() {
            if (this.fatherMethod) {
              this.fatherMethod();
            }
          }
        }
      };
    </script>