vue
关注
分享
扫一扫
wh_xmy
毕业于城建学院计算机系，前端，曾任职过联想、探路者等公司
展开
-
剖析vue常见问题（四）之vue中的diff算法
背景：首先diff算法不是vue的专属，只要采用虚拟dom的框架基本都会采用diff算法，那么为什么要采用diff算法呢以及diff算法的好处是什么呢？我们还以vue为例，从源码层面做下分析，分别说明一下diff算法的必要性(/src/core/instance/lifecycle.js中的mountComponent（）方法)、执行方式（/src/core/vdom/patch.js中的patchVnode（）方法）以及带来的高效性（/src/core/vdom/patch.js中的updateChild原创 2020-11-11 18:10:58 · 867 阅读 · 0 评论 -
剖析vue常见问题（三）之vue中key的作用和原理
背景：说到vue中key的作用，大家都知道它可以唯一的确定一个dom元素，从而执行diff算法时更加高效，但是想更加详细的知道具体原因，我们还是需要从源码入手，详见源码：src/core/vdom/patch.js中的updateChildren()方法，当然我们也用demo来说明，demo如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title原创 2020-11-10 18:09:45 · 1168 阅读 · 0 评论 -
剖析vue常见问题（二）之组件的data为什么要定义为函数，而根实例的data则没有限制？
背景：vue组件话是它的特点，经常定义组件的我们会知道把组件的data定义为函数，也知道是为了避免数据污染，而跟实例则没有强制要求(因为根实例是单例，不用担心数据污染)，具体原因是什么呢？我们也从源码来做分析吧，详见源码：src/core/instance/state.js中的initData()方法，当然我们也用demo来说明，demo如下：<!DOCTYPE html><html lang="en"><head> <meta charset="原创 2020-11-10 18:08:46 · 726 阅读 · 0 评论 -
剖析vue常见问题（一）之v-for与v-if的优先级
背景：vue中经常使用到v-for和v-if，那么它们的优先级是怎么样的呢？怎么才能实现性能优化呢？下面来简单分析一下，如何分析，请参考以下测试demo，以及源码中参考src/compiler/codegen/index.js。demo代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue v-if v-for</t原创 2020-11-10 18:08:07 · 1978 阅读 · 0 评论 -
Vue出现弹出层时，禁止底部页面跟随滑动
背景：最近在写一个vue项目，当出现弹出层时，发现底部页面跟随滚动，但是产品不想要这种效果，于是找各种资料，发现很多说法，但是试了试，发现有的根本就不行，比如说有人提出用vue中提供的@touchmove.prevent方法来解决，但是我试了没起作用，或者@touchmove.prevent.stop也不起作用。下面是几种可以解决问题的方式，仅供参考：1.在有弹出框的页面中，加上以下方法，弹出......原创 2019-04-24 14:57:13 · 8319 阅读 · 13 评论 -
vue路由跳转时定位到页面顶部的方法汇总
背景：在做vue项目时，发现路由跳转之后，页面默认停留在当前浏览的位置，但是很多时候我们想要的是路由跳转之后，页面重新定位到顶部，下面介绍一下可以实现的方法：方式一：在main.js中添加以下代码即可：router.beforeEach((to, from, next) => { // chrome document.body.scrollTop = 0...原创 2019-04-16 14:21:55 · 6940 阅读 · 2 评论 -
Vue之Axios跨域问题解决方案
背景：因为axios中只能使用get和post方法来进行请求数据，没有提供jsonp等方法进行跨域访问数据 axios中文网址：https://www.kancloud.cn/yunye/axios/234845// axios 中的GET请求axios.get('/user', { params: { ID: ‘001’ } }) ...原创 2019-02-19 14:32:31 · 260240 阅读 · 114 评论 -
什么是MVVM，MVVM和MVC的区别？
1. Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现...转载 2018-08-30 15:59:14 · 17072 阅读 · 7 评论 -
vue.js学习笔记之安装以及项目的创建和运行
vue.js官方提供了一个脚手架vue-cli，可以使用该脚手架，进行项目的创建和管理。 操作流程如下:# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project# 安装依赖$ cd my-project$ npm install#运行$ n...原创 2017-04-27 11:25:00 · 370 阅读 · 0 评论 -
vue常用组件之loading
有的页面请求数据或者第一次加载的话会需要一定时间，这时候为了避免用户等待枯燥，可以适当加些loading之类的动态效果，下面是vue的一个动态loading组件，效果如下图：代码如下：<!-- * * loadingGif组件--"数据请求中" * * 使用方法： * <loading-gif :show-loading="showLoaddingGif">...原创 2018-07-24 16:08:38 · 7012 阅读 · 0 评论 -
vue常用组件之confirm
一些自带的方法，比如alert，confirm等，往往由于浏览器不同而展现出不同的样式，为了统一，我们可以自己实现简单封装，下面代码是vue的一个组件，它简单实现了confirm功能。代码如下：<!-- * * 确认对话框 * * 使用方法： * <dialogConfirm :show-dialog="showDialog" :ok-text="'删除'" :can...原创 2018-07-24 15:20:52 · 16084 阅读 · 2 评论 -
vue 兄弟组件之间传值之bus
有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。参考：http://blog.csdn.net/u013034014/article/details/54574989?locationNum=2&fps=1例子：https://segmentfault.com/q/1010000007491994<...转载 2018-07-09 11:28:47 · 6413 阅读 · 0 评论