Tokisaki_Kurumi-CSDN博客

原创 vscode在写canvas时没有代码提示的解决方案

在使用vscode时，没有代码提示，我们需要在获取canvas的dom对象的上一行输入/** @type {HTMLCanvasElement} */例如： /** @type {HTMLCanvasElement} */ let canvas1 = document.querySelector('#canvas1')即可获得代码提示...

2021-11-26 11:30:28 608

原创 vue3中v-model结合了vue2中的.sync语法

示例：父组件：<template> <div>{{count}}</div> <hr/> <Son v-model:changeCount="count"></Son></template

2021-10-28 11:16:18 453

组件通信在函数组件中通过接收props参数可以直接获取传入的状态在类组件中使用this.props获取props可以传递任意状态、jsx语法、函数等等import React from "react";import ReactDOM from 'react-dom'// const Hello = props => {// return (// <div>// <h1>props： {props.name}&l

2021-08-19 18:31:40 245

原创 React学习一

基础：首先导入React和ReactDOMimport React from "react";import ReactDOM from 'react-dom'HTML结构可以使用JSX语法：const killers = [ {id:1,name:'zhangsan'}, {id:2,name:'lisi'}, {id:3,name:'wangwu'}]const html = ( <div> { killers.map(item=>

2021-08-18 15:49:15 209

原创 Typescript学习——类型声明(初稿，后续可能会修改)

Typescript在声明变量时，可以对这个变量的类型进行声明。如果后续赋值不符合要求，会报错（但不会影响编译成js）let a:string //a只能被字符串类型赋值let b:string = 'hello' //a只能被字符串类型赋值，同时给a赋值为'hello'最基础的类型声明，Typescript除了js基础的数据类型外，额外定义了一些其他类型TypeScript 包含的数据类型有：类型描述number任意数字string任意字符串boolean

2021-07-13 17:38:25 280

原创原生js实现图片预览

<html><body><input type="file"><img src="" alt="" width="200px"><script> const ipt = doucument.querySelector('input') const img = doucument.querySelector('img') ipt.addEventListener('change',(e)=>{ //console.log(e

2021-06-27 19:12:38 326

转载 vue2数据响应原理核心 Object.defineProperty() 深入浅出的讲解

讲解大致会根据下图展开本文部分参考了书籍《你不知道的javascript》上卷对象的定义与赋值经常使用的定义与赋值方法obj.prop =value或者obj['prop']=valueObject.defineProperty()语法说明Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性Object.defineProperty(obj, prop, desc)obj 需要定义属性的当前对象prop 当前需要定义的

2021-06-16 20:40:27 534

转载 vue3数据响应原理Proxy——阮一峰

《ES6标准入门》(阮一峰)–14.Proxy1.概述Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。var obj = new Proxy({}, { get:

2021-06-16 08:31:04 4511

原创 vue组件通信—依赖注入provide和inject基础使用

场景：父组件的数据要共享给所有的子孙组件就可以使用provide和inject注意点：父组件暴露的数据不是响应式的<script>import Son from './components/Son.vue'export default { components: { Son }, data(){ return { money: 100 } }, // 1.如果父组件的数据要共享给所有的后代组件数据, 可以使用provide来暴露提供数据 .

2021-05-26 17:56:24 222

原创 vuex状态管理基础使用

vuex是vue的集中状态管理工具，状态就是数据。状态管理就是集中管理vue中**通用**的一些数据。使用场景：多个组件共享同一份数据，才会将这个数据放在vuex中，组件内部自己使用的数据还是放在组件的data中。不是所有的场景都适用于vuex，只有在必要的时候才使用vuex使用了vuex之后，会附加更多的框架中的概念进来，增加了项目的复杂度vuex的优点：方便的解决多组件的共享状态vuex的作用是解决多组件状态共享的问题。它是独立于组件而单独存在的，所有的组件都可以把它当作一座桥梁.

2021-05-26 17:48:38 377 2

原创 Vue路由——路由嵌套和前置守卫

路由嵌套main.js– 继续配置2级路由一级路由path从/开始定义二级路由往后path直接写名字, 无需 / 开头嵌套路由在上级路由的children数组里编写路由信息对象onst routes = [ // ...省略其他 { path: "/find", name: "Find", component: Find, children: [ { path: "componentOne", component:

2021-05-23 18:28:47 406

原创 Vue路由——编程式导航

编程式导航 - 基础使用编程式导航是使用JS代码进行跳转语法：this.$router.push({ path: "路由路径", // 都去 router/index.js定义 name: "路由名" //path和name二选一})path方法也可以简写this.$router.push({ path: "路由路径"})//上面的也可以简写为：this.$router.push('路由路径')注意：如果使用name方法必须要在main.js里给路由取

2021-05-23 15:32:42 240

原创 Vue路由——重定向、模式、404页面

重定向配置了路由后，页面刚打开是空的，所以需要设置默认初始页面。第一种方法是：const routes = [ { path :"/", component:Find }, { path:"/find", component:Find }]缺点，初始"/"页面和“/find”页面效果一样解决：利用重定向：const routes = [ { path: "/", // 默认hash值路径 redirect: "/find" // 重定向到/

2021-05-23 15:14:59 364

原创 Vue路由——声明式导航及跳转传参

<template> <div> <div class="footer_wrap"> <router-link to="/find">发现音乐</router-link> <router-link to="/my">我的音乐</router-link> <router-link to="/part">朋友</router-link> /

2021-05-23 11:40:57 1241

原创 Vue路由——vue-router基础使用

安装yarn add vue-router导入路由import VueRouter from 'vue-router'使用路由插件// 在vue中，使用使用vue的插件，都需要调用Vue.use()Vue.use(VueRouter)创建路由规则数组const routes = [ { path: "/find", component: Find }, { path: "/my", component: My }, { pat

2021-05-23 10:47:58 170

原创 Vue中对父传子的值进行自定义校验

<template> <div> </div></template><script>export default { props:{ arr:{ type:Array, required:true, validator(val){ //val是父传子传递过来的数组 //validator函数必须要有返回值，true是验证通过，false是验证失败 if(val.length<

2021-05-22 21:20:35 378

原创 Vue自定义指令

除了核心功能内置的指令:v-bind v-model v-show等等，Vue也允许注册自定义指令。当你需要对DOM元素进行底层操作时，就会用到自定义指令。局部注册和使用自定义指令：<template> <div> <input type="text" v-focus> //在标签上使用自定义指令 v-指令名 </div></template><script>export defau.

2021-05-22 21:03:15 117

原创 Vue组件——组件插槽

组件插槽：vue提供的组件插槽，允许开发者在封装组件时，将不确定的需要额外自定义的部分定义为插槽。1、匿名插槽：组件内插槽占位：<template> <div> <h4>组件插槽</h4> //<p>这是组件插槽示例</p> <slot> //slot在组件内占位 //如果slot内写dom结构及内容，则作为未替换时的默认值 </slot> </div></t

2021-05-22 20:49:35 295

原创 VUE组件——动态组件、组件缓存

动态组件：多个组件同时使用同一个挂载点，并动态的进行切换，就是动态组件<template> <div> <button @click="comName = 'page1'">page1</button> <button @click="comName = 'page2'">page2</button> <p>下面显示注册组件-动态切换:</p> <di

2021-05-22 20:06:15 246

原创原生js使用ajax请求,form表单提交文件

get请求let xhr = new XMLHttpRequest(); //构造函数没有参数的情况,括号可以省略xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')//open函数，指定请求方式和URL地址，如果请求方式是get,传递参数需要把参数列表用?拼接到url地址后面xhr.send()//send函数，发起Ajax请求，get方法可以写null也可以省略xhr.onreadystatechange = f

2021-04-26 19:46:21 1831

原创不安全线程案例3

import java.util.ArrayList;import java.util.List;//线程不安全的集合public class UnsafeList { public static void main(String[] args) { List<String> list = new ArrayList<>(); for (int i = 0; i < 10000; i++) { new T

2020-09-11 22:32:34 92

原创不安全线程案例2

//不安全的取钱//两个人去银行取钱，账户public class UnsafeBank { public static void main(String[] args) { Account account = new Account(1000000,"银行卡"); Drawing you = new Drawing(account,500000,"你"); Drawing girlfriend = new Drawing(account,500

2020-09-11 22:32:04 178

原创不安全线程案例1

//不安全的买票public class UnsafeBuyTicket { public static void main(String[] args) { BuyTicket station = new BuyTicket(); new Thread(station,"我").start(); new Thread(station,"你").start(); new Thread(station,"他").start();

2020-09-11 22:31:32 105

原创线程的优先级

//测试线程的优先级public class TestPriority{ public static void main(String[] args) { //主线程默认优先级 System.out.println(Thread.currentThread().getName()+"-->"+Thread.currentThread().getPriority()); MyPriority myPriority = new MyPriori

2020-09-10 13:59:55 323

原创观测线程的状态

//观察测试线程的状态public class TestState { public static void main(String[] args) throws InterruptedException { Thread thread = new Thread(()->{ for (int i = 0; i < 5; i++) { try { Thread.sleep(

2020-09-10 13:59:22 179

原创线程强制执行 join

//测试join方法，想象为插队public class TestJoin implements Runnable{ @Override public void run() { for (int i = 0; i < 100; i++) { System.out.println("线程vip来了"); } } public static void main(String[] args)

2020-09-10 13:57:35 152

原创线程礼让 yield

//测试礼让线程//礼让不一定成功，看cpu心情public class TestYield { public static void main(String[] args) { MyYield myYield = new MyYield(); new Thread(myYield,"a").start(); new Thread(myYield,"b").start(); }}class MyYield implements

2020-09-10 13:56:36 100

原创线程状态-线程休眠 sleep

import java.text.SimpleDateFormat;import java.util.Date;//模拟网络延时public class TestSleep { public static void main(String[] args) { //打印当前系统时间 Date starTime = new Date(System.currentTimeMillis());//获取系统当前时间 while (true){

2020-09-10 13:55:57 333

原创线程状态-线程停止 stop

//测试stop//1.建议线程正常停止--->利用次数，不建议死循环//2.建议使用标志位--->设置一个标志位//3.不要使用stop或者destroy等过时或者JDK不建议使用的方法public class TestStop implements Runnable{ //1.设置一个标志位 private boolean flag = true; @Override public void run() { int i = 0;

2020-09-10 13:55:15 362

原创静态代理模式来理解Lambda

//静态代理模式总结：//真实对象和代理对象都要事先同一个接口//代理对象要代理真实角色//好处： //代理对象可以做很多真实对象做不了的事情 //真实对象专注做自己的事情public class StaticProxy { public static void main(String[] args) { WeddingCompony weddingCompony = new WeddingCompony(new You()); weddi

2020-09-03 15:52:22 191

原创 lambda表达式简化2

public class TestLambda2 { public static void main(String[] args) { Ilove love = null;/* Ilove love= (int a)-> { System.out.println("i love you-->"+a); }; //简化1.去掉参数类型 love= (a)-> {

2020-09-02 15:57:35 188

原创 lambda表达式简化

/*推导lambda表达式 */public class TestLambda1 { //3.静态内部类 static class Like2 implements Ilike{ @Override public void lambda() { System.out.println("i like lambda2"); } } public static void main(String[]

2020-09-02 15:56:59 143

原创多线程3-实现callable接口

import org.apache.commons.io.FileUtils;import java.io.File;import java.io.IOException;import java.net.URL;import java.util.concurrent.*;//线程创建方式三：实现callable接口/* */public class TestCallabele implements Callable<Boolean> { private Strin

2020-09-01 16:24:14 146

原创多线程龟兔赛跑

//模拟龟兔赛跑public class Race implements Runnable{ //胜利者 private static String winner; @Override public void run() { for (int i = 0; i <= 100; i++) { //模拟兔子睡觉 if(Thread.currentThread().getName().equals("兔子

2020-09-01 15:07:45 145

原创多线程2-Runnable接口

//创建线程方式2：实现runnable接口，重写run方法，执行线程需要丢入runnable接口实现类，调用start方法。public class TestThread3 implements Runnable{ @Override public void run() { //run方法线程体 for (int i = 0; i < 20; i++) { System.out.println("我在看代码---"+i);

2020-09-01 14:40:22 112

原创多线程1-Thread

import org.apache.commons.io.FileUtils;import java.io.File;import java.io.IOException;import java.net.URL;//联系Thread，实现多线程同步下载图片public class TestThread2 extends Thread{ private String url; //网络图片地址 private String name; //保存的文件名 pu

2020-08-31 16:49:17 223

原创继承

super注意点：1.super调用父类的构造方法，必须在构造方法的第一个2.super必须只能出现在子类的方法或者构造方法中3.super和this不能同时调用构造方法Vs this代表的对象不同：this：本身调用这个对象super：代表父类对象的应用前提this:没有继承也可以使用super：只能在继承条件才可以使用构造方法this() ：本类的构造super() ：父类的构造重写：需要有继承关系，子类重写父类的方法1.方法名必须相同2.参数列表必须相同3.修饰符：范

2020-08-24 08:19:47 121

原创构造器

package com.oop.Demo02;public class Person { //一个类即使什么都不写，它也会存在一个方法 //显示的定义构造器 String name; //实例化初始值 //1.使用new关键字，本质是在调用构造器 //2.用来初始化值 public Person(){ this.name = "王楠"; } //有参构造:一旦定义了有参构造，无参就必须显示定义 publ

2020-08-22 13:09:55 167

原创稀疏数组的转换与还原

public class ArrayDemo08 { public static void main(String[] args) { //1.创建一个二维数组 11*11 0：没有旗子， 1：黑棋 2：白棋 int[][] array1 = new int[11][11]; array1[1][2] = 1; array1[2][3] = 2; //输出原始的数组 System.out

2020-08-22 08:55:03 229

原创八大算法-冒泡排序

import java.util.Arrays;public class ArraysDemo07 { public static void main(String[] args) { int[ ] a = {1,5,7,9,23,11,232,24,54}; int[] sort = sort(a);//调用完我们自己写的排序方法后，返回一个排序后的数组 System.out.println(Arrays.toString(sort));

2020-08-21 18:13:15 155

空空如也

空空如也