VUE
文章平均质量分 88
VUE学习资料
美兮,乐兮
生如夏花
展开
-
VUE源代码调试方法总结
VUE源代码调试方法总结vue.config.js配置sourcemapChrome浏览器配置dev-tools工具一级目录一级目录vue.config.js配置sourcemap在vue.config.js增加productionSourceMap和configureWebpack.devtool的配置,在chrome浏览器里面就会对应上vue文件了:module.exports = { //......上面一堆配置 productionSourceMap: process.env.NODE_原创 2020-11-10 10:58:43 · 2017 阅读 · 1 评论 -
实例学习Vue源码第三篇-Vue的响应式原理
实例学习Vue源码第三篇-Vue的响应式原理一级目录一级目录原创 2020-09-12 19:50:25 · 222 阅读 · 0 评论 -
实例学习Vue源码第二篇-浅析初始化到挂载过程
实例学习VUE源码(二)一级目录一级目录原创 2020-09-12 10:42:19 · 296 阅读 · 0 评论 -
实例学习Vue源码第一篇-实例
实例学习VUE源码(一)实例代码实例解析实例代码<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <meta na原创 2020-09-12 10:41:04 · 209 阅读 · 0 评论 -
VUE初始化过程的思维导图
VUE初始化过程的思维导图VUE初始化过程的思维导图原创 2020-09-09 21:48:27 · 221 阅读 · 0 评论 -
VUE实例学习--表格(grid)检索
VUE实例学习--表格(grid)检索源码目录结构实例目录结构实例入口index.html文件解析grid.js为表格组件内容解析style.css样式文件内容解析下面的实例是源码中的表格控件实例;源码目录结构一、目录结构首先来"一览众山小",看下整体的的目录结构。(可以跳过这里往下看)|— benchmarks 基准测试,与其他竞品做比较|— dist 打包之后文件所在位置,包括完整版本,运行时版本版本,主要关注下vue.js|— examples 部分示例|— flow 因为Vue原创 2020-09-06 22:04:39 · 919 阅读 · 0 评论 -
VUE原理学习第一篇--理解双向数据绑定原理
理解双向数据绑定原理简单的双向数据绑定实例vue数据双向绑定原理简单版的mvvm双向绑定代码大家都知道vue是一种MVVM开发模式,数据驱动视图的前端框架,并且内部已经实现了双向数据绑定,那么双向数据绑定是怎么实现的呢?简单的双向数据绑定实例<!DOCTYPE html><html lang="en"><head> <title>VUE</title></head><body><div>原创 2020-09-06 15:14:22 · 136 阅读 · 0 评论 -
VUE源码学习第十二篇-patch(diff原理)
一、总述 前面章节介绍了响应式的原理,当监听的属性值发生变化,会触发其相关的订阅watcher对象更新。如果在模板中使用了该属性,则会触发render wacher的更新,最终实现dom的更新。dom更新的有两种实现方式,一种是"全量"的全局更新,一种是"增量"的局部更新,很显然,后一种的效率会更高。VUE就是采用的一种,会先对新旧的vdom进行比较,形成patch,从而实现dom的局部更新。本章节主要介绍如何来比较vdom,即diff算法原理。二、diff算法vue是借鉴转载 2020-08-04 16:15:47 · 456 阅读 · 0 评论 -
vue 的v-pre指令和pre标签
vue 的v-pre指令和pre标签vue的pre指令不加v-pre代码不加v-pre效果图加v-pre代码加v-pre效果图vue的pre标签不加pre标签代码不加pre标签效果图加pre标签代码加pre标签效果图vue的pre指令v-pre指令说明:跳过这个元素和它的子元素的编译过程。可以用来显示原始标签。跳过大量没有指令的节点会加快编译。不加v-pre代码<!DOCTYPE html><html lang="en"><head> <titl原创 2020-07-31 15:47:53 · 9365 阅读 · 0 评论 -
详解搭建一个VUE项目的过程
详解搭建一个VUE项目的过程一、安装node环境二、搭建vue项目环境三、vue项目目录讲解四、开始我们的第一个vue项目五、补充一、安装node环境下载地址为:https://nodejs.org/en/检查是否安装成功:如果输出版本号,说明我们安装node环境成功为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜原创 2020-07-04 00:04:30 · 278 阅读 · 0 评论 -
详解v-model修饰符.lazy
1 v-model指令没有使用.lazy修饰2 v-model指令没有使用.lazy修饰符官网相关内容:v-model指令用来在input、select、text、checkbox、radio等表单控件上创建双向数据绑定。根据控件的类型v-model自动选取正确的方法更新元素。v-model指令没有使用.lazy修饰符时,vue文件中的内容如下:<template> <div> <div> <input v-model="m原创 2020-06-19 11:08:05 · 807 阅读 · 0 评论