当前位置: 首页 > 编程日记 > 正文

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>

转载于:https://www.cnblogs.com/sqh17/p/10720673.html

相关文章:

Linux NUMA 架构 :基础软件工程师需要知道一些知识

文章目录前言从物理CPU、core到HT(hyper-threading)UMA&#xff08;Uniform memory access&#xff09;NUMA架构NUMA下的内存分配策略1. MPOL_DEFAULT2. MPOL_BIND3. MPOL_INTERLEAVE4. MPOL_PREFERRED5. 一些NUMA架构下的内核配置总结参考前言 NUMA&#xff08;Non-Uniform m…

Java项目:网上书城+后台管理系统(java+jsp+servlert+mysql+ajax)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 一、项目简述(附带IW文档) 功能&#xff1a; 前台&#xff1a; * 用户模块 * 分类模块 * 图书模块 * 购物车模块 * 订单模块 后台&#xff1a; * 管理员模块 * 分类管理模块 * 图书管理模块 * 订单模块 …

java.util.concurrent包API学习笔记

newFixedThreadPool 创建一个固定大小的线程池。 shutdown()&#xff1a;用于关闭启动线程&#xff0c;如果不调用该语句&#xff0c;jvm不会关闭。 awaitTermination()&#xff1a;用于等待子线程结束&#xff0c;再继续执行下面的代码。该例中我设置一直等着子线程结束。Java…

oracle读书记录

很久没有关注自己怕博客了&#xff0c;差不多有两年了。虽然这两年来一直关注51CTO,每天上班打开电脑或者周末在家开启电脑的时候都会浏览一下&#xff0c;这已经是习惯了&#xff0c;但是把自己的blog给忘了。今天&#xff0c;周末&#xff0c;2013年12月21日&#xff0c;同往…

输入、方法的运用

/ /猜数游戏,编写一个功能,完成猜数游戏,产生一个1~10之间的随机数 //与输入的数对对比,返回结果 猜中和没猜中 import java.util.Scanner; //引入&#xff08;输入&#xff09;的util包Scanner public class HelloWorld { public static void main(String[] args) {System…

Rocksdb 利用recycle_log_file_num 重用wal-log文件

recycle_log_file_num 复用wal文件信息&#xff0c; 优化wal文件的空间分配&#xff0c;减少pagecache中文件元信息的更新开销。 为同事提供了一组rocksdb写优化参数之后有一个疑惑的现象被问到&#xff0c;发现之前的一些代码细节有遗忘情况&#xff0c;同时也发现了这个参数…

Java项目:网上商城系统(java+jsp+servlert+mysql+ajax)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 一、项目简述&#xff08;需求文档PPT&#xff09; 功能&#xff1a; 主页显示热销商品&#xff1b;所有商品展示&#xff0c;可进行商品搜索&#xff1b;点 击商品进入商品详情页&#xff0c;显示库存&…

clock函数返回负值~ (转)

使用clock() 函数来进行计时&#xff0c;时不时的返回一个很大的负数&#xff0c;怎么检查也检查不出错误&#xff0c;现在找出错误原因&#xff0c;给大家分享一下。 来源网页&#xff1a;http://kebe-jea.blogbus.com/logs/33603387.html 跑实验的时候&#xff0c;结果时不时…

c实现面向对象编程(3)

http://blog.csdn.net/kennyrose/article/details/7564105转载于:https://www.cnblogs.com/pengkunfan/p/3486612.html

echarts - 条形图grid设置距离绘图区域的距离

在一些数据量过大的情况下&#xff0c;在一个固定的区域绘图往往需要对图表绘制区域的大小进行动态改变。这时候设置条形图距离绘图区域上下左右的距离可使用如下方式&#xff1a;表示条形图的柱子距离绘图区左边30%&#xff0c;距离右边40%&#xff0c;而距离顶部和底部分别为…

TitanDB 中使用Compaction Filter ,产生了预期之外几十倍的读I/O

Compaction过程中 产生大量读I/O 的背景 项目中因大value 需求&#xff0c;引入了PingCap 参考Wisckey 思想实现的key-value分离存储 titan&#xff0c; 使用过程中因为有用到Rocksdb本身的 CompactionFilter功能&#xff0c;所以就直接用TitanDB的option 传入了compaction fi…

Java项目:前台+后台精品图书管理系统(java+SSM+jsp+mysql+maven)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 一、项目简述 功能包括&#xff1a; 登录注册&#xff0c;办理借阅。借阅记录&#xff0c;预约借阅&#xff0c;借出未还, 借阅逾期&#xff0c;学生管理&#xff0c;图书管理&#xff0c;书库分类查询搜索…

消除 activity 启动时白屏、黑屏问题

默认情况下 activity 启动的时候先把屏幕刷成白色&#xff0c;再绘制界面&#xff0c;绘制界面或多或少有点延迟&#xff0c;这段时间中你看到的就是白屏&#xff0c;显然影响用户体验&#xff0c;怎么消除呢&#xff1f; 在 Activity theme 设置style 即可 1 <style na…

理解并实施:HSRP(CCNA200-120新增考点)

理解并实施:HSRP思科热备路由器协议HSRP&#xff08;HotStandby Router Protocol&#xff09;是企业级网络路由器的故障冗余服务。如图9.116所示&#xff0c;192.168.2.0/24的子网需要与目标192.168.5.2的计算机通信。192.168.2.0/24的子网有两台出口路由器&#xff0c;一台是R…

使用机智云APP控制战舰V3 (转)

