vue.js
文章平均质量分 77
廿四桥明月夜
前端
展开
-
Vue.js常用组件
1、Vue-routervue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。2、Vue-resource用于和后端交互原创 2017-10-19 10:30:04 · 506 阅读 · 0 评论 -
界面之下:还原真实的 MVC、MVP、MVVM 模式
前言做客户端开发、前端开发对MVC、MVP、MVVM这些名词不了解也应该大致听过,都是为了解决图形界面应用程序复杂性管理问题而产生的应用架构模式。网上很多文章关于这方面的讨论比较杂乱,各种MV*模式之间的区别分不清,甚至有些描述都是错误的。本文追根溯源,从最经典的Smalltalk-80 MVC模式开始逐步还原图形界面之下最真实的MV*模式。GUI程序所面临的问题图转载 2018-03-20 15:17:08 · 214 阅读 · 0 评论 -
界面之下:还原真实的 MVC、MVP、MVVM 模式
前言做客户端开发、前端开发对MVC、MVP、MVVM这些名词不了解也应该大致听过,都是为了解决图形界面应用程序复杂性管理问题而产生的应用架构模式。网上很多文章关于这方面的讨论比较杂乱,各种MV*模式之间的区别分不清,甚至有些描述都是错误的。本文追根溯源,从最经典的Smalltalk-80 MVC模式开始逐步还原图形界面之下最真实的MV*模式。GUI程序所面临的问题图转载 2018-03-20 15:20:52 · 345 阅读 · 0 评论 -
vue源码调试踩坑记录
目的: 可以断点调试vue的源代码, 研究一个new vue({...})以及data的更新在vue源码内部是如何运行的目前做到了, 其实比较简单, 也不知道为什么会弄了一天…如何你想直接看解决方案, 请戳这一行遇到的问题有2个, 其中一个是坑一:其实git clone repo -> npm install -> npm run setup -> np转载 2018-03-30 19:28:05 · 1179 阅读 · 0 评论 -
vue源码调试踩坑记录
如果我们不用单文件组件开发,一般直接<script src="dist/vue.js">引入开发版vue.js这种情况下debug也是很方便的,只不过vue.js文件代码是rollup生成的这种情况下debug,看源码也是很方便的但是如果能够在vue项目中的src目录下中的文件打断点调试就更好了。那怎么做到呢?其实很简单1. 打开 build/config.js 文件找到 genCon...转载 2018-04-02 08:39:00 · 3530 阅读 · 0 评论 -
一起理解 Virtual DOM
前言React 好像已经火了很久很久,以致于我们对于 Virtual DOM 这个词都已经很熟悉了,网上也有非常多的介绍 React、Virtual DOM 的文章。但是直到前不久我专门花时间去学习 Virtual DOM,才让我对 Virtual DOM 有了一定的理解,以致于要怀疑起很久之前看过的那些文章来。倒不是这些文章讲得不对,而是现在在我看来角度不太好,说得越多,越说不清。让我能转载 2018-03-29 10:10:40 · 211 阅读 · 0 评论 -
深入Vue2.x的虚拟DOM diff原理
我认为写的最好的就是这篇一、前言Vue的核心是双向绑定和虚拟DOM(下文我们简称为vdom),关于双向绑定可以参阅木琴的文章《剖析Vue原理&实现双向绑定MVVM》,vdom是树状结构,其节点为vnode,vnode和浏览器DOM中的Node一一对应,通过vnode的elm属性可以访问到对应的Node。vdom因为是纯粹的JS对象,所以操作它会很高效,但是vdom的变更转载 2018-04-26 22:27:08 · 215 阅读 · 0 评论 -
总结vue生命周期钩子使用方法
前言在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的。放大之,对vue的生命周期不甚了解。只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的。因为我们有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数里做,我们不清楚。于是我开始先去搜索,发现vue2.0的生命周期没啥文章。大多是1.0的版本...转载 2018-08-14 16:26:45 · 4118 阅读 · 1 评论 -
vue.js 中 data, prop, computed, method,watch 介绍
vue源码不需要看,只需要做实验总结出vue框架的具体的运行机制。工程师要习惯通过做实验获取自己想要的信息。vue.js 中 data, prop, computed, method,watch 介绍data, prop, computed, method 的区别类型 加载顺序 加载时间 写法 作用 备注 prop 1 beforeCr...转载 2018-08-18 16:28:50 · 1012 阅读 · 0 评论 -
关于Vue的MVVM
文章参考阮一峰:MVC,MVP 和 MVVM 的图示深入响应式原理最近工作中一直在使用Vue这一款框架作为开发工具,但是用了之后发现自身对于MVVM的概念并不了解。所以写下这篇博客作为巩固基础知识。什么是MVVM?概念介绍MVVM分为三个部分:分别是M(Model,模型层 ),V(View,视图层),VM(ViewModel,V与M连接的桥梁,也可以看作为控制器)转载 2018-03-16 16:58:03 · 216 阅读 · 0 评论 -
VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js
VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-template 中已经去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替,所以 配置本地访问在webpack.dev.conf.js里配置即可。转载 2017-12-05 13:25:25 · 9941 阅读 · 13 评论 -
Vue-router的使用
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例,每转载 2017-10-19 10:44:19 · 640 阅读 · 0 评论 -
Vue项目结构介绍
作者:阿安链接:https://www.zhihu.com/question/38213423/answer/128155176来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。我们(凡普信贷)的移动端页面正在使用 vue2.0 重构,在基于 vue-cli 脚手架生成项目模板基础上做了些改动,加入了 vue-router ,vuex 等配套设施转载 2017-10-19 12:35:00 · 7071 阅读 · 0 评论 -
Vue.js官方文档总结
在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例,这些预定义选项被封装到一个对象字面量中,作为选项对象传入产生Vue实例的方法中。// 定义名为 todo-item 的新组件Vue.component('todo-item', { template: '这是个待办项'})现在你可以用它构建另一个组件模板:原创 2017-10-20 11:06:00 · 1165 阅读 · 1 评论 -
vuejs核心概念简析
概述使用vue编写网页是一个让人愉悦的过程,它同时具备angular和react的优点,轻量级,api简单,文档齐全,简单强大,麻雀虽小五脏俱全.快速开始vue最好的方式是阅读官网的文档,这是学习vue最好的途径,没有之一.基本上通读文档即可让你从入门到精通了,下面讨论一下vue的精髓与重点需要理解的部分vue的精髓在于基于数据的状态和组件式编程数据驱动转载 2017-10-13 13:13:41 · 817 阅读 · 0 评论 -
Vue2.1.7源码学习
原本文章的名字叫做《源码解析》,不过后来想想,还是用“源码学习”来的合适一点,在没有彻底掌握源码中的每一个字母之前,“解析”就有点标题党了。建议在看这篇文章之前,最好打开2.1.7的源码对照着看,这样可能更容易理解。另外本人水平有限,文中有错误或不妥的地方望大家多多指正共同成长。补充:Vue 2.2 刚刚发布,作为一个系列文章的第一篇,本篇文章主要从Vue代码的组织,Vue构造函数的还原,转载 2017-11-10 14:13:20 · 1816 阅读 · 0 评论 -
Vue 2.0的学习笔记: Vue实例和生命周期
Vue实例是进入Vue的第一步,创建一个Vue的实例也是学习Vue的起点。实际上,Vue框架的入口就是Vue实例,其实就是框架中的View Model,它包含页面中的业务处理逻辑、数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。Vue实例虽然没有完全遵循MVVM模型,但Vue的设计无疑受到了它的启发。那么我们就从MVVM模型的概念开始,进入有关于Vu转载 2017-11-12 15:02:21 · 1131 阅读 · 0 评论 -
用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置)
当我们需要和后台分离部署的时候,必须配置config/index.js:用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置)123456789101112131415var path = require转载 2017-11-30 18:43:49 · 5887 阅读 · 0 评论 -
在Vue中使用Vuex进行状态管理指南
1、vuex是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。2、为什么需要vuex?vuex解决了什么问题?当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:多个视图依赖于同一状态。来自不同视图的行为需要变更同一状态。对于问题一,传参原创 2017-12-13 14:17:09 · 1734 阅读 · 0 评论 -
对于vue的单向绑定与双向绑定理解
概述 Vue.js 最显著的特点就是响应式和数据驱动,也就是将Model和View进行单向绑定或者双向绑定。单向绑定:把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。因此,我们不需要进行额外的DOM操作,只需要进行Model的操作就可以实现视图的联动更新。双向绑定:把Model绑定到View的同时也将View绑定到Model上,这样就既可以通...转载 2018-08-16 10:51:07 · 24149 阅读 · 2 评论