摘要：
本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我，有空就给你们写。 对大部分人来说，掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更加高效地使用Vue来开发，成为Vue.js大师，那下面我要传授的这五招你一定得认真 阅读全文
posted @ 2018-11-06 23:15
sfornt
阅读(184)
评论(0)
推荐(0)
摘要：
简单实现手机号银行卡的同步显示功能 这是某盟的一道面试题 难道不都是只要有了清晰的思路后边写边优化么 当时我就说了思路用计算属性根据输入框的内容计算出预览框的值 处理focus和blur事件即可 非要手写，手写根本写不出啊，然后面试官就认为我不会 无语了 要求如下 输入框输入内容数据长度大于0，展示 阅读全文
posted @ 2018-11-06 23:15
sfornt
阅读(325)
评论(0)
推荐(0)
摘要：
提示 开始制作 超简易呼吸轮播 简单粗暴的使用vue transition制作的轮播图,这里解释一下原理 动画效果就像车辆穿行隧道,定好初始位置/最终位置,设定好运动规则,它就自动开了.在下面的实例中,我们设定好了运行规则,和分别两种状态,它就开始自动运行了.大家可以对照上图看一下,很容易的,图中的 阅读全文
posted @ 2018-11-06 23:13
sfornt
阅读(1067)
评论(0)
推荐(0)
摘要：
前言 最近在看element ui的源码，发现了一个这样的属性:inject.遂查看官网provider/inject provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。 需要注意的是这里不论子组件有多深，只要调用了in 阅读全文
posted @ 2018-11-06 23:12
sfornt
阅读(379)
评论(0)
推荐(0)
摘要：
论vue项目api相关代码的组织方式 看了下项目组同事的代码，发现不同项目有不同的组织版本 版本一： 每个api文件里都是这样的代码 这种方法的缺点： 新增一个借口就新增一个方法 任何需要调用借口的地方都需要引入 api文件里只有url和函数名不一样,其他都一样,应该封装到一起 查看所有接口需一个一 阅读全文
posted @ 2018-11-06 23:10
sfornt
阅读(365)
评论(0)
推荐(0)
摘要：
将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。 SSR的目的 To solve 首屏渲染问题 SEO问题 项目结构 原理概览 这张图相信很多大佬们都看过N遍了，每个人理解不同，我发表一下自己个人的理解，如果有什么理解错误请 阅读全文
posted @ 2018-11-06 23:09
sfornt
阅读(194)
评论(0)
推荐(0)
摘要：
在开发 vue 的时候，我们可以使用 watch 和 computed 很方便的检测数据的变化，从而做出相应的改变，但是在小程序里，只能在数据改变时手动触发 this.setData()，那么如何给小程序也加上这两个功能呢？ 我们知道在 vue 里是通过 Object.defineProperty 阅读全文
posted @ 2018-11-06 23:06
sfornt
阅读(1346)
评论(0)
推荐(0)
摘要：
剖析Vue实现原理 如何实现双向绑定mvvm 本文能帮你做什么？1、了解vue的双向数据绑定原理以及核心代码模块2、缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现，本文相关代码主要摘自vue源码, 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等，也难免存在一些问题， 阅读全文
posted @ 2018-11-06 23:04
sfornt
阅读(285)
评论(0)
推荐(0)
摘要：
vue拿来写插件，会不会太那啥？ 请跟我念，“不会，符合业务需求才是你的老板最想要的。” 如何封装一个可以全局调用的vue插件 其原理其实相当简单，通过new Vue(vueComponentConstructor)您可以轻松的建立一个vue实例，在该实例上您可以操作方法、操作数据、监听数据变化，使 阅读全文
posted @ 2018-11-06 23:02
sfornt
阅读(615)
评论(0)
推荐(0)
摘要：
在制作项目的时候遇到一个需求，点击一个按钮弹出一个input输入框，并让输入框获得焦点，项目中引用了ElementUI 在网上查找了很多方法，但是在实际使用中发现了一个问题无论是使用$ref获取input元素然后使用focus方法还是使用饿了么组件自带的autoFocus都只有在第一次点击按钮的时候 阅读全文
posted @ 2018-11-06 23:00
sfornt
阅读(23871)
评论(0)
推荐(2)
摘要：
webpack4 released 已经有一段时间了，插件系统趋于平稳，适逢对webpack3的打包速度很不满意，因此决定将当前在做的项目进行升级，正好也实践一下webpack4。 新特性 0配置 应该是parcel出来以后，webpack团队意识到其配置确实有点复杂，不太容易上手。so, weba 阅读全文
posted @ 2018-11-06 22:59
sfornt
阅读(276)
评论(0)
推荐(0)
摘要：
问题：在做运营开发工具的时候 我想要请求后台服务器保存成功后 弹出一个弹框（饿了吗 的 message 弹框）， 由于$message 是挂在 Vue原型链上的方法 （Vue.prototype.$message = Message;）。以下action.js 中的this不指向Vue，因此以下代码 阅读全文
posted @ 2018-11-06 22:58
sfornt
阅读(4423)
评论(0)
推荐(0)
摘要：
Vue的主要原理中主要用到了定义的这么几个函数Dep，Watcher，observer。我们来使用这几个函数简单的实现一下vue构造函数数据绑定和相互依赖部分，梳理一下它们之间的关系。省略了编译部分和proxy代理与其他的一些复杂逻辑。 Dep Dep是依赖类，简要实现为 observer 做属性劫 阅读全文
posted @ 2018-11-06 22:56
sfornt
阅读(571)
评论(0)
推荐(0)
摘要：
都是个人理解，如果发现错误，恳请大家批评指正，谢谢。还有我说的会比较啰嗦，因为是以自身菜鸡水平的视角来记录学习理解的过程，见谅。 1.前言 产品使用vue+element作为前端框架。在功能开发过程中，难免遇到使用element的组件没办法满足特殊的业务需要，需要对其进行定制，例如要求选择器的弹出框 阅读全文
posted @ 2018-11-06 22:55
sfornt
阅读(626)
评论(0)
推荐(0)
摘要：
高产似母猪。。写完上篇看了几集新番就空虚了。。零点时分决定爬起来，趁着清明假期能写多写点。 1.前言 我们知道弹出框都是在触发了某种条件后展示，而一个个的新的弹出框的展示，总是覆盖着上一个弹出框。实现覆盖功能需要保证新的弹出框的z index要比旧的弹出框的z index值相等或着更高，为达到这个目 阅读全文
posted @ 2018-11-06 22:53
sfornt
阅读(2508)
评论(0)
推荐(0)
摘要：
在开发过程中，对于某些API在现有的JavaScript运行时环境不支持的时候，我们大都会采用加入polyfill来解决这个问题。但有些时候我们可能需要知道现在某个API到底是否为运行时环境所原生支持，还是polyfill代码支持的。今天在学习Vue 2.X版本的源代码时，就发现了Vue中也有用来检 阅读全文
posted @ 2018-11-06 22:52
sfornt
阅读(352)
评论(0)
推荐(0)
摘要：
前言 最近在学习Vue的使用。看了官方文档之后，感觉挺有意思的。于是着手做了一个简单的购物app。h5 与原生 app 交互的原理这是我第一次在这个网站上写分享，如有不当之处，请多多指教。 一整个项目写下来，最大的感觉就是组件式开发，管理起来实在是太舒服了。而且vue中写scss还可以指定局部有效。 阅读全文
posted @ 2018-11-06 22:50
sfornt
阅读(3237)
评论(0)
推荐(0)
摘要：
背景：在写提交订单页面时候，底部按钮当我点击输入留言信息的时候，底部提交订单按钮被输入法软键盘顶上去遮挡住了。 h5 ios输入框与键盘 兼容性优化 实现原理：当页面高度发生变化的时候改变底部button的样式，没点击前button在底部固定position: fixed;当我点击input的时候样 阅读全文
posted @ 2018-11-06 22:48
sfornt
阅读(4343)
评论(0)
推荐(1)
摘要：
项目初始化使用 webpack simple 方式比较方便和容易配置，原来的方式各种坑慎入 项目结构如下所示 更改webpack.config.js配置 修改package.json 修改index.htmlsrc="/dist/build.js" 改成 src="/dist/vue card sl 阅读全文
posted @ 2018-11-06 22:46
sfornt
阅读(1975)
评论(0)
推荐(1)
摘要：
第一步: 新建模板并保存 文件 > 首选项 > 用户代码片段 > 输入vue，选择vue.json >复制 第三步中的模板内容中内容保存 第二步: 添加配置，让vscode允许自定义的代码片段提示出来 文件 > 首选项 > 设置 > 添加这2项 第三步: 复 阅读全文
posted @ 2018-11-06 22:45
sfornt
阅读(3320)
评论(0)
推荐(0)
摘要：
I18n (internationalization ) 未完善 产品国际化是产品后期维护及推广中重要的一环，通过国际化操作使得产品能更好适应不同语言和地区的需求 国际化重点：1、 语言语言本地化2、 文化颜色、习俗等3、 书写习惯日期格式、时区、数字格式、书写方向备注：项目中会兵分两路，一路是语言 阅读全文
posted @ 2018-11-06 22:44
sfornt
阅读(1129)
评论(0)
推荐(0)
摘要：
今天在做一个支付界面倒计时功能时碰到如下问题： 点击提交订单跳转到确认订单（支付）页面，在顶部有一个倒计时，与此同时，接口返回有创建订单时间字段，根据此字段实现倒计时 实现思路： 将后台获取的时间使用vuex储存，调用：self.$store.state.subOrder.created_at获取到 阅读全文
posted @ 2018-11-06 22:42
sfornt
阅读(1085)
评论(0)
推荐(0)
摘要：
nuxt cnode 基于vue的nuxt框架仿的cnode社区服务端渲染，主要是为了seo优化以及首屏加载速度 线上地址 http://nuxt cnode.foreversnsd.cngithub地址 https://github.com/Kim09AI/nu... 技术栈 vue vue ro 阅读全文
posted @ 2018-11-06 22:41
sfornt
阅读(455)
评论(0)
推荐(0)
摘要：
一、Vue CLI初始化Vue项目 全局安装vue cli npm install global vue cli 创建一个基于 webpack 模板的新项目 vue init webpack my project 进入项目目录试运行 npm run dev 二、将BootStrap加入到Vue项目中 阅读全文
posted @ 2018-11-06 18:43
sfornt
阅读(1487)
评论(0)
推荐(0)
摘要：
新建文件夹 webpack vue 安装依赖 新建index.html 新建文件夹src，在src下新建index.js 第一次打包 你会发现目录底下多了dist文件夹里面有main.js，打开index.html 可以看到console里已经打印出了hello webpack v4,在终端会有一个 阅读全文
posted @ 2018-11-06 18:42
sfornt
阅读(161)
评论(0)
推荐(0)
摘要：
Switch组件，业务需求中经常遇到。我司的旧项目中，由于没有使用较为成熟点的组件库。自己实现了一个switch组件，但是实现的略微有些丑陋。 实现基本需求 https://jsfiddle.net/huang_ju... 这里，需要实现基础的切换功能和禁用功能。 let ElSwitch = { 阅读全文
posted @ 2018-11-06 18:41
sfornt
阅读(1235)
评论(0)
推荐(0)
摘要：
初始一个vue.js项目时，常常发现main.js里有如下代码: 这什么意思？那我自己做项目怎么改？其实render: h => h(App)是 进一步缩写为(ES6 语法)： ES6箭头函数 其中 根据 Vue.js 作者 Even You 的回复，h 的含义如下： It comes fro 阅读全文
posted @ 2018-11-06 18:39
sfornt
阅读(674)
评论(0)
推荐(0)
摘要：
背景 前后端分离项目 — SpringSocial 绑定与解绑社交账号如微信、QQ2018 08 14更新时隔四个月第一次更新，因为项目重构有一次接触到了微信授权，思路已经比原来清晰的多了，将重新修改一下整个文章 场景 app将商品分享到微信朋友圈或者分享给微信好友，用户点击页面时进行微信授权登陆， 阅读全文
posted @ 2018-11-06 18:35
sfornt
阅读(5204)
评论(0)
推荐(0)
摘要：
一、样式问题 1.vue中使用less 安装less依赖 npm install less less loader save dev 在使用时 在style标签中加入 lang="less" 也可以加上scoped代表样式只在此作用域中有效。 2.使用element插件时修改其样式，在vue中不起作 阅读全文
posted @ 2018-11-06 18:34
sfornt
阅读(2380)
评论(0)
推荐(0)
摘要：
在目前的前端面试中，vue的双向数据绑定已经成为了一个非常容易考到的点，即使不能当场写出来，至少也要能说出原理。本篇文章中我将会仿照vue写一个双向数据绑定的实例，名字就叫myVue吧。结合注释，希望能让大家有所收获。 1、原理 Vue的双向数据绑定的原理相信大家也都十分了解了，主要是通过 Obje 阅读全文
posted @ 2018-11-06 18:32
sfornt
阅读(403)
评论(0)
推荐(0)
摘要：
闲话不多说，用到vue的童鞋们应该大部分都会遇到请求中的各种奇葩问题，昨天研究一天，终于搞出来个所以然了，写篇文章拯救一下广大的童鞋们，某度娘当然也可以搜到，但一般解决了一个问题后就会出现另外一个问题，一个接一个，不断的问题涌现在我的console里面。印象中，我应该遇到过403,405,302,这 阅读全文
posted @ 2018-11-06 18:28
sfornt
阅读(11191)
评论(0)
推荐(0)
摘要：
一、分析各模块打包后大小 用vue cli创建的项目，已经集成 webpack bundle analyzer。详见文件 build/webpack.prod.conf.js，代码如下： 运行npm run build report后，会提示： 在该网址上可查看详细信息。 二、发现项目里打包后比较大 阅读全文
posted @ 2018-11-06 18:26
sfornt
阅读(1071)
评论(0)
推荐(0)
摘要：
Element iView Vuex Mint UI Vant cube ui，对比六大 vue ui 组件库，选中最适合的那个。 Element(pc) 介绍 & 版本 饿了么前端团队开发的桌面端组件库，当前最新版本：2.4.8 Star：32.067k 项目特色 团队维护 支持三个版本： 阅读全文
posted @ 2018-11-06 18:22
sfornt
阅读(419)
评论(0)
推荐(0)
摘要：
最近做vue项目，做分页的功能，使用post给后台发送数据，使用接口还是工具（postman）都可获取数据，唯独axios获取不到；经过排除，发现这与axios的post传参格式有关系； 在使用axios时，要注意到配置选项中包含params和data两者，以为他们是相同的，实则不然。 因为para 阅读全文
posted @ 2018-11-06 18:21
sfornt
阅读(187)
评论(0)
推荐(0)
摘要：
问题描述 项目开发遇到一个ios独有的问题，在wkwebview中稳定复现 问题： 弹出一个蒙版，当在蒙版上面滑动的时候蒙版后面的内容滚动了 这当然是ios的bug，但是经过我们测试iphone7也会复现这个问题，所以没办法需要兼容。 vue 弹框产生的滚动穿透问题 百度了下好多思路 方法1： 直接 阅读全文
posted @ 2018-11-06 18:20
sfornt
阅读(3063)
评论(0)
推荐(0)
摘要：
1.首先主要的config文件下的index.js中的proxytable配置 proxyTable:{ 跨域几种方式 2.config下的dev.env.js中配置base_api,即与上文对应的proxy //这里是开发模式下的配置,产品模式到prod.env.js中配置 3.axios中的全局 阅读全文
posted @ 2018-11-06 18:16
sfornt
阅读(6800)
评论(0)
推荐(1)
摘要：
在动态组件上使用keep alive 我们之前曾经在一个多标签的界面中使用is特性来切换不同的组件： Vue.js的动态组件模板 当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。 如上是vue官网的例子，你会注意到如果你选择一篇文章，切换到Archive标签 阅读全文
posted @ 2018-11-06 16:57
sfornt
阅读(3308)
评论(0)
推荐(0)
摘要：
官网对生命周期给出了一个比较完成的流程图，如下所示： 从图中我们可以看到我们的Vue创建的过程要经过以下的钩子函数： 那么我们就从源码的角度来看一看吧，当我们new Vue的时候，会执行_init函数 function Vue (options) { if (process.env.NODE_ENV 阅读全文
posted @ 2018-11-06 16:54
sfornt
阅读(195)
评论(0)
推荐(0)
摘要：
最近在用Vue仿写cnode社区，想要上传到github，并通过Github pages预览，在这个过程中遇到了一些问题，因此写个笔记，以便查阅。 完成Vue项目以后，在上传到github之前，需要修改一些配置才能通过github pages预览项目。 一、修改配置 解决文件路径问题： 打开项目根目 阅读全文
posted @ 2018-11-06 16:53
sfornt
阅读(1057)
评论(0)
推荐(0)
摘要：
思路分析 数据的双向绑定，就是数据变化了自动更新视图，视图变化了自动更新数据，实际上视图变化更新数据只要通过事件监听就可以实现了，并不是数据双向绑定的关键点。关键还是数据变化了驱动视图自动更新。 所有接下来，我们详细了解下数据如何驱动视图更新的。数据驱动视图更新的重点就是，如何知道数据更新了，或者说 阅读全文
posted @ 2018-11-06 16:50
sfornt
阅读(130)
评论(0)
推荐(0)
摘要：
构建工具是如何用 node 操作 html/js/css/md 文件的 从本质上来说，html/js/css/md ... 源代码文件都是文本文件，文本文件的内容都是字符串，对文本文件的操作其实就是对字符串的操作。 操作源代码的方式又主要分成两种： 当作字符串，进行增、删、改等操作 按照某种语法、规 阅读全文
posted @ 2018-11-06 16:41
sfornt
阅读(659)
评论(0)
推荐(0)
浙公网安备 33010602011771号