源&#xff1a;使用机智云APP控制战舰V3 转载于:https://www.cnblogs.com/LittleTiger/p/10725586.html

从JoinBatchGroup 代码细节 来看Rocksdb的相比于leveldb的写入优势

文章目录1. Rocksdb写入模型2. LevelDB写入的优化点3. Rocksdb 的优化1. Busy Loop2. Short Wait -- SOMETIMES busy Loop3. Long-wait4. 测试验证4. 总结1. Rocksdb写入模型 本节讨论一下Rocksdb在写入链路上的一个优化点&#xff0c;这个优化细节可以说将Rocksdb这个存储引擎…

Java项目:嘟嘟网上商城系统(java+jdbc+jsp+mysql+ajax)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 一、项目简述 功能&#xff1a; 商品的分类展示&#xff0c;用户的注册登录&#xff0c;购物车&#xff0c;订单结算&#xff0c; 购物车加减&#xff0c;后台商品管理&#xff0c;分类管理&#xff0c;订单…

SOAPUI请求及mockservice 使用

1、新建soap Project&#xff0c;输入wsdl的地址&#xff0c;运行request 2.邮件Project&#xff0c;建立mockservice&#xff0c;建立多个response&#xff0c;选在mock operation&#xff0c;选择response dispa…

空间直角坐标系与球面坐标互转

空间直角坐标系与球面坐标互转 1 using System;2 using System.Collections.Generic;3 using System.Linq;4 using System.Text;5 6 namespace AppSurveryTools.SphericalAndCartesian7 {8 class CartesianCoord9 { 10 public double x; 11 public dou…

Ajax 的优势和不足

Ajax 的优势 1. 不需要插件支持 Ajax 不需要任何浏览器插件&#xff0c;就可以被绝大多数主流浏览器所支持&#xff0c;用户只需要允许 JavaScript 在浏览器上执行即可。 2. 优秀的用户体验 这是 Ajax 技术的最大优点&#xff0c;能在不刷新整个页面的前提下更新数据&#xff0…

BitCask 持久化hash存储引擎 原理介绍

文章目录前言引擎背景引擎原理1. 磁盘数据结构2. 内存数据结构3. 读流程4. 数据合并总结前言 最近工作中部分项目中&#xff0c;对存储引擎的需求希望高性能的写、点查&#xff0c;并不需要Range。这里看到大家总会提到BitCask这个存储引擎方案&#xff0c;并不是很了解&#…

C# Socket系列三 socket通信的封包和拆包

通过系列二 我们已经实现了socket的简单通信 接下来我们测试一下&#xff0c;在时间应用的场景下&#xff0c;我们会快速且大量的传输数据的情况&#xff01; 1 class Program2 {3 static void Main(string[] args)4 {5 TCPListener tcp n…

Java项目:CRM客户管理系统(java+SSM+jsp+mysql+maven)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 一、项目简述 功能包括&#xff1a; 用户管理&#xff0c;系统管理&#xff0c;客户管理&#xff0c;客户服务&#xff0c;客户关怀, 销售机会&#xff0c;统计管理等等。 二、项目运行 环境配置&#x…

Android 获取标题栏的高度

2019独角兽企业重金招聘Python工程师标准>>> 通过获取内容区域的 rect 的 top 值就是状态栏和标题栏的高度&#xff0c;也就可以得到标题栏的高度了&#xff0c; [java] view plaincopy int contentTop getWindow().findViewById(Window.ID_ANDROID_CONTENT).getTo…

力扣—— 三维形体投影面积

在 N * N 的网格中&#xff0c;我们放置了一些与 x&#xff0c;y&#xff0c;z 三轴对齐的 1 * 1 * 1 立方体。 每个值 v grid[i][j] 表示 v 个正方体叠放在单元格 (i, j) 上。 现在&#xff0c;我们查看这些立方体在 xy、yz 和 zx 平面上的投影。 投影就像影子&#xff0c;将…

一图带你入门Linux 存储I/O栈

发现了一个内核大佬 的 Linux 存储I/O栈&#xff0c;很清晰&#xff01;&#xff01;&#xff01; 原地址如下&#xff1a; http://ilinuxkernel.com/?p1559 【侵删】

Java项目:在线美食网站系统(java+SSM+jsp+mysql+maven)

源码获取&#xff1a;博客首页 "资源" 里下载&#xff01; 一、项目简述 功能&#xff1a;用户的注册登录&#xff0c;美食浏览&#xff0c;美食文化&#xff0c;收藏百 科&#xff0c;趣味问答&#xff0c;食谱等等功能等等。 二、项目运行 环境配置&#xff1a;…

性能测试中传——lr理论基础(四)

转载于:https://blog.51cto.com/fuwenchao/1346435

滑动定位的三种方法,以及热启动(五)

from init_driver.Init_driver import init_driverdriver init_driver()# 坐标-->坐标&#xff0c;定位滑动 driver.swipe(309, 1353, 537, 511, duration3000)# 元素-->元素&#xff0c;定位滑动 start_ele driver.find_element_by_xpath("//*[contains(text, 通…

TitanDB GC详细实现原理 及其 引入的问题

文章目录1. 为什么要有GC2. GC的触发条件3. GC的核心逻辑1. blob file形态2. GC Prepare3. GC pick file4. GC run4. GC 引入的问题5. Titan的测试代码通过本篇&#xff0c;能够从TitanDB的源代码中看到 key/value 分离之后引入的一些复杂性&#xff0c;这个复杂性很难避免。 …