vue中的date为什么是一个函数 | 数据类型 | 深浅拷贝 我们在写vue的项目中定义的一些属性会放到date中,为什么他得是一个函数而不能是对象呢?export default { data() { return { } } } 当date是一个函数的时候,放进去的一些值他都会开辟一个新的空间进行存储.num1: 1, num1: 1, 更改一个值的时候其他的值不会发生任何变化当date是对象的时候,更改一个值其他的值都会发生更改vue中组件是用来复用的，为了防止data同一个组件被复用多次.数据类型基本数据类型: Number, String, Boolean, Null, Undefined.复杂数据类型: Date, Function, Object, Promise.浅拷贝深拷贝浅拷贝: 会创建一个新的对象,这个对象有着原对象属性值的精确拷贝,新旧对象还是共享同一块内存.深拷贝: 创建一个一模一样的对象,会开辟一个新的空间,不共享同一块内存,修改新对象不会影响到原对象.浅拷贝拷贝的是基础数据类型的时候,修改原对象不会影响到新对象.var a = 10; var b = a; b = 20; console.log(a); -> 结果为10 console.log(b); -> 结果为20 当拷贝的是基础数据类型的时候,因为基础数据类型是值传递，所以是直接将属性值赋值给新的对象。当拷贝的是复杂数据类型的时候,它只是把内存地址赋值给了成员变量,指向了同一内存空间.改变其中一个的值,会对另外一个的值产生影响.

vue3隐藏底部导航栏 关于vue3移动端底部TabBar隐藏方案方法一利用路由元信息meta设置一个开关按钮，控制底部导航的显示隐藏// router -> index.js { path: '/home', component: () => import('@/views/home/home.vue') },{ path: '/show', component: () => import('@/views/show/show.vue'), meta: { hideTabBar: true } } 在路由中添加meta，给一个布尔值控制导航栏显示隐藏// APP.vue <template> <div class="app"> <router-view /> <tab-bar v-if="!route.meta.hideTabBar"/> <!-- 因为其他页面没有设置所以最终得到的结果是undefined 他的取反结果是true，为true这个tabbar就会显示 --> </div> </template> <script setup> import TabBar from "@/components/tabbar/tabbar.vue" import { useRoute } from "vue-router"; const route = useRoute() <!-- 在script进行route.meta.hideTabBar 在写到template中数据会不响应 --> </script> <style scoped></style> 方法二通过css样式覆盖底部导航栏// 页面 <template> <div class="root">XXX</div> </ template> <style scoped lang="scss"> // 这一块代码可以封装到通用css样式文件中，随用随拿 .root { height： 100vh; // 因为我写的底部导航栏用了固定定位，所以要用相对定位，因为相对定位可以设置z-index position: relative; z-index: 9; background-color: #FFFFFF; //数据过多滚动以后还是会显示出底部导航，这一步是做到只在100vh内容区域进行滚动 overflow-y: auto; } </style> 可能底部导航栏写的不一样，效果会有偏差， 这一块是自己封装的导航栏。

关于控制整个页面黑白 关于如何控制将H5网页整个黑白这件事情在样式中添加下面属性就可以了-webkit-filter: grayscale(.95); // 也可以百分比grayscale(95%) 兼容-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 顺便介绍一下 CSS3的滤镜 -webkit-filter-webkit-filter用法是标准的CSS写法,如：-webkit-filter: blur(2px); -webkit-filter 支持的效果有：blur 模糊-webkit-filter: blur(2px);// 只能百分比brightness 亮度-webkit-filter: brightness(20%);// 可以超出100% 百分比越高越亮contrast 对比度-webkit-filter: contrast(50%);// 范围越大代表对比越大drop-shadow 阴影-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));grayscale 灰度-webkit-filter: grayscale(95%);// 同上opacity 透明度-webkit-filter: opacity(50%);sepia 褐色-webkit-filter: sepia(100%);invert 反色-webkit-filter: invert(100%); // 颜色反过来saturate 饱和度-webkit-filter: saturate(1000%);hue-rotate 色相旋转-webkit-filter: hue-rotate(180deg);

cnpm安装教程 打开cmd安装cnpm，输入以下命令：npm install -g cnpm --registry=https://registry.npm.taobao.org输入cnpm -v ，检测是否正常cnpm@8.4.0 (C:UsersAdministratorAppDataRoamingnpmnode_modulescnpmlibparse_argv.js)npm@8.19.3 (C:UsersAdministratorAppDataRoamingnpmnode_modulescnpmnode_modulesnpmindex.js)node@16.17.1 (D:Program Filesnodejsnode.exe)如果在使用viscode中发现一下错误原因cnpm : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。有关 详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。 所在位置 行:1 字符: 1 + cnpm install + ~~~~ + CategoryInfo : SecurityError: (:) []，PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess PS F:\renren-fast-vue> power shell power : 无法将“power”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保 路径正确，然后再试一次。 所在位置 行:1 字符: 1 + power shell + ~~~~~ + CategoryInfo : ObjectNotFound: (power:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException cmd检测出安装安装成功却还是报错window+R调出，输入PowerShell调出面板输入 set-ExecutionPolicy RemoteSigned 回车根据提示，输入A，回车基本这个时候就可以正常使用cnpm安装指令了有任何问题欢迎评论区踊跃发言！

vue TagsInput 分享这款最近在写项目用到的一个插件在开发 xxx 管理系统过程中，发现有多处需要用到在 input 输入框中输入标签的需求，于是提取关键词 vue input tags 搜索了相关组件，最后发现 @johmun/vue-tags-input 体积小，易上手，功能丰富，更能满足业务需求和后续可能的需求变更官方文档http://www.vue-tags-input.comhttps://github.com/JohMun/vue-tags-inputhttps://www.npmjs.com/package/@johmun/vue-tags-input特点无需安装其他依赖体积小：34kb minified (css included) | gzipped 9kb更容易上手操作简单可以实现编辑删除功能可以通过粘贴添加标签钩子函数：添加之前 / 删除之前自定义验证规则丰富的自定义配置自定义模版自动补全文档清晰，示例丰富安装NPMnpm install @johmun/vue-tags-input --save CDN<script src="https://unpkg.com/@johmun/vue-tags-input/dist/vue-tags-input.js"></script> 用法<template> <div> <vue-tags-input v-model="tag" :tags="tags" @tags-changed="newTags => tags = newTags" /> </div> </template> <script> import VueTagsInput from '@johmun/vue-tags-input'; export default { components: { VueTagsInput, }, data() { return { tag:'', tags: [], }; }, }; </script> <style scoped style="scss"></style>