![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
youyouwuxin1234
博主:忧忧吾心
学历:2017.09-2019.07 硕士 - 武汉大学 软件工程
2013.08-2017.06 本科 - 郑州大学 计算机科学与技术
工作:2019.07.02-2021.11.16,在美的集团IT部门国际事业部,任职软件开发工程师
2021.11.22-2021.12.31,在新华三大数据有限公司从事软件研发
2022.01.01-至今,在紫光集团旗下紫光云技术有限公司从事中间件软件研发工作
其他:代表公司参加过2019年杭州阿里巴巴云栖大会
兴趣:爱生活、爱学习、爱运动、爱旅行、爱美食。
展开
-
325、Vue学习笔记31 -【深入响应式原理】 2020.04.21
0、目录1、如何追踪变化2、检测变化的注意事项2.1 对于对象2.2 对于数组3、声明响应式属性4、异步更新队列5、参考链接现在是时候深入一下了!Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。这使得状态管理非常简单直接,不过理解其工作原理同样重要,这样你可以避开一些常见的问题。在这个章节,我们将研究一...原创 2020-04-21 18:18:33 · 257 阅读 · 0 评论 -
324、Vue学习笔记30 -【安全】 2020.04.21
0、目录1、报告安全漏洞2、第一原则:永远不要使用不可信任的模板3、Vue 的安全措施3.1 HTML 内容3.2 Attribute 绑定4、潜在危险4.1 注入 HTML4.2 注入 URL4.3 注入样式4.4 注入 JavaScript5、最佳实践6、后端协作7、服务端渲染 (SSR)8、参考链接1、报告安全漏洞当我们收到一个安全漏洞报告,将给予其最高优先级,并由全职贡献者停下...原创 2020-04-21 17:26:52 · 595 阅读 · 0 评论 -
323、Vue学习笔记29 -【服务端渲染】 2020.04.21
0、目录1、SSR 完全指南2、Nuxt.js3、Quasar Framework SSR + PWA4、参考链接1、SSR 完全指南在 2.3 发布后我们发布了一份完整的构建 Vue 服务端渲染应用的指南。这份指南非常深入,适合已经熟悉 Vue、webpack 和 Node.js 开发的开发者阅读。请移步 SSR指南- ssr.vuejs.org。2、Nuxt.js从头搭建一个服务端渲染...原创 2020-04-21 11:33:19 · 156 阅读 · 0 评论 -
322、Vue学习笔记28 -【状态管理】 2020.04.21
0、目录1、类 Flux 状态管理的官方实现2、简单状态管理起步使用3、参考链接1、类 Flux 状态管理的官方实现由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长。为了解决这个问题,Vue 提供 vuex:我们有受到 Elm 启发的状态管理库。vuex 甚至集成到 vue-devtools,无需配置即可进行时光旅行调试 (time travel debugging...原创 2020-04-21 10:21:29 · 127 阅读 · 0 评论 -
321、Vue学习笔记27 -【路由】 2020.04.21
0、目录1、官方路由2、从零开始简单的路由3、整合第三方路由4、参考链接1、官方路由对于大多数单页面应用,都推荐使用官方支持的 vue-router 库。更多细节可以移步 vue-router 文档。2、从零开始简单的路由如果你只需要非常简单的路由而不想引入一个功能完整的路由库,可以像这样动态渲染一个页面级的组件:const NotFound = { template: '<p&g...原创 2020-04-21 10:08:59 · 164 阅读 · 0 评论 -
320、Vue学习笔记26 -【生产环境部署】 2020.04.20
0、目录1、开启生产环境模式1.1 不使用构建工具1.2 使用构建工具2、模板预编译3、提取组件的 CSS4、跟踪运行时错误5、参考链接1、开启生产环境模式开发环境下,Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下,这些警告语句却没有用,反而会增加应用的体积。此外,有些警告检查还有一些小的运行时开销,这在生产环境模式下是可以避免的。1.1 不使用构建工具如果用 Vu...原创 2020-04-20 18:15:21 · 189 阅读 · 0 评论 -
319、Vue学习笔记25 -【TypeScript 支持】 2020.04.20
0、目录1、发布为 NPM 包的官方声明文件2、推荐配置3、开发工具链3.1 工程创建3.2 编辑器支持4、基本用法5、基于类的 Vue 组件6、增强类型以配合插件使用7、标注返回值8、参考链接1、发布为 NPM 包的官方声明文件静态类型系统能帮助你有效防止许多潜在的运行时错误,而且随着你的应用日渐丰满会更加显著。这就是为什么 Vue 不仅仅为 Vue core 提供了针对 TypeSc...原创 2020-04-20 17:38:06 · 310 阅读 · 0 评论 -
318、Vue学习笔记24 -【单元测试】 2020.04.20
0、目录1、简单的断言2、编写可被测试的组件3、断言异步更新4、参考链接1、简单的断言你不必为了可测性在组件中做任何特殊的操作,导出原始设置就可以了:<template> <span>{{ message }}</span></template><script> export default { data ()...原创 2020-04-20 16:46:24 · 130 阅读 · 0 评论 -
317、Vue学习笔记23 -【单文件组件】 2020.04.20
0、目录1、介绍1.1 怎么看待关注点分离?2、起步2.1 例子沙箱2.2 针对刚接触 JavaScript 模块开发系统的用户3、针对高级用户4、参考链接1、介绍在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好,在这...原创 2020-04-20 16:09:58 · 128 阅读 · 1 评论 -
316、Vue学习笔记22 -【过滤器】 2020.04.20
0、目录1、过滤器2、参考链接1、过滤器Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:<!-- 在双花括号中 -->{{ message | capitalize }}<!-- ...原创 2020-04-20 14:47:38 · 160 阅读 · 0 评论 -
315、Vue学习笔记21 -【插件】 2020.04.20
0、目录1、插件2、使用插件3、开发插件4、参考链接1、插件插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:(1)添加全局方法或者属性。如:vue-custom-element(2)添加全局资源:指令/过滤器/过渡等。如 vue-touch(3)通过全局混入来添加一些组件选项。如 vue-router(4)添加 Vue 实例方法,通过把它们添加到 ...原创 2020-04-20 14:39:35 · 143 阅读 · 0 评论 -
314、Vue学习笔记20 -【渲染函数 & JSX】 2020.04.20
0、目录1、基础2、节点、树以及虚拟 DOM2.1 虚拟 DOM3、createElement 参数4、使用 JavaScript 代替模板功能4.1 v-if 和 v-for4.2 v-model5、JSX(Javascript和XML结合的一种格式)6、函数式组件7、模板编译8、参考链接1、基础Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你真的需要 Ja...原创 2020-04-20 14:29:35 · 289 阅读 · 0 评论 -
313、Vue学习笔记19 -【自定义指令】 2020.04.17
0、目录1、简介2、钩子函数3、钩子函数参数4、函数简写5、对象字面量6、参考链接1、简介除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。举个聚焦输入框的例子,如下:当页面加载时,该元素将获得焦点...原创 2020-04-17 18:02:48 · 128 阅读 · 0 评论 -
312、Vue学习笔记18 -【可复用性 & 组合】 2020.04.17
0、目录1、基础2、选项合并3、全局混入4、自定义选项合并策略5、参考链接1、基础混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。例子:// 定义一个混入对象var myMixin = { created: function () { ...原创 2020-04-17 17:09:38 · 115 阅读 · 0 评论 -
311、Vue学习笔记17 -【状态过渡】 2020.04.17
0、目录1、状态动画与侦听器2、动态状态过渡3、把过渡放到组件里4、赋予设计以生命5、参考链接1、状态动画与侦听器Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢,比如:数字和运算颜色的显示SVG 节点的位置元素的大小和其他的属性这些数据要么本身就以数值形式存储,要么可以转换为数值。有了这些数值后,我们就可以结合 Vue 的响应式和组...原创 2020-04-17 16:45:48 · 129 阅读 · 0 评论 -
310、Vue学习笔记16 -【进入/离开 & 列表过渡】 2020.04.17
0、目录1、概述2、单元素/组件的过渡3、初始渲染的过渡4、多个元素的过渡5、多个组件的过渡6、列表过渡7、可复用的过渡8、动态过渡9、参考链接1、概述Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库,如 Animate.css在过渡钩子函数中使用 JavaScript...原创 2020-04-17 15:20:46 · 224 阅读 · 0 评论 -
309、Vue学习笔记15 -【处理边界情况】 2020.04.16
0、目录1、访问元素 & 组件1.1 访问根实例1.2 访问父级组件实例1.3 访问子组件实例或子元素1.4 依赖注入2、程序化的事件侦听器3、循环引用3.1 递归组件3.2 组件之间的循环引用4、模板定义的替代品4.1 内联模板4.2 X-Template5、控制更新5.1 强制更新5.2 通过 v-once 创建低开销的静态组件6、参考链接这里记录的都是和处理...原创 2020-04-16 18:17:36 · 168 阅读 · 0 评论 -
308、Vue学习笔记14 -【动态组件 & 异步组件】 2020.04.16
0、目录1、在动态组件上使用 keep-alive2、异步组件3、处理加载状态4、参考链接1、在动态组件上使用 keep-alive我们之前曾经在一个多标签的界面中使用 is attribute 来切换不同的组件:<component v-bind:is="currentTabComponent"></component>当在这些组件之间切换的时候,你有时会想保持...原创 2020-04-16 16:36:11 · 139 阅读 · 0 评论 -
307、Vue学习笔记13 -【插槽】 2020.04.16
0、目录1、插槽内容2、编译作用域3、后备内容4、具名插槽5、作用域插槽5.1 独占默认插槽的缩写语法5.2 解构插槽 Prop6、动态插槽名7、具名插槽的缩写8、其它示例9、废弃了的语法9.1 带有 slot attribute 的具名插槽9.2 带有 slot attribute 的具名插槽10、参考链接在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (...原创 2020-04-16 15:21:20 · 281 阅读 · 0 评论 -
306、Vue学习笔记12 -【自定义事件】 2020.04.16
0、目录1、事件名2、自定义组件的 v-model3、将原生事件绑定到组件4、.sync 修饰符5、参考链接1、事件名不同于组件和 prop,事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子,如果触发一个 camelCase 名字的事件:this.$emit('myEvent')则监听这个名字的 kebab-case 版本是不会有任何效果的...原创 2020-04-16 11:34:44 · 94 阅读 · 0 评论 -
305、Vue学习笔记11 -【Prop】 2020.04.15
0、目录1、Prop 的大小写 (camelCase vs kebab-case)2、Prop 类型3、传递静态或动态 Prop3.1 传入一个数字3.2 传入一个布尔值3.3 传入一个数组3.4 传入一个对象3.5 传入一个对象的所有属性4、单向数据流5、Prop 验证5.1 类型检查6、 非 Prop 的 Attribute6.1 替换/合并已有的 Attribute6.2 禁用...原创 2020-04-15 17:59:32 · 139 阅读 · 0 评论 -
304、Vue学习笔记10 -【组件注册】 2020.04.15
0、目录1、组件名1.1 组件名大小写2、全局注册3、局部注册4、模块系统5、参考链接1、组件名在注册一个组件的时候,我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了:Vue.component('my-component-name', { /* ... */ })该组件名就是 Vue.component 的第一个参数。你给予组件的名字可能依赖于你打算拿它来做什么。当直接...原创 2020-04-15 15:43:04 · 127 阅读 · 0 评论 -
303、Vue学习笔记09 -【组件基础】 2020.04.15
0、目录1、基本示例2、 组件的复用2.1 data 必须是一个函数3、组件的组织4、通过 Prop 向子组件传递数据5、单个根元素6、监听子组件事件6.1 使用事件抛出一个值6.2 在组件上使用 v-model7、通过插槽分发内容8、动态组件9、解析 DOM 模板时的注意事项10、参考链接1、基本示例这里有一个 Vue 组件的示例:// 定义一个名为 button-counter 的新...原创 2020-04-15 14:48:37 · 209 阅读 · 0 评论 -
302、Vue学习笔记08 -【表单输入绑定】 2020.04.15
0、目录1、基础用法1.1 文本1.2 多行文本1.3 复选框1.4 单选按钮1.5 选择框2、值绑定2.1 复选框2.2 单选按钮2.3 选择框的选项3、修饰符3.1 .lazy3.2 .number3.3 .trim4、在组件上使用 v-model5、参考链接1、基础用法你可以用 v-model 指令在表单 input、textarea 及 select 元素...原创 2020-04-15 10:35:58 · 149 阅读 · 0 评论 -
301、Vue学习笔记07 -【事件处理】 2020.04.13
0、目录1、监听事件2、事件处理方法3、内联处理器中的方法4、事件修饰符5、按键修饰符5.1 按键码6、系统修饰键6.1 .exact 修饰符6.2 鼠标按钮修饰符7、为什么在 HTML 中监听事件?8、参考链接1、监听事件可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。示例:<div id="example-1"> <...原创 2020-04-14 18:20:58 · 128 阅读 · 0 评论 -
300、Vue学习笔记06 -【列表渲染】 2020.04.13
0、目录1、用 v-for 把一个数组对应为一组元素1.1 用 v-for 指令基于一个数组来渲染一个列表1.2 在 v-for 块中,我们可以访问所有父作用域的属性2、在 v-for 里使用对象3、维护状态4、数组更新检测4.1 变异方法 (mutation method)4.2 替换数组4.3 注意事项5、显示过滤/排序后的结果6、在 v-for 里使用值范围7、在 template ...原创 2020-04-13 17:33:17 · 186 阅读 · 0 评论 -
299、Vue学习笔记05 -【条件渲染】 2020.04.13
0、目录1、v-if1.1 在 template 元素上使用 v-if 条件渲染分组1.2 v-else1.3 v-else-if1.3 用 key 管理可复用的元素2、v-show3、v-if vs v-show4、v-if 与 v-for 一起使用5、参考链接1、v-ifv-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。<...原创 2020-04-13 15:28:20 · 100 阅读 · 0 评论 -
298、Vue学习笔记04 -【Class 与 Style 绑定】 2020.04.13
0、目录1、绑定 HTML Class1.1 对象语法1.2 数组语法1.3 用在组件上2、绑定内联样式2.1 对象语法2.2 数组语法2.3 自动添加前缀2.4 多重值3、参考链接操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bi...原创 2020-04-13 14:37:43 · 96 阅读 · 0 评论 -
297、Vue学习笔记03 -【计算属性和侦听器】 2020.04.10
0、目录1、计算属性1.1 介绍1.2 基础例子1.3 计算属性 vs 侦听属性1.4 计算属性的 setter2、侦听器2.1 为什么需要侦听器?3、参考链接1、计算属性1.1 介绍模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example"> {{ message.split(...原创 2020-04-13 10:10:55 · 96 阅读 · 0 评论 -
296、Vue学习笔记02 -【模板语法】 2020.04.10
0、目录1. 插值1.1 文本1.2 原始HTML2、指令2.1 参数3、缩写3.1 v-XXX 前缀缩写3.2 bind 缩写3.3 v-on 缩写3.4 指令缩写总结4、参考链接模板语法Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 H...原创 2020-04-10 17:40:54 · 165 阅读 · 0 评论 -
295、Vue学习笔记01 -【Vue实例】 2020.04.10
0、目录1、创建一个Vue实例2、数据与方法3、实例生命周期/钩子函数4、生命周期图示5、参考链接1、创建一个Vue实例1.1 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:var vm = new Vue({ // 选项})Vue在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。1.2 一个 Vue 应用由一...原创 2020-04-10 15:25:23 · 168 阅读 · 0 评论 -
195.Vue.js智能扫码点餐系统(二十九)【点击去支付调用Nodejs Api接口实现支付(支付宝支付)】2019.04.01
0、知识点提交订单 Api 接口.提交订单成功跳转到成功页面1、提交订单 Api 接口请求方式:post地址:域名/api/doPay实际地址:http://a.itying.com/api/doPay传递参数说明:参数 说明 备注Order.vue订单支付代码 doPay(){ var that=this; ...原创 2019-04-01 14:03:45 · 857 阅读 · 0 评论 -
196.Vue.js智能扫码点餐系统(三十)【打包发布上线测试】2019.04.01
0、知识点配置config打包发布,只打包index.html和dist两个文件扫码二维码 ,进入用餐页面1、配置configvar config={ api:'http://a.itying.com/', //服务器api接口地址 return_url:'http://t.apiying.com/#/success' //支付成功跳转地址 vue项目的地址...原创 2019-04-01 14:34:47 · 587 阅读 · 1 评论 -
197.Vue.js智能扫码点餐系统(三十一)【JSSDK微信支付准备工作、 注册公众平台账户、申请微信支付 、生成商户平台账户(微信支付)】2019.04.01
0、知识点微信 JSSDK 支付前的准备工作,以及需要获取内容注册公众平台账户,申请微信支付认证后点击开通微信支付公众号支付具体支付接入流程开户成功,登录商户平台进行验证1、微信 JSSDK 支付前的准备工作,以及需要获取内容准备工作:必须要有企业营业执照、对公账户。需要获取内容:appid:微信公众平台 APPIDappsecret:微信公众平台 appsecret...原创 2019-04-01 15:51:10 · 504 阅读 · 0 评论 -
198.Vue.js智能扫码点餐系统(三十二)【JSSDK微信支付和H5支付区别、 JSSDK说明、以及获取appid、获取appsecret、获取商户账户、获取商户(微信支付)】2019.04.01
0、知识点JSSDK微信支付(本次开发采用微信支付)H5支付获取 appsecret、获取商户账户、获取商户 key1、JSSDK/ JSAPI支付用户通过微信扫描二维码,在微信内进入商家的H5页面,并在微信内调用JSSDK完成支付开发文档:https://pay.weixin.qq.com/wiki/doc/api/index.html2、什么是JSSDK?可...原创 2019-04-01 16:35:08 · 1469 阅读 · 0 评论 -
199.Vue.js智能扫码点餐系统(三十三)【JSSDK配置流程、结合后端nodejs实现扫一扫功能、获取网络状态、拍照 (微信支付)】2019.04.01
0、知识点JSSDK配置流程1、Jssdk官网https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp14211411152、配置微信JSSDK支付之前的准备工作很重要公众号里面的配置 1、配置JS安全域名: 公众号设置->功能设置->JS接口安全域名 b.itying.com ...原创 2019-04-01 20:22:32 · 527 阅读 · 0 评论 -
200.Vue.js智能扫码点餐系统(三十四)【 JSSDK 获取code 、获取 openid 、调用统一下单接口实现支付(微信支付)】2019.04.01
0、知识点JSSDK 获取code获取 openid调用统一下单接口实现支付1、微信支付流程文档开发: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_4业务流程时序图1、Jssdk官网 https://mp.weixin.qq.com/wiki?t=resource/res_main&a...原创 2019-04-01 21:11:10 · 1639 阅读 · 0 评论 -
201.Vue.js智能扫码点餐系统(三十五)【项目集成微信支付 (微信支付)】2019.04.01
0、知识点项目集成微信支付1、项目中集成微信支付1、在vue中配置jssdk 以及微信支付 (1、jssdk的安全域名、网页授权域名、配置公众号支付授权目录 2、vue中使用jssdk支付必须使用vue-router的 History 模式,History模式必须配置伪静态) (不建议 支付不建议前后端分离) 2、Jssdk的配置还是服务器配...原创 2019-04-01 21:36:44 · 896 阅读 · 0 评论 -
184.Vue.js智能扫码点餐系统(十八)【express Socket.io 实现聊天室(扩展)】2019.03.26
0、知识点expressSocket.io实现聊天室1、app.js/** * Created by Administrator on 2017/10/27 0027. */var express=require('express');var app=express();var DB=require('./module/db.js');app.set('vie...原创 2019-03-26 09:38:25 · 323 阅读 · 0 评论 -
161.Vue实现个人博客(九)【Vue2.0-get拉取数据及项目打包上传到服务器】 2019.03.15
0、知识点get数据打包项目到自己的服务器、或者Github1、问题提出在ShowBlog.vue中,this.blogs = data.body.slice(0,10);的data.body.slice不在是一个数组了,而是一个对象,而filterblogs遍历的却还是一个数组,那么可以采取将这些对象存储到数组里面中去,将每一个对象前面的标识当做我们的id值,进行传递2、Sh...原创 2019-03-15 23:12:04 · 425 阅读 · 0 评论