![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
打酱油的女孩子
修德,承担,奉献,勤奋,自律
展开
-
前端各种禁止
禁止鼠标右键:οncοntextmenu=“return false”;禁止选择:onselectstart=“return false”;禁止拖放:οndragstart=“return false”;禁止拷贝:οncοpy=document.selection.empty() 。禁止复制:oncopy = “return false”;禁止保存:,放在head里面。禁止粘贴:<input type=text οnpaste=“return false”>禁止剪贴:oncut =原创 2022-03-22 17:16:27 · 134 阅读 · 0 评论 -
vue项目保存单引号变双引号
vscode设置中搜索vetur.format.defaultFormatter.js选择vscode-typescript在项目根目录下新建.prettierrc.json{ "singleQuote":true, "semi":false}原创 2022-03-21 14:07:50 · 1117 阅读 · 0 评论 -
echarts饼状图实现不同icon
echarts饼状图实现不同icon引入图片1.1引入图片1.1import img1 from '@/assets/img/power.png'import img2 from '@/assets/img/underPan.png'import img3 from '@/assets/img/assist.png'import img4 from '@/assets/img/control.png'import img5 from '@/assets/img/other.png'cons原创 2021-06-10 14:28:05 · 650 阅读 · 0 评论 -
MockJs的使用
MockJs的使用1 Mock.js的语法规范1.1 数据模板定义规范1.1.1 生成规则示例1.2 数据占位符定义规范1 Mock.js的语法规范Mock.js的语法规范包括两部分:1 数据模板定义规范2 数据占位符定义规范1.1 数据模板定义规范数据模板中的每个属性由三部分组成:属性名、生成规则、属性值。//属性名 name // 生成规则 rule // //属性值 value 'name|rule':value注意:1 属性名和生成规则之间用|分隔。2 生成规则是可原创 2021-03-25 17:23:37 · 139 阅读 · 0 评论 -
实现简易前端路由
1路由路由是一个比较广义和抽象的概念,路由的本质就是对应关系。在开发中,路由分为:前端路由和后端路由。1.1后端路由:概念:根据不同的用户URL请求,返回不同的内容。本质:URL请求地址与服务器资源之间的对应关系。1.2 前端路由概念:根据不同的用户事件,显示不同的页面内容本质:用户事件与事件处理函数之间的对应关系1.3 实现简易前端路由(前端路由的本质)基于URL中的hash实现(点击菜单的时候改变URL中的hash,根据hash的变化控制组件的切换)。<!DOCTYPE原创 2021-01-14 15:22:59 · 204 阅读 · 2 评论 -
发布者订阅者模式
1 发布订阅模式理解假定存在一个信号中心,某个任务执行完成就向信号中心发布一个任务,其他任务可以向信号中心订阅这个任务从而知道什么时候自己可以开始执行。(学生家长向学生所在班级订阅了获取学生考试成绩这一个事件,当老师公布了学生的成绩后就自动的通知学生的家长,这样学生家长就知道了学生的考试成绩)在这个例子中学生所在班级就是信号信息,老师是发布者,学生是订阅者。注:vue中兄弟组件通信过程就是通过发布者订阅者模式实现的。2 发布订阅者模式代码...原创 2021-01-14 09:49:33 · 238 阅读 · 0 评论 -
vue3响应式原理(proxy)
vue3的响应式原理是配合proxy来实现的,它是直接监听对象而非属性,所以就不需要使用循环了1 vue3使用proxy实现双向数据绑定原理代码<body> <div id="app"></div> <script> let data={ msg:'hello', count:10 }; let vm=new Proxy(data,{原创 2021-01-13 16:27:07 · 2259 阅读 · 0 评论 -
vue2.x双向数据绑定原理
1 vue双向数据绑定深入理解当你把一个普通的JavaScript对象传入Vue实例作为data选项,Vue将遍历此对象的所有Property,并使用Object.defineProperty把这些Property全部转为getter/setter。Object.defineProperty是ES5中一个无法shim的特性,这也是Vue不支持IE8以及更低版本浏览器的原因。这些getter/setter对用户来说是不可见的,但是在内部它们让Vue能够追踪依赖,在property被访问和修改时通知变更。原创 2021-01-13 15:36:14 · 136 阅读 · 0 评论 -
开源的虚拟Dom库--Snabbdom
1 从Vue2.x开始内部使用的虚’Dom’,就是改造的snabbdom原创 2021-01-13 14:20:19 · 206 阅读 · 0 评论 -
虚拟Dom
1 虚拟Dom虚拟Dom是由普通的Js对象来描述Dom对象,因为不是真正的Dom对象,所以才叫虚拟Dom。为什么用虚拟Dom来模拟真实的Dom?因为一个Dom对象中的成员是非常多的,所以创建Dom对象的成本是非常高的,如果使用虚拟Dom来描述真实Dom,就会发现创建的成员少,成本也就低了。注:操作Dom会影响页面的性能,并且有时候数据根本没有发生改变,我们希望未更改的数据不需要重新渲染。2 虚拟Dom的思想虚拟Dom的思想是先控制数据再到视图,但是数据状态是通过diff比对,它会比对新旧虚拟Dom原创 2021-01-13 14:07:58 · 92 阅读 · 0 评论 -
服务端渲染与客户端渲染
1 渲染的概念渲染就是将模板与数据拼接到一起2 传统的服务端渲染传统的服务端渲染是把模板与数据统一生成好返回给客户端,是有利于SEO的。3 服务端渲染服务端渲染 :DOM树在服务端生成,然后返回给前端。服务端渲染的模式下,当用户第一次请求页面时,由服务端把需要的组件或页面渲染成HTML字符串,然后把它返回给客户端。客户端拿到手的,是可以直接渲染然后呈现给用户的HTML内容,不需要为了成为DOM内容自己再去跑一遍JS代码。使用服务端渲染的网站,可以说是‘所见即所得’,页面上呈现的内容,我们在ht原创 2021-01-13 10:36:58 · 129 阅读 · 0 评论