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>
