梦樱花儿-优快云博客

原创 uniapp自定义一个选择年月日时分的组件。

Vue父子组件通信子组件传值父组件：$emit 父组件传值子组件：props 子组件传值父组件：$emit 原型：vm.$emit( eventName, […args] ) 参数： ● {string} eventName ● […args] 触发当前实例上的事件。附加参数都会传给监听器回调。实例： //子组件 <template> <div> <p style="color: red;font-size: 30px;">下面这是一个子组...

2025-04-27 09:44:01 498

原创小程序问题总结

小程序

2022-08-24 09:15:25 695

原创滚动条点击移动到最下面

if (that.messagesEnd) { const scrollHeight = that.messagesEnd.scrollHeight; //里面div的实际高度 2000px const height = that.messagesEnd.clientHeight; //网页可见高度 200px const maxScrollTop = scrollHeight - height; ..

2022-04-27 11:10:54 453

原创火狐浏览器和ie，谷歌的兼容问题

字体谷歌和ie浏览器的最小字体是12px，所以，当用火狐开发时，少于12px的字体都会在其他两个浏览器上出现问题。 //解决：使用 transform:scale(0.7); 对字体元素进行缩小。滚动条的问题 ie和谷歌浏览器设置滚动条下面的方式是可以的 // /* 定义滚动条样式 */ // .content::-webkit-scrollbar { // width: 6px; // height: 6px; // } //.content::-webkit-scrollb

2022-04-24 15:18:41 1448

原创 TS学习（尚硅谷总结）

1.TS的类型声明 //声明一个变量a，同时指定它的类型number let a: number; //a的类型设置为number，再以后的使用过程中a的值只能是数字、 a = 18; a = 33; a = 'hello';//代码报错，a的类型是number，不能赋值字符串 //声明变量直接进行赋值 let c:boolean = false; //如果变量的声明和赋值是同时进行的,TS可以自动对变量进行类型检测 let c = false; //JS中的函数是不考虑参数的类型和个数的 func

2022-01-25 14:15:57 1795 2

原创 JavaScript（尚硅谷学习总结）

1.控制浏览器弹出一个警告框 alert（“11111111！”） 2.让计算机再页面中输出一个内容 document.write()可以向body中输出一个内容 document.write("1111111111") 3.向控制台输出一个内容 console.log("11111111111111") 4.编写位置 //可以将js代码编写到标签的onclick属性中 <button onclick="alter('111111')">111</button>

2021-12-23 15:51:52 611

原创 Vue3简介

1.性能的提升 1.打包大小减少41% 2.初次渲染快55%，更新渲染快133% 3.内存减少54% 2.源码的升级 1.使用Proxy代替defineProperty实现响应式 2.重写虚拟DOM的实现和Tree.Shaking 3.拥抱TypeScript Vue3可以更好的支持TypeScript ...

2021-12-23 14:59:38 402

原创 Vue中的路由

1.理解：一个路由（route）就是一组映射关系（key-value），多个路由需要路由器（router）进行管理。 2.前端路由：key是路径，value是组件 1.基本使用 1.安装vue-router，命令：npm i vue-router 2.应用插件：Vue.use(VueRouter) 3.编写router配置项： //引入VueRouter import VueRouter from 'vue-router' //引入路由组件 import Name from '../compo

2021-12-21 09:51:55 373

原创 Vuex的模块化+命名空间

1.目的：让代码更好的维护，让多种数据分类更加明确。 2.修改store.js const countAbout = { namespaced:true,//开启命名空间 state:{x:1}, mutations:{...}, actions:{...}, getters:{ bigSum(state){ return state.sum * 10 } } } const personAbou

2021-12-20 16:12:19 235

原创 vuex的配置与使用

1.创建文件：src/store/index.js //引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) //准备actions对象——响应组件中用户的动作 const actions = {} //准备mutations对象——修改state中的数据 const mutations= {} //准备state对象——保存具体的数据 const state= {} //

2021-12-20 10:29:54 427

原创 Vue插槽slot

1.作用：让父组件可以向子组件指定位置插入html结构，也是一种组件通信方式，适用于父组件===>子组件 2.分类：（1）默认插槽父组件中： <cate> <div>html结构</div> </cate> 子组件中： <template> <div>  <slot>&l

2021-12-16 09:52:14 1072

原创 Vue脚手架配置代理

方法一：在vue.config.ja中添加配置： devServer:{ proxy:"http://localhost:1000"//服务器地址 } 说明： 1.优点：配置简单，请求资源时直接发给前端（8080）就可以。 2.缺点：不能配置多个代理服务器，不能灵活的控制请求是否走了代理。 3.工作方式：请求了前端不存在的资源时，那么该请求会转发给服务器（优选匹配前端资源，也就是前端有的资源）方法二：编写vue.config.ja配置具体代理规则： module.exports

2021-12-15 10:08:43 728

原创 nextTick

1.语法：this.$nextTick(回调函数) 2.作用：在下一次DOM更新结束后执行其指定的回调 3.什么时候用；当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行

2021-12-14 15:33:12 621

原创 vue中组件之间的通信

1.一种组件之间的通信方式，适用于任意组件间通信 2.安装全局事件总线： new Vue({ .... beforeCreate(){\ Vue.prototype.$bus = this//安装全局事件总线，$bus就是当前应用的vm }, }) 3.使用事件总线： 1.接受数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身 methods(){ d.

2021-12-14 10:27:41 444

原创组件的自定义事件（尚硅谷笔记）

1.一种组件间的通信方式，适用于：子组件===>父组件 2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中） 3.绑定自定义事件： 1.第一种方式，在父组件中：<Demo @getName="test"/> 2.第二种方式，在父组件中： <Demo ref="demo"/> ...... mounted(){ this.$refs.xx.

2021-12-14 09:47:28 791

原创浏览器存储webStorage

1.存储内容大小一般支持5MB左右（不同浏览器可能还不一样） 2.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制 3.相关API： 1.localStorage.setItem('key','value'); 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。 2.localStorage.getItem('person'); 该方法接受一个键名作为参数.

2021-12-13 15:28:38 428

原创 install插件使用

功能：用于增强Vue 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据定义插件：对象.install = function（Vue，options）{ 1.添加全局过滤器 Vue.filter{} 2.添加全局指令 Vue.directive{} 3.配置全局混入（合） Vue.mixin{} 4.添加实例方...

2021-12-13 11:05:00 488

原创 mixin（混入）

功能：可以把多个组件共用的配置提取成一个混入对象使用方式：第一步定义混入，例如： { data(){...}, methods:{...} } 第二步使用混入，例如： 1.全局混入：Vue.mixin(xxx) 2.局部混入：mixins:['xxx'] ...

2021-12-13 10:17:58 233

原创 ref属性

1.被用来给元素或子组件注册引用信息（id的替代者） 2.应用在html标签上获取的真实DOM元素，应用在组件标签上是组件实例对象（vc） 3.使用方式：打标识：<h1 ref="xxx">....</h1>或<School ref="xxx"></School> 获取：this.$refs.xxx ...

2021-12-13 09:59:41 300

原创 props

功能：让组件接受外部传过来的数据（1）传递数据： <Dero name="XXX"> （2）接受数据：第一种方式（只接收）：props：['name'] 第二种方式（限制类型）：props:{name:Number} 第三种方式（限制类型，限制必要性，指定默认值）： props：{ name:{ type:String,//类型 required:true,//必要性 default:'xxx'//默认值 } } 备注：props是只读的，Vue底层会监测你对p.

2021-12-13 09:55:36 526

原创关于不同版本得vue

1.vue.js与vue.runtime.xxx.js的区别：（1）vue.js是完整班的vue，包含：核心功能+模板解析器（2）vue.runtime.xxx.js是运行版的Vue,只包含：核心功能，没有模板解析器 2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用 render函数接收的creatElement函数去指定具体内容 ...

2021-12-10 10:23:44 544

原创自定义指令

1.定义语法：（1）局部指令： new Vue({ directives:{指令名：配置对象} }) new Vue({ directives:{指令名：回调函数} }) （2）全局指令： Vue.directive(指令名，配置对象) Vue.directive(指令名，回调函数) 2.配.

2021-12-08 13:56:08 631

原创 vue指令

v-bind:单向绑定解析表达式，简写为：xxx v-model:双向数据绑定 v-for:遍历数组/对象/字符串 v-on:绑定事件监听，简写为@ v-if:条件渲染（动态控制节点是否存在） v-else:条件渲染（动态控制节点是否存在） v-show:条件渲染（动态控制节点是否展示） v-text: 1.作用：向其所在得节点中渲染文本内容 2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会 v-html： 1.作用：向指定节点中渲染包含html结构的内容 2.与插值语法的区别：.

2021-12-08 09:58:39 72

原创 vue监视数据的原理

1.vue会监视data中所有层次的数据 2.如何检测对象中的数据通过setter实现监视，且要在new Vue时就传入要监测的数据。（1）.对象中后追加的属性。Vue默认不做响应式处理（2）.如需给后添加的属性做响应式，请使用如下API： Vue.set（target.propertyName/index.value）或 vm.$set(target.propertyName/index.value) 3.如何检测数组中的数.

2021-12-07 14:19:26 106

原创 js获取一月后的时间

function getNowdate(){ var date_now = new Date()//获取当前时间 var year = date_now.getFullYear()//获取当前时间的年份 var month = date_now.getMonth()//获取当前时间的月份 var day = date_now.getDate()//获取当前时间的日 var days = new Date(year,month,0)//将获取到的年月赋值给days.

2021-12-07 13:34:23 3709

原创 Object.keys（）与Object.value

一.Object.keys()的用法 1.Object.keys()介绍 Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组(返回字符串数组)，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。 2.Object.keys()语法 Object.keys(obj)obj要返回其枚举自身属性的对象。返回值:一个表示给定对象的所有可枚举属性的字符串数组。二.Object.values()的用法 1.Object.values()介绍 Object.valu

2021-12-06 10:33:25 1259

原创 vue取时间

this.seachInfo.startTime = this.$dateFormat(new Date().getTime()-86400000,'YYYY-MM-DD'); this.seachInfo.endTime = this.$dateFormat(new Date().getTime(),'YYYY-MM-DD'); 减去一个864000就是一天，想减多少天就×多少

2021-12-06 10:21:57 130

原创 function(e),function(val)的含义

funciton()中，有东西就是代表需要传递参数。 e一般代表enter，也就是事件。简单来说就是指向了当前发生的事件变化，保存了当前事件的信息。 val一般代表数组中原本的值。

2021-12-06 09:47:41 1387

原创通过计算属性添加列表搜索条件

<li v-for="(p,index) of filGoods" :key="index"> {{g.name}}-{{g.price}} </li> data:{ keyWord:'', goods:[ {id:'1',name:'苹果',price:'5'}, {id:'2',name:'香蕉',price:'10'}, {id:'3',name:'西瓜',price:'8'}, {id:'4',name:'芒果',price:'2.

2021-12-06 09:34:43 125

原创通过watch监听，添加列表搜索条件

<li v-for="(p,index) of filGoods" :key="index"> {{g.name}}-{{g.price}} </li> data:{ goods:[ {id:'1',name:'苹果',price:'5'}, {id:'2',name:'香蕉',price:'10'}, {id:'3',name:'西瓜',price:'8'}, {id:'4',name:'芒果',price:'20'}, ]，.

2021-12-06 09:27:20 610

原创关于vue中vm指向问题

1.只有被vue所管理的函数，再写成普通函数之后，里面的this指向才是vm或者组件实例对象。 2.而不被vue管理的函数，例如ajax回调函数等，需要写成箭头函数，这样里面的this才是指向vm或者组件实例对象的。 ...

2021-11-30 11:18:40 1190

原创 watch与computed的区别

watch与computed的区别： 1.computed能完成的功能，watch都可以完成，只是有的时候用computed更加简洁方便。 2.watch能完成的功能，例如异步操作，computed是不能完成的。

2021-11-30 11:14:31 257

原创 vue中key的理解（复习）

//虚拟DOM中key的作用：key是虚拟对象DOM的唯一标识，当数据发生变化时，vue会根据新数据生成新的虚拟DOM，然后此时，新的虚拟DOM和旧的虚拟DOM会进行对比,规则如下： 1.旧的虚拟DOM中有与新的虚拟DOM相同的key值： *若虚拟DOM中内容没有变化，直接使用之前的真实DOM。 *若虚拟DOM中内容变了，直接生成新的真实DOM，去替换掉页面中之前的真实DOM。 2.旧的虚拟DOM没有找到与新的虚拟DOM相同的key值 *创建新的真实DOM去渲染到页面 3.用index作为key可能.

2021-11-30 09:19:03 799

空空如也

空空如也