- 博客(28)
- 收藏
- 关注
RSS订阅原创 记录Vue3+TS 定义接口interface、ref、reactive的使用场景以及使用泛型的原因
vue3+ts interface、ref、reactive、泛型使用场景
2024-06-17 14:50:04
3914
5
转载 （完全深拷贝JSON对象）关于JSON.stringify()与JSON.parse()对象序列化操作
之前开发中进行JSON对象序列化操作echarts图表带有fomatter回调函数的option，结果取得的值formatter部分丢失的问题，解决办法：转载
2021-06-01 10:55:17
183
原创 Echarts自定义工具栏不显示（不显示图标）
首先确认两点：确认工具命名是否符合规则，名称前需要以“my”开头；自定义工具栏配置中的icon使用的是svg的坐标路径，也就是不能使用正常的图片路径toolBox:{ feature:{ myExcel:{ show:true, title:'导出Excel', icon:'此处需要svg坐标路径path' } }}找了半天原因，????。...
2021-05-26 11:12:16
3598
3
原创 CSS 实现高度自适应铺满整屏（包含使用flex布局实现垂直居中）
在自己写demo的过程中，想使用display:flex实现垂直居中，代码如下：<style> #login{ width:100%; height: 100%; display: flex; justify-content: center; align-items: center; } .login-body{ width: 600px; height:
2020-07-30 15:38:28
10446
1
转载 深入理解JavaScript中的this
本文为转载文章，点击跳转原文地址转载方便自己日后细品…正文开始：js 的 this 绑定问题，让多数新手懵逼，部分老手觉得恶心,这是因为this的绑定 ‘难以捉摸’，出错的时候还往往不知道为什么，相当反逻辑。让我们考虑下面代码:var people = { name : "海洋饼干", getName : function(){ console.log(this.name); }};window.onload = function(){ xxx.o
2020-07-28 16:10:19
383
原创 Vue-18-嵌套路由（子路由）
一、知识点部分嵌套路由的写法：路由中包含的一个属性：childrenvar router = new VueRouter({ routes:[ { path:'/login', name:'login', component:Login, children:[{}] } ]})children和routers的格式是一样的，需要配置path等属性。（注意：在路由配置中，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套
2020-06-04 17:11:02
608
原创 Vue-17-路由的命名和传参
路由的命名：配置路由的时候添加一个name参数，命名自定义var router = new VueRouter({ routes:[ { path:"/componentA/:id", component:ComponentA, name:"componentA" //推荐使用和路径命名一致，不要写“/”等，因为他只是一个路由的名字。 }, { path:"/componentB", component:Comp.
2020-05-29 17:59:05
357
原创 Vue-16-路由的基本使用
一、知识点部分使用Vue-router的基本步骤大致如下：引用vue模块；引入路由模块；让vue使用该vue-router：创建Vue.use(VueRouter); 在本demo中可不写，日后如果使用脚手架时，模块化开发时，vue可能不是全局的时候需要挂载到全局创建路由对象； var router = new VueRouter({})路由匹配的规则 ；注意！此处一定是routes！routes不是routers！此处一定是component，而不是components！（学习的时候发现自己
2020-05-27 21:07:46
125
原创 Vue-15-前端路由的基本原理
<a href="#/login">登录页</a> <a href="#/register">注册页</a> <div id="app"></div> <script src="js/vue.min.js"></script> <script> /* 路由的实现原理： （1）传统开发方式：url改变后，立刻发生请求响应整个页面，当资源过多时，传统开发方式有可能导致页面出现白屏
2020-05-27 15:48:05
165
原创 Vue-14-给DOM元素添加事件的特殊情况
一、知识点部分$nextTick()：基于更新后的视图来搞点事情，我们可以使用$nextTick(callback)。这里的回调函数（callback）将在数据更新完成，视图更新完毕之后被调用。（可以联想一下在angular1.x开发过程中，在接收到返回值的时候有时候需要使用setTimeout，在vue中使用$nextTick就可以解决问题了）我们可以通过$nextTick() 获取到更新之后的DOM。如果要在created()钩子函数中进行的DOM操作，由于created()钩子函数中还未对DOM
2020-05-26 15:42:13
1346
原创 Vue-13-使用ref获取DOM
一、知识点部分ref：被用来给子组件或元素注册引用信息，引用信息将会注册到父组件的$ref对象上；通过$refs.xxx获取元素/组件如果在普通的dom上使用，引用的指向就是该dom；如果在子组件上使用，引用的指向就是子组件的实例；在模板挂载阶段（mounted()）可以获取到DOM；相同属性名后一个会覆盖之前的ref；$refs相对document.getElementById的方法，会减少获取dom节点的消耗；ref注册时间说明：ref是作为渲染结果被创建的，所以在渲染完成之前是无法被
2020-05-26 15:09:34
292
原创 Vue-12-事件修饰符
一、知识点部分内联处理器：比较如下两种写法：其中clickCapture2(‘我被点击了’)就是内联处理器。但并不是函数有参数就是内联处理器，而是方法带有()，并不仅仅是一个函数名。没括号是函数名，而有括号的这个是一条JS语句，就是内联处理器。直接写函数名的好处是直观，自带默认参数$event；而内联处理器没有默认参数$event，需要使用时在定义函数的时候定义参数用来传入$event和其他参数。<button type="button" @click="clickCapture1"&
2020-05-25 15:40:34
187
原创 Vue-11-生命周期
一、知识点部分生命周期钩子 = 生命周期函数 = 生命周期事件1.生命周期函数分为：1.1创建期间:1.1.1 beforeCreat1.1.2 created1.1.3 beforeMonute1.1.4 monuted1.2运行期间:1.2.1beforeUpdate1.2.2updated1.3销毁期间:1.31 beforeDestory1.32 destoryedcreated阶段的ajax请求与mounted请求的区别：前者页面视图未出现，如果请求信息过多，页面会长
2020-05-25 14:29:57
285
原创 Vue-10-watch监听事件
没啥好说的，看代码吧= =<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <input type="text" v-model="msg" /> <h4>{{msg}}</h4> &
2020-05-24 20:01:51
220
原创 Vue-09-过滤器的使用
第二节课随堂笔记一、知识点部分过滤器的作用:为页面中数据进行添油加醋的功能过滤器分两种:局部过滤器、全局过滤器局部过滤器不需要独立创建,在当前组件中有一个属性:filters，首先声明过滤器，使用方式：{{数据|过滤器名字}}全局过滤器需要单独创建，Vue.filter(“过滤器名称”,fn())，首先声明过滤器，使用方式{{数据|过滤器名字}}二、代码部分 //声明全局过滤器 Vue.filter("myReverse",function(value,arg){
2020-05-24 19:57:02
128
原创 Vue-08-具名插槽
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"></div> <script type="text/javascript" src="js/vue.min.js"></script> &l
2020-05-24 19:51:06
130
原创 Vue-07-关于组件通信的补充笔记
在Vue.js中包含的组件通信方式有很多种（据说有7、8种，只重点学习以下几种常用方式），比较常用的通信方式有：一、父子组件之间通信-通过props选项来进行通信：* props选项值的形式；* props数据验证；*二、子父组件之间通信- 通过自定义事件$emit来进行通信；三、非父子组件之间通信- 通过ref来进行通信；- 通过event bus来进行通信；四、vue-router- 路由传参；五、多组件之间通信- Vuex；...
2020-05-24 19:40:03
143
原创 Vue-06-全局组件的使用
第六节随堂笔记一、知识点部分全局组件的创建方法：Vue.component(name,object),全局组件使用前不需要在components中挂载，直接在template使用即可（第一个参数为组件名称，第二个参数为options）二、代码部分 Document<div id="app"></div><script src="js/vue.min.js"></script><script> //创建一个头部组件
2020-05-19 16:56:34
254
原创 Vue-05-组件之间的通信（二）
第五节随堂笔记一、知识点部分子组件通过事件向父组件通信（传值）：1.首先给父组件中绑定自定义事件，在子组件中触发原生事件（比如：click、input、onchange等…），然后在函数中使用$emit触发自定义事件（比如笔记中的childHandler），父组件收到的数据可在父组件中任意使用。二、代码部分 Document<div id="app"></div><script src="js/vue.min.js"></scrip
2020-05-19 16:49:35
123
原创 Vue-04-组件之间的通信（一）
第四节随堂笔记一、知识点部分组件通信问题，即传值问题；vue组件间通信的几种方式，如props、emit/emit/emit/on、vuex、$parent / children、children、children、attrs/$listeners和provide/inject；vue中组件之间的数据流向是由：父组件=》子组件，同级之间传值，且数据流为单向数据流，子组件向父组件需要通过事件进行通信（子向父发送数据）父组件通过props往子组件通信（传值）：首先给父组件中绑定自定义属性，然后在子组
2020-05-19 16:45:05
112
原创 Vue-03-局部组件的使用
Document<div id="app"></div><script src="js/vue.min.js"></script><script> //创建一个头部组件 var Vheader = { template:`<div><h2>Header</h2></div>` } //创建一个左侧组件 var Vaside = { template:`<...
2020-05-19 16:39:49
195
原创 Vue-02-组件与组件的创建
第二节课随堂笔记一、知识点部分局部组件：①.只能在当前组件内使用②.创建组件口诀：声子（声明），挂子（挂载），用子（调用）.③创建组件时注意与关键字区分，如h5中的header不能相同，避免关键字，所以建议明明组件的时候首字母大写，也可使用驼峰命名法。④.如果使用驼峰命名法时，声明组件定义var AppName 时，调用的时候标签则为(命名大写，使用小写)全局组件①.全局共享，任何组件都可以使用<!DOCTYPE html><html lang="en"&g
2020-05-19 16:30:49
159
原创 Vue-01-基本知识
第一节课随堂笔记一、知识点部分数据驱动视图 要理解这六个字方便了解vue（很重要）；实例化的对象可以监听自身内data中数据的变化；如果template中定义了内容，那么优先显示template中的模板，如果没定义内容优先显示#app中的内容；数据属性可以是对象也可以是函数（data最好写成function格式）；如果template中定义了内容，那么优先显示template中的模板，如果没定义内容优先显示#app中的内容；v-text {{}} 相当于innerText，可进行运算；v-
2020-05-19 15:36:48
134
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人