梦樱花儿-CSDN博客

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 331

原创火狐浏览器和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 1188

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

1.TS的类型声明//声明一个变量a，同时指定它的类型numberlet 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 1578 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 501

原创 Vue3简介

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

2021-12-23 14:59:38 273

原创 Vue中的路由

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

2021-12-21 09:51:55 277

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

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

2021-12-20 16:12:19 160

原创 vuex的配置与使用

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

2021-12-20 10:29:54 288

原创 Vue插槽slot

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

2021-12-16 09:52:14 1005

原创 Vue脚手架配置代理

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

2021-12-15 10:08:43 658

原创 nextTick

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

2021-12-14 15:33:12 551

原创 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 354

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

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 669

原创浏览器存储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 330

原创 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 376

原创 mixin（混入）

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

2021-12-13 10:17:58 144

原创 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 155

原创 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 409

原创关于不同版本得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 429

原创自定义指令

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

2021-12-08 13:56:08 580

原创 vue指令

v-bind:单向绑定解析表达式，简写为：xxxv-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 32

原创 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 52

原创 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 3192

原创 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 1026

原创 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 31

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

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

2021-12-06 09:47:41 1135

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

<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 53

原创通过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 477

原创关于vue中vm指向问题

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

2021-11-30 11:18:40 1034

原创 watch与computed的区别

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

2021-11-30 11:14:31 169

原创 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 693

原创 vue通过iview组件做个小卡片

<template><ROW><Col span="7" offset="1"> <Card class="top-card3"> <div slot="title" class="head-card flex"> <div><Icon type="md-contacts" /></div> <div style="margin-left: 5px".

2021-11-26 11:20:47 866

原创 vue中创建一个圆环图

<template><div id="mainPie" style="width:100%;height:300px"></div></template><script>import echarts from 'echarts'data(){return{chartsPie:'',opinionDataPie: [ {value: 335, name: '销售额1,5%'}, {value: 310,

2021-11-26 10:07:33 2232

原创 vue项目中创建一个折线图

<template><div id="mainLine" style="width: 100%;height: 300px;"></div></template><script>import echarts from 'echarts'export default {data(){return{Linecharts: '',opinionData: ["2000", "3000", "10000", "600

2021-11-26 09:59:37 640

原创 vue中自定义table表格

<template><div><tableclass="table"><thead><tr><th>序号</th><th>商品名称</th><th>商品分类</th><th>销售数量</th><th>商品价格</th></tr></thead><tbody>...

2021-11-25 17:19:23 2789

原创浏览器字体限制，无法继续缩小问题

今天写页面发现一个问题，浏览器最小字体设置为16px,就算你设置10px，它依旧显示16px。但是，页面需要有比16更小的字体。这个时候，就需要css设置缩放。transform：scale（0.7）；设置这个属性，就可以实现缩放了。但是，这样缩放后，有一个问题。就是，你缩小字体，它的位置不变，所以，不会跟之前的元素贴紧，可能会因为缩小而使得与之前的元素之间有一定的距离。这个时候，我们还需要设置一个属性。transform-origin：left；//可以设置right等。这

2021-10-21 10:07:57 530

原创盒子内的内容超出盒子则裁剪显示下拉，可下拉查看

直接给盒子内设置一个css ，overflow-y属性（y就是竖直方向下拉）overflow属性一共有几个可选：1.visible：几乎没啥用，这就是个默认值，不设置它也是这个，内容不会被裁剪，超出的部分依旧会超出2.hidden：这个就是超出的内容会被裁剪，但是裁剪之后，超出的部分没法看到3.scroll：内容一定被裁剪，会显示滚动条以便查看4.auto：如果内容多了，会被裁剪，这个时候才显示滚动条所以，想要实现滚动条效果就设置{overflow-y：scroll或者a

2021-10-19 14:42:03 1039

原创 echarts折线图坐标设置问题

xAxis就是坐标的x轴【{}】yAxis就是坐标的y轴【{}】在x或y里可以设置这些属性：{type：坐标轴类型（value：数值轴；category:类目轴；time：时间轴；log：对数轴）data：【往里面填x轴或y轴显示什么】axisTick{show：false（是否把x轴或y轴刻度线去掉，默认是true显示刻度线）}axisLabel{interval：0，强制显示x轴所有数据，要不然你填的data123456，只显示135textStyle：{//这是设置x

2021-10-19 14:18:10 2057

原创覆盖组件原有样式deep

写vue项目得时候，几乎都会用到ui框架。iview与element是我经常遇到的两种。但是，使用方便的同时，也会遇到一些问题。甲方提出要修改一个页面样式，但是这属于组件给的样式。我们不可能去修改组件已经定义的样式，这个时候怎么办。/deep/：覆盖原有样式。.big-col /deep/ .ivu input{color:red !important;}这样就能覆盖原有样式了。关于！important，style，class的优先级！important >s.

2021-10-08 15:04:30 495

空空如也

空空如也