vue
少年民仔
青春是用来拼搏的,不是用来挥霍的!
展开
-
搭建一个简单的脚手架
起因大部分项目的技术栈,引用的组件库,工具库等,以及整体的项目框架都是一致的,每次新开一个项目,都要做N次的CV,影响效率不说,也不优雅。如何让这个过程变得简洁而又优雅呢?毫无疑问,我们需要一个自定义的脚手架,而我们的脚手架需求也很简单,就是把我们写好的模板代码拉下来就行啦。实现一个通用的项目模板具体实现的项目模板因人而异,这里提供一个自己实现的 vue + typescript 的项目作为...原创 2020-01-08 17:07:44 · 1276 阅读 · 0 评论 -
从零搭建vue+express开发环境
该项目是在学习vue过程中,秉着前后端分离的态度,尝试着自己搭建vue+express环境搭建vue项目安装vue-cli脚手架npm install -g vue-cli创建基于webpack模版的项目vue init webpack firstapp安装包依赖并运行cd firstappnpm installnpm run dev在浏览器上输入localhost:8080,这就是原创 2018-01-12 14:36:41 · 15860 阅读 · 13 评论 -
Vue beforeRouteEnter 的next执行时机
背景今天在用vue实现界面的时候,想在beforeRouteEnter钩子函数中去获取数据,然后通过next方法设置到跳转页面的实例中,结果发现数据一直没办法在界面渲染的时候赋值,苦思不得其解,遂google之,终寻原因,记录之。注意beforeRouteEnter (to, from, next) { console.log(this); //undefined,不能用this来获取vu原创 2018-01-23 21:15:19 · 19400 阅读 · 3 评论 -
vue组件参数传递命名
背景今天在父子组件传值的时候,父组件的值死活传不到子组件中,断点调试也没有值,后来打开控制台发现警告信息,html语句中不识别大写字母,再一看,参数是驼峰命名,难不成是这个问题,遂百度之,确实如此,html中不支持大下写,所以父组件传值的时候,参数名应该用短横线连接。注意错误示例:<my-component :userName='userName'></my-component>正确示例:<my-c原创 2018-01-24 20:34:29 · 1092 阅读 · 0 评论 -
如何打造更快更轻的 Vue 应用
本文主要针对自己最近项目中遇到的一些问题,并参照网上的一些文章,整理了部分 Vue 性能优化上的点。代码优化v-show 和 v-if 的使用使用了v-if的时候,如果值为false,那么页面将不会有这个 html 标签生成,而v-show则不管值为 true 还是 false,html 元素都会存在,只是 CSS 中的 display 显示或隐藏, 因此需要频繁切换的用 v-show。...原创 2019-07-05 11:08:12 · 278 阅读 · 0 评论 -
Vue 使用的一些小技巧
We can’t change history, but we can change the future. --忘了哪里看到的起手最近一直在用 Vue 开发,期间并没有很认真的做个总结,本文也只是对自己印象较为深刻的点列举一二。Router key由于 Vue 会复用相同组件,例如 /page?id=1 => /page?id=2 这类跳转的情况,组件将不会执行 created...原创 2019-07-05 11:09:43 · 1357 阅读 · 1 评论 -
如何优雅的使用 Vue Router History 模式
如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。 —— Vue Router 官网为啥要使用 History 模式还能有什么原因,hash 模式的 # 不好看呗,当然了,我们也不能仅仅只看颜值,还有一些其他原因,例如 hash 模式下对一些需要锚点功能的需求会和他的路由...原创 2019-07-05 11:11:29 · 6589 阅读 · 2 评论 -
Vue 源码学习之 diff 算法
学习源码可以让我们更加深入的了解框架的思想,以便我们能够更好的利用框架前言之所以写这篇文章,一个是因为最近看了 vue 的相关源码,也看了不少大佬们对 diff 算法的分析,本着学习的态度,总结一下自己对 diff 算法的一些理解,不求能比大佬们讲的出色,只希望能讲清楚自己学习 diff 算法的心路历程,还有一个比较重要的原因是之前在群里看到有人问为什么 v-for 遍历的时候需要指定 k...原创 2019-09-16 09:27:18 · 546 阅读 · 0 评论 -
Vue 源码学习之事件机制
前言写这篇文章的起因是因为今天组里的小伙伴问了我一个比较常见的语法的原理,而我用了这么久的 vue,对该写法早已熟能生巧,但一谈到如何实现,突然愣住了,这玩意儿好像真没注意过,那么是什么问题呢?看下面代码。<div @click="onClick">测试</div><div @click="onClick($events, '测试')">测试</di...原创 2019-09-20 15:12:48 · 330 阅读 · 0 评论