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>