Vue.Js
文章平均质量分 79
violet-jack
只有写成博客的知识才是自己熟练掌握的知识。
展开
-
Vue使用v-for报Duplicate value found in v-for="...": "". Use track-by="$index" 错误解决方法
Log在使用Vue做表单时发生如下错误:[Vue warn]: Duplicate value found in v-for="data in content": "". Use track-by="$index" if you are expecting duplicate values. (found in component: <grid>)问题原因由于我的JSON数组中有多个相同的字符串,类原创 2016-05-26 17:06:30 · 12093 阅读 · 0 评论 -
element源码学习一 —— 认识框架
由于面试需要,先来几发 element 源码学习博客。Vue 源码还将继续更新。原创 2018-03-10 23:57:05 · 11751 阅读 · 0 评论 -
Vue.js 源码学习六 —— VNode虚拟DOM学习
初六和家人出去玩,没写完博客。跳票了~所谓虚拟DOM,是一个用于表示真实 DOM 结构和属性的 JavaScript 对象,这个对象用于对比虚拟 DOM 和当前真实 DOM 的差异化,然后进行局部渲染从而实现性能上的优化。在Vue.js 中虚拟 DOM 的 JavaScript 对象就是 VNode。 接下来我们一步步分析:VNode 是什么?既然是虚拟 DOM 的作...原创 2018-02-23 16:49:15 · 20234 阅读 · 0 评论 -
Vue.js 源码学习五 —— provide 和 inject 学习
早上好!继续开始学习Vue源码吧~在 Vue.js 的 2.2.0+ 版本中添加加了 provide 和 inject 选项。他们成对出现,用于父级组件向下传递数据。 下面我们来看看源码~源码位置和之前一样,初始化的方法都是在 Vue 的 _init 方法中的。 // src/core/instance/init.js Vue.prototype._init...原创 2018-02-23 16:48:12 · 3102 阅读 · 0 评论 -
element 源码学习(番外篇) —— SASS五分钟快速入门
这算是 element 源码学习的番外篇,因为 element 中使用了大量 sass 来写样式。而 UI 框架的核心其实就是样式。所以,抽空把 sass 学了一遍,写了些小 demo 实践,总结成此文。SASS 安装和调试简单说下 sass 如何安装和编译调试。 参照官网,需要使用 gem 来安装 sass。如果是windows用户没有 gem 需要先安装 Ruby...原创 2018-03-15 06:18:42 · 1803 阅读 · 0 评论 -
Vue.js源码学习四 —— 渲染 Render 初始化过程学习
今天我们来学习下Vue的渲染 Render 源码~还是从初始化方法开始找代码,在 src/core/instance/index.js 中,先执行了 renderMixin 方法,然后在Vue实例化的时候执行了 vm._init 方法,在这个 vm._init 方法中执行了 initRender 方法。renderMixin 和 initRender 都在 src/core/insta...原创 2018-02-19 16:53:47 · 2057 阅读 · 0 评论 -
Vue.js源码学习三 —— 事件 Event 学习
早上好!继续学习Vue源码~这次我们来学习 event 事件。源码简析其实看了前两篇的同学已经知道源码怎么找了,这里再提一下。 先找到Vue核心源码index方法 src/core/instance/index.jsfunction Vue (options) { if (process.env.NODE_ENV !== 'production' &&am...原创 2018-02-19 16:53:05 · 3000 阅读 · 0 评论 -
Vue学习系列倡议书
我想通过社区的力量把《Vue学习系列》做到最优质的Vue系列博客解决学习痛点学习前端的同学都知道,前端有一大痛点就是知识点分散,学习的东西多。 就像我学习Vue,一拿到手就告诉我有个全家桶要学习。虽然一个一个学习下来了,但是过程是比较漫长的。而且如果是刚入门前端世界,会发现还没开始写代码各种配置都能玩好几天。Webpack打包、ESLint代码检查、Babel语法转译等等…… 写原创 2018-01-29 13:55:24 · 349 阅读 · 0 评论 -
Vue.js学习系列七——Vue服务器渲染Nuxt学习
我又回来啦~这次我们来学习Vue的服务器渲染SSR。关于SSR的文章网上很多,一开始看得我云里雾里。然后去Vue.js 服务器渲染指南和nuxt官网看了看,发现文章大多都是搬运官网的内容,真正讲的清晰明了的很少。所以想写篇文章学习下SSR,希望能够帮助大家快速理解Vue SSR。什么是SSR?SSR,即服务器渲染,就是在服务器端将对Vue页面进行渲染生成html文件,将html页原创 2018-01-29 13:54:36 · 3500 阅读 · 0 评论 -
Vue源码学习笔记
最近偷懒好久没有写博客了,一直想继续Vue学习系列,想深入Vue源码来写。结果发现自己层次不够,对js的理解差好多。所以一直想写一直搁置着。最近重新振作决心看完Vue源码,并且以我们这类前端小白的角度来一步步弄懂Vue源码。PS:以下文章为笔记类,记录了本人在看源码过程中的一些问题和感悟。Vue源码的本质是什么Vue.js 本质上就是一个包含各种逻辑的一个function。而我们通常初始化Vue的原创 2017-12-01 13:50:04 · 1440 阅读 · 0 评论 -
Vue.js学习系列六——Vue单元测试Karma+Mocha学习笔记
在使用vue-cli创建项目的时候,会提示要不要安装单元测试和e2e测试。既然官方推荐我们使用这两个测试框架,那么我们就动手去学习实践一下他们吧。简介KarmaKarma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner)。该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试。 换句话说,它是一个测试工具,能让你的代码在浏览器环境下测试。需原创 2017-06-26 15:18:32 · 18695 阅读 · 7 评论 -
Vue.js学习系列三——axios和网络传输相关知识的学习实践
在学习了之前的路由vue-router和状态管理vuex之后,就应该是网络交互了。就学习尤大推荐的axios了。刚好本人对网络请求这块除了会get、put、post和delete这四个方法之外知之甚少,刚好补全上。原创 2017-01-21 09:24:27 · 4041 阅读 · 0 评论 -
Vue.js学习系列二 —— vuex学习实践笔记(附DEMO)
上次学习了vue-router的使用,让我能够在各个页面间切换,将页面搭建了起来。这次则要学习vue的状态管理模式——vuex。它类似于redux来应用的全局状态。注:本文只是个人对vuex学习的一些理解,要深刻掌握还需要认真查阅官方文档。一、基本介绍Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 由于Vue SPA应用的模块化,每个组件都有它各自的数据(state)、界面(v原创 2016-12-31 11:27:55 · 1405 阅读 · 1 评论 -
Vue.js学习系列一 —— vue-router2学习实践笔记(附DEMO)
想学习Vue的SPA应用,路由这一块是必不可少的。相信很多和我一样刚接触前端的朋友对于路由这玩意是很困惑的。所以在我学习并成功使用了vue-router后,将我的个人经验分享出来,希望可以让同样对路由不知所措的同学有所帮助。注意:本文demo的项目结构用的是最新的命令行工具创建的webpack项目模板;本文知识点是基于Vue2.0和vue-route 2的,更多内容请参考Vue.js官网和vu原创 2016-12-22 10:41:44 · 908 阅读 · 0 评论 -
Vue.js学习系列四——Webpack学习实践
这两周一直想写webpack的知识点,却发现webpack其实要将webpack说的具体内容还是挺多的。而且稀土掘金上一搜webpack有好多人都有去写webpack的知识点,所以本文中不再去重复别人的东西了,就简单记录一下我对webpack的理解。并按照老规矩附上demo以及我收藏的几篇不错的webpack入门文章以供学习参考~一、什么是webpack1. webpack是什么?webpack是原创 2017-02-07 20:43:56 · 1876 阅读 · 0 评论 -
Uncaught RangeError: Invalid array length 问题解决
使用Vue的v-for的时候出现了错误 Uncaught RangeError: Invalid array length问题出在v-for的的数据上,由于提供的数据小于0所致。<tr v-for="n in emptyCount"></tr>在这里我计算了空的tr的数量,将数量控制在12条数据。this.emptyCount = 12 - projectList.length然而我忽略了一个问题,原创 2017-02-06 14:44:48 · 26530 阅读 · 2 评论 -
Vue.js由于延时显示了{{message}}引用界面解决方法
在使用Vue写应用时发现一个问题,每当进入一些有延时的(如网络API请求)操作时,会先闪一下未编译的 Mustache 标签{{ message }},这让人很不爽。原创 2016-06-20 15:45:24 · 14874 阅读 · 3 评论 -
element源码学习二 —— 简单组件学习
上一篇博客中学习了项目的结构,这篇博客来学几个简单的组件的实现。原创 2018-03-12 09:40:12 · 4310 阅读 · 1 评论