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>