OxxiMvcEANtK
写在最前：父组件引用子组件，如何能在应用子组件内容的同时，还能在自定义内容呢？ 1.插槽 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件通信的方式，适用于父组件=>子组件 分类：默认插槽，具名插槽，作用域插槽 使用方式： 默认插槽 父组件中： <MyContainer> <div>html结构</div> </MyContainer> 子组件中： <template> <div> <!-定义插槽--> <slot>插槽默认内容</slot> </di...
1.nextTick下一次更新结束后执行指定的操作 语法：this.$nextTick(回调函数) 作用：在下一次DOM更新结束后执行其指定的回调 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行举个栗子：例子中有updated生命周期和nextTick同时输出，都是触发组件更新的函数，两者有和异同呢？ 首先我们看App.vue组件内：我们写好了两个数据count和num，我们想要做的是在count改变的时候通过操作dom元素的来查看一下新的dom值： 我们现在点击修改count按钮,查看运行效果： 我们可以看到,直接更改cou...
抛出问题：一进入页面就开启一个定时器，每隔1秒count就加1，如何实现示例： <body> <divid="app"> {{n}} <button@click="add">执行</button> </div> <script> letvm=newVue({ el:"app", data:{ n:1 }, methods:{ add(){ //this.n setInterval(()=>{ this.n },1000) } }, //特定时期调用特定函数（这就是生命周期函数/钩子函数） //表示页面渲染完成之后 ...
1.过滤器 定义：对要显示的数据进行特定格式转换再显示（适用于一些简单逻辑的处理） 语法： 注册过滤器：Vue.filter(name,callback)或newVue{filters:{}} 使用过滤器：{{xx|过滤器名}}或v-bind:属性="xxx|过滤器名" 备注： 过滤器也可以接受额外参数、多个过滤器也可以串联 并没有改变原本的数据，是产生新的对应的数据 示例：(局部过滤器) <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <meta...
1.条件渲染 v-if v-if="表达式" v-else-if="表达式" v-else="表达式"适用于：切换频率较低的场景 特点：不显示dom元素，直接被删除注意：v-if和v-else-if、v-else一起使用，但要求结构不能被打断v-if和template一起使用,v-show不可以 v-showv-show="表达式"适用于：切换频率较高的场景特点：不展示dom元素，未被移除，仅仅是样式隐藏 备注：使用v-if时，元素可能无法取到，v-show一定可以获取到 示例： <!DOCTYPEhtml> <htmllang="en"> <head...
1.监听(watch):监听一个属性的变化 监事属性watch: 当监视的属性变化时，回调函数自动调用，进行相关操作 监视的属性必须存在，才能进入监视 监视的两种写法： newVue时传入watch配置 通过vm.$watch()监视 immediate初始化时让handler调用一下 深度监视： Vue中的watch默认不监视对象内部值的变化（只监视一层） 配置deep:true可以监视对象内部值变化（多层） 备注： Vue自身可以监视对象内部值得变化，但Vue提供的watch默认不可以 使用watch时，根据数据的具体结构，决定是否采用深度监听 简写：当确定不使用immed...
Vue 1.事件v-on@ 基础 使用v-on:xxx或者@xxx绑定事件，其中xxx是事件名 事件的回调需要配置在methods对象中，最终会在vm上 methods中配置函数，不要用箭头函数，否则this就不是vm了 methods中配置函数，都是被Vue管理的函数，this指向vm或者组件实例对象 @click="demo"和@click=demo($event)效果一致，但是后者可以传参 事件修饰符 prevent:阻止默认事件（常用） once:事件只触发一次（常用） stop:阻止事件冒泡（常用） capture:使用事件的捕获模式-->给父级加 self:只有event....
Vue data中的两种方式 对象式 data:{ } 函数式 data(){ return{ } } 示例：<body> <divid="app"> {{name}}{{age}}{{$options}} <inputtype="text"v-model="value"> </div> <script> letvm=newVue({ el:'app', //对象式 //data:{ //name:'小红', //age:16 //} //函数式 data(){ return{ name:'小明', age:55, val...
微软常用运行库合集，也叫做MicrosoftVisualCRedistributablePackage，是微软推出的一款运行库合集软件，用于支持运行使用C开发的应用程序。在Windows操作系统中，很多应用程序都会依赖这个运行库合集。 蓝奏云下载地址：（微软常用运行库合集2023.08.09）https://wwbt.lanzoum.com/ildap1g74laf密码:h9uj 1.下载后直接双击运行 2.下一步安装即可
win+r调出命令框 gpedit.msc-----组策略 sndrec32-------录音机 Nslookup-------IP地址侦测器 explorer-------打开资源管理器 logoff---------注销命令 tsshutdn-------60秒倒计时关机命令 lusrmgr.msc----本机用户和组 services.msc---本地服务设置 oobe/msoobe/a----检查XP是否激活 notepad--------打开记事本 cleanmgr-------垃圾整理 netstartmessenger----开始信使服务 compmgmt.msc---计算机管...
分享两个git程序，网络不好的朋友们可以自己下载一下哈 Git-2.21.0-64-bit.exe Git-2.37.3-64-bit.exe 还有一点就是现在很多都用工具提交代码了，所以很大的可能会遇到设置邮箱和用户名，所以命令也在此log一下： gitconfig--globaluser.name"xxx" gitconfig--globaluser.email"xxx"
一套不错的前端开发指南 一、命名规范 市面上常用的命名规范： camelCase（小驼峰式命名法——首字母小写） PascalCase（大驼峰式命名法——首字母大写） kebab-case（短横线连接式） Snake（下划线连接式） 1.1项目文件命名 1.1.1项目命名 全部采用小写方式，以短横线分隔。 正例：mall-management-system 反例：mall_management-system/mallManagementSystem 1.1.2目录名 参照项目命名规则，有复数结构时，要采用复数命名法。 正例：docs、assets、components、directi...
1.nvm是什么 nvm全英文也叫node.jsversionmanagement，是一个nodejs的版本管理工具。nvm和npm都是node.js版本管理工具，为了解决node.js各种版本存在不兼容现象可以通过它可以安装和切换不同版本的node.js。 2.nvm下载 可在github上下载最新版本,本次下载安装的是windows版本。下面提供两个版本： nvm1.1.12-setup.zip nvm1.1.10-setup.zip 3.nvm安装（我以1.1.7版本为例） 直接安装nvm-setup.exe 选择nvm安装路径 选择nodejs路径 确认安装即可...
1.如何查看 很多情况下再chornme浏览器下看不到placeholder的样式，怎么查看? 1.打开控制台，点击设置 2.在Preferences中找到Element选项，勾选ShowuseragentshadowDOM 3.返回控制台 4.查看input元素 5.控制台对应元素就会显示placeholder样式 2.如何修改 找到placeholder父元素节点，直接伪元素修改即可。input输入框class为.el-input__inner,多行文本框为:.el-textarea__inner //placeholder样式 .el-input__inner::placeh...
1.表单中内容为 <el-form> <el-form-item :prop="minPrice" :rules="{ required:true, validator:PriceValidator, trigger:'blur', }" > <el-inputtype="Number"min="1"v-model=""placeholder="请输入数字"></el-input> </el-form-item> </el-form> 首先定义方法 //自定义规则 PriceValidator(rule,val...
很多时候input设置了type="number"还是能输入字母e,那么如何禁止呢？ 1.例如input框为 <el-inputtype="number"v-model=""@keydown.native="keyInput"placeholder="请输入数字"></el-input> 2.写方法 //去除number输入框内e keyInput(e){ letkey=e.key if(key='e'){ e.returnValue=false returnfalse } returntrue },
默认情况下，el-tabs下划线长度根据标签内容自动调整。那么如何自定义e-tabs的样式呢？ 1.el-tabs标签设置自定义class名 <el-tabsv-model=""class='custom-tabs'> <el-tab-panev-for="(item,index)inlist":key="index":label="item.value"></el-tab-pane> </el-tabs> 2.css样式中这样写: //此处是把tabs的边距清空 ::v-deep.el-tabs__item{ padding:0; } ...
最近写reacte的项目，在其他电脑下载依赖启动项目时候报错： Startingthedevelopmentserver... Error:error:0308010C:digitalenveloperoutines::unsupported xxxxxxx.... Node.jsv18.17.1 errorCommandfailedwithexitcode1. infoVisithttps://yarnpkg.com/en/docs/cli/runfordocumentationaboutthiscommand. 主要是node17版本问题引起的问题，解决方式 第一种是降低node...