qq_52006958的博客

原创 vue3中ref和reactive响应式数据、ref模板引用(组合式和选项式区别)、组件ref的使用

如果需要一个响应式原始值，那么使用 ref() 是正确的选择，要注意是原始值如果需要一个响应式对象，层级不深，那么使用 ref 也可以如果需要一个响应式可变对象，并且对象层级较深，需要深度跟踪，那么使用 reactive

原创 vue3中Watch和WatchEffect的用法和区别

watch 和 watchEffect 的主要功能是相同的，都能响应式地执行回调函数。它们的区别是追踪响应式依赖的方式不同：watch 只追踪明确定义的数据源，不会追踪在回调中访问到的东西；默认情况下，只有在数据源发生改变时才会触发回调；watch 可以访问侦听数据的新值和旧值。watchEffect会初始化执行一次，在副作用发生期间追踪依赖，自动分析出侦听数据源；watchEffect 无法访问侦听数据的新值和旧值。简单一句话，watch 功能更强大，而 watchEffect 在某些场景下更简洁

原创 vue3父子组件props传值，defineprops怎么用？(组合式)

有时候为了方便使用父组件通过props传递过来的值，子组件一般会直接解构拿到父组件传来的值（这里使用message1和message2进行展示）-- 子组件 --><template><div></div>//解构赋值props},});//在JS中直接使用message1,message2的值</script>这样做可以直接使用message1和message2，无需props.message1和props.message2。

原创 vue3中的计算属性到底怎么写？使用场景？

目录1.Vue3中的计算属性（Computed Properties）2.在vue3中创建计算属性3.计算属性的读写4.计算属性的缓存机制5.使用场景 6.小结在上述代码中，doubleCount 是一个计算属性，它的值是 state.count 的两倍。当 state.count 的值发生变化时，doubleCount 的值也会自动更新。 在这个例子中，fullName 是一个可写的计算属性。当我们尝试设置 fullName 的值时，set 函数会被调用，允许我们根据新值更新 state.fi

原创 vue3中遍历数组都有哪些方法？

语句在可迭代对象（包括Array，Map，Set，String，TypedArray，arguments对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。来提供每个元素的唯一键值，这有助于Vue跟踪每个节点的身份，从而重用和重新排序现有元素。方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。方法是ES6中引入的数组遍历方法，它为数组中的每个元素执行一次提供的函数。在选择数组遍历方法时，应考虑到具体的应用场景和需求，以选择最合适的方法。

原创 vue3中v-for指令的详解

通过这些方法，Vue 3使得数组和对象的遍历变得简单而高效，为开发者提供了灵活的方式来处理和显示列表数据。遍历对象数组与遍历普通数组类似，但是我们可以访问数组中对象的属性。指令可以用来遍历数组，并且在每次迭代中提供当前项的值和索引。，即传递props将迭代后的数据传递到组件中，因为组件有自己独立的作用域。属性)，它能帮助Vue跟踪每个列表项的唯一性，这对于高效的DOM更新非常重要。是一个必要的属性，一般我们对每个key绑定一个唯一值(一般是。指令，它是一个强大的内置指令，用于基于源数据。

原创 vue中三种插槽(默认插槽、具名插槽、作用域插槽)的使用方法

插槽：简单来说就是在组件的内部留一个或多个空白的位置，可供其他使用它的组件传对应的模板代码进去。插槽让组件复用变的更加灵活了。实际上，我们希望达到的效果是插槽对应的内容插入显示，这个时候我们就可以使用。例如：v-slot:header 可以被写为 #header。你可以在组件的模板中使用。具名插槽在使用时也可以缩写。在Vue3中，插槽被称为。元素来声明一个插槽。

原创 vue3.4后新增的definemodel是干什么的，到底怎么用！

vue3.4以后我们可以使用definemodel进行组件之间的数据双向绑定，可以不用props和emit这种写法比较复杂来进行组件之间的数据传递。

原创 vue3中使用mock.js模拟数据(前端mock数据)

一般我们放在将mock模拟的数据（ /src/mock/index.js）这个文件中，这里以此为例。前后端同时开发的时候，后端接口数据没有出来，前端可以使用mock模拟假数据，进行页面的开发；（这里为了使大家可以看懂，就不封装axios了，直接使用axios对接口进行数据请求了）@integer(60,70) 60 到 70 之间的整数。@csentence(1,5) 生成1到5个字的中文句子。@string(11) 输出11 个字符长度的字符串。@float(0,10) 0 到 10 的浮点数。

原创 搞懂内存泄漏到底是什么，造成内存泄漏的常见原因以及对应的解决方法

由于 js 对未声明变量的处理方式是在全局对象上创建该变量的引用，它在窗口关闭或重新刷新页面之前都不会被释放，如果未声明的变量缓存大量的数据，就会导致内存泄露。尽量在定义变量之后再使用，或者使用JS严格模式(在 JavaScript 文件头部或者函数的顶部加上 use strict)。定时器中有 dom 的引用，即使 dom 删除了，但是定时器还在，所以内存中还是有这个 dom。将事件处理函数定义在外部，解除闭包，或者在定义事件处理函数的外部函数中。在组件/元素卸载或不再需要时，手动删除事件监听器。

原创 理解JS链式调用

JS，链式调用，概念，原理，优点，应用场景，案例

原创 C语言——putchar（）用法

（从putchar名字末尾的 char 也可以看出。（1）当c为一个被单引号（英文状态下）引起来的字符时，输出该字符（注：该字符也可为转义字符）；（2）当c为一个介于0~127（包括0及127）之间的十进制整型数时，（）它会被视为对应字符的ASCII代码，输出该ASCII代码对应的字符；putchar函数的基本格式为：putchar(c）。（3）当c为一个事先用char定义好的字符型变量时，（1、putchar就是用来输出（显示到屏幕的）的。注：ASCII码97对应字符’a’），输出该变量所指向的字符。

原创 CSS知识点整理与总结

显示模式转换块级标签转为行内标签模式div { display:inline; }行内标签模式转为块级模式span { display:block; }行内标签模式转为行内块模式a { display:inline-block; }单行文字垂直居中原理: 行高的上空隙和下空隙把文字挤到中间了,是如果行高小于盒子高度，文字会偏上，如果行高小于盒子高度，则文字偏下，上下空隙和和平均分布//盒子高度40pxp { .

原创 css知识点总结

前言css是页面的化妆师，也是每个前端必须要掌握的基础。基础字体设置各种字体之间必须使用英文状态下的逗号隔开。现在网页中普遍使用14px+中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-fanily:‘Times new Roman’;尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示尽量不用中文,有兼容问题,最好用对

原创 html入门基础

编写工具:aptana/dreamweaver/常用的标记与格式: <br/><strong>标题标记</strong> *标题1 有六种字号 号越小字越大 这里表示段落 p>空格 空格   123 在本条代码中出现了多条强制换行符标准写法为 横线 **物理字体**:这个是粗体这个是下划线≤I>这个定科1体这个是删除线 这个是.上标这个是下标**逻辑字体:**这个是强调这个

原创 html基础知识点

1. 前端开发的核心语言HTML——结构CSS——样式JS——行为2.HTML（Hypertext Markup Language）翻译过来就是 超文本标记语言。超文本即超越文本，可以显示 文字 图片 视频 音频，最重要的是可以包含超链接。标记语言：当我们把特定的英文单词放入到我们的标记（单标记:</>、双标记<></>）当中，我们的标记具有了新的语义,而由具有特定语义的标记的规范，我们可以称之为标记语言。当我们将英语单词放入到标记当中，这时候我们可以称之为

原创 银行管理系统 Java语句

//Bank类import java.util.TreeSet;//银行类public class Bank { private String Bankname = "中国666银行"; //银行名称 TreeSet<User> holder = null; //银行存储的信息 private static Bank INSTANCE = new Bank(); private Bank() {}

原创 一个简陋的图书管理系统 重要管理部分源代码

import java.io.File;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.util.Scanner;import java.io.IOException;public class Book { public void find(){ Menu menu = new Menu(); menu.getFindMenu(); Scanner reader = new

原创 一个简陋的图书管理系统 主函数部分

public class ManageBook { public static void main(String[] agse){ Menu menu = new Menu(); Book book = new Book(); while(true){ menu.getMenu(); int num = menu.setMenu(); switch(num){ case 1: book.getBook(); break; case 2: book.setBook

原创 一个简陋的图书管理系统 菜单界面源代码

import java.util.Scanner;public class Menu { int Min = 1; int Max = 3; public void getMenu(){ System.out.println("1、显示/2、输入/3、查找"); } public void getFindMenu(){ System.out.println("1、编号/2、书名/3、作者"); } public int setMenu(){ System.out.println("输入

原创 树综合练习

学习内容;复习六七八章 学习九，十章，十二章。树集合练习；import java.util.HashSet;import java.util.Random;import java.util.TreeMap;import java.util.TreeSet;public class eig { public static void main(String[] args) { Random c=new Random(); HashSet<Integer&

原创 判断一个数是否是回文数 Java语言

package org.banner.studio.test2;import java.util.Scanner;public class Test2 { /** * 2. 编写一个应用程序，接受用户输入的一行字符串，判断该字符串是否是回文数？ */ public static void main(String[] args) { String s = ""; int a = 0; System.out.print

转载 图书系统相关代码

import java.util.Objects;import java.util.Scanner;/**@Author: Ben@Date: 2020/10/29 13:32*/public class Test3 {/**①　图书馆接口（Library） 成员方法： borrow（），借阅图书 revert（），归还图书②　图书类（Book） 成员变量： 图书名称（name）String类型 出版

原创 从键盘上输入一个月份，然后判断该月份的天数。（Java，switch语句的应用）

//filename:App4_4.javaimport java.util.*;public class App4_4{public static void main (String[] args){int month,days;Scanner reader=new Scanner(System.in);System.out.print("请输入月份：");month=reader.nextInt();swicth(month){case 2: days=28;break;ca

原创 java语言的数据类型及介绍

转载 浮点型数据的范围

原创 整型与浮点数据类型的转换

//filename: zhuanhuan.javapublic class zhuanhuan{public static void main(String[] args){int a=155;int b=9;float g,h;System.out.println("a="+a+",b="+b);g=a/b;System.out.println("a/b="+g+"\n");System.out.println("a="+a+",b="+b);h=(float)a/b;Syst

原创 用if esle语句写一个java程序判断一个年份是否为闰年！！

用if esle语句写一个java程序判断一个年份是否为闰年！！//filename:runnian.javaimport java.jo.*;public class runnian{public static void main(String[] args){Scanner reader=new Scanner(System.in);double num;System.out.print("请输入一个年份:")；if((num%4==0&&num%100!==0)||