上一章没什么经验。直接写了组件机制。感觉涉及到的东西非常的多，不是很方便讲。今天看了下vue的关于事件的机制。有一些些体会。写出来。大家一起纠正，分享。源码都是基于最新的Vue.js v2.3.0。下面我们来看看vue中的事件机制： 老样子还是先上一段贯穿全局的代码，常见的事件机制demo都会包含在这段代码中： <div id="app"><div id="test1" @click="click1">click1</div><div id="test2" @click.stop="click2">click2</div><my-...
写在前面： vue是什么，是一套构建用户界面的渐进式框架（官网解释），什么叫渐进式框架呢，简单回答就是主张最少，这些概念只能自己去看，自己去理解，一千个读者一千个哈姆雷特，不过多的解释。Vue官方文档 很全面的。 使用 vue-cli 可以快速创建 vue 项目，vue-cli很好用，但是在最初搭建环境安装vue-cli及相关内容的时候，对一些人来说是很头疼的一件事情，本人在搭建vue-cli的项目环境的时候也是踩了相当多的坑，特此写了一篇...
介绍 在使用Vue.js时，Vue.js组件非常重要。在本教程中，我们将深入研究Vue.js组件，理解基础知识并将其应用于应用程序。让我们开始吧。 什么是组件？ 组件使我们能够将 复杂的 应用程序分解成小块。例如，典型的Web应用程序将具有标题，侧边栏，内容和页脚等部分。 Vue.js允许我们将每个部分分解成单独的模块化代码，称为组件。这些组件可以扩展，然后附加到 你 正在处理的应用程序。 使用 组件是 在 整个应用程序 编写 中重用代...
vue官网关于此解释说明如下： vue2.0里面的深入响应式原理的异步更新队列 官网说明如下： 只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会一次推入到队列中。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际（已去重的）工作。Vue 在内部尝试对异步队列使用原生的 Pro...
vue-cli 在开发前，我们要至少通读一遍vue官方文档和API(看官方文档是最重要的，胜过看五十、一百篇博客),英文阅读能力还行的建议阅读英文文档，中文文档内容会稍落后，还要通读相关的vue-router、axios、vuex等。 一般来说我们都是先利用vue-cli来搭建项目基本架构。 正文首先，我们来说一下安装的东西吧！处于有头有尾的目的，还是几句话草草了事。步骤如下： 安装vue-clinpm install vue-cli -g以webpack模版安装目录vue init w...
本文主要是带领大家分析$mount。 $mount所做的工作从大体来讲主要分为3步： 1.如果你的option里面没有 render 函数，那么，通过 compileToFunctions 将HTML模板编译成可以生成VNode的Render函数。 2.new 一个 Watcher 实例，触发 updateComponent 方法。 3.生成vnode，经过patch，把vnode更新到dom上。 由于篇幅有限，这里先说前两步，第三步下篇说。 好，下面具体的说。首先，我们来到 $mount 函数，如下图： 我们呢可以看到，代...
前言 Vue最明显的特性之一便是它的响应式系统，其数据模型即是普通的 JavaScript 对象。而当你读取或写入它们时，视图便会进行响应操作。文章简要阐述下其实现原理，如有错误，还请不吝指正。下面话不多说了，来随着小编来一起学习学习吧。 响应式data <div id = "exp">{{ message }}</div> const vm = new Vue({el: #exp,data: {message: This is A} }) vm.message = This is B // 响应式 vm._message = This is C // 非响应式上述...
以前最早实现了一个类似的时间选择插件，但是适用范围太窄，索性最近要把这个实现方式发布出来，就重写了一个高复用的vue组件。 支持安卓4.0以上，safari 7以上效果预览 gitHub 滚轮部分主要dom结构 <template data-filtered="filtered"><div class="pd-select-item"><div class="pd-select-line"></div><ul class="pd-select-list"><li class="pd-select-list-item">1</li></ul><ul class="pd-select-wheel"><li class="pd-select...
DOM“天生就慢”，所以前端各大框架都提供了对DOM操作进行优化的办法，Angular中的是脏值检查，React首先提出了Virtual Dom，Vue2.0也加入了Virtual Dom，与React类似。 本文将对于Vue 2.5.3版本中使用的Virtual Dom进行分析。 updataChildren是Diff算法的核心，所以本文对updataChildren进行了图文的分析。 1.VNode对象一个VNode的实例包含了以下属性，这部分代码在src/core/vdom/vnode.js里 export default class VNode {tag: st...
vue2 经过 2.2 版本升级后, 文件变成了 8 个: vue.common.jsvue.esm.jsvue.jsvue.min.jsvue.runtime.common.jsvue.runtime.esm.jsvue.runtime.jsvue.runtime.min.js瞬间就懵逼了, 这些文件该怎么选?下面就来说下, 这 8 个作用都用在什么场景, 有什么区别 按照构建方式分, 可以分成 完整构建(包含独立构建和运行时构建) 和 运行时构建按照规范分, 可以分成 UMD, CommonJS 和 ES Module 简单来说, 完整构建 和 运行时构建的区别就是,...
写在前面：使用 vue-cli 可以快速创建 vue 项目，vue-cli很好用，但是在最初搭建环境安装vue-cli及相关内容的时候，对一些人来说是很头疼的一件事情，本人在搭建vue-cli的项目环境的时候也是踩了相当多的坑，特此写了一篇搭建环境的教程，每一步尽量详细解析。需要的朋友可以过来参考下。vue-cli脚手架的优势： 有一套成熟的vue项目架构设计,能够快速初始化一个Vue项目.vue-cli是官方支持的一个脚手架，会随本版本进行迭代更新。vu...
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。 vue-router 我们知道路由定义了一系列访问的地址规则，路由引擎根据这些规则匹配找到对应的处理页面，然后将请求转发给页进行处...
我们看到了VUE分了很多模块（initMixin()stateMixin()eventsMixin()lifecycleMixin()renderMixin()），通过使用Mixin模式，都是使用了JavaScript原型继承的原理，在Vue的原型上面增加属性和方法。我们继续跟着this._init(options)走，这个一点击进去就知道了是进入了init.js文件是在initMixin函数里面给Vue原型添加的_init方法。首先来从宏观看看这个init文件，可以看出主要是导出了两个函数：initMixin和resolveConstructorOption...
vue 简介 Vue.js（读音 /vju?/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试。当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: {/goods/*: {target: http://localhost:3000},/users/*: {target: http://localhost:3000}},这种配置方...
有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的Vue实例作为中央事件总线： var bus = new Vue() // 触发组件 A 中的事件 bus.$emit(id-selected, 1) // 在组件 B 创建的钩子中监听事件 bus.$on(id-selected, function (id) {// ... })在更多复杂的情况下，你应该考虑使用专门的 状态管理模式.就是用到了vuexeventBus是作为兄弟关系的组件之间的通讯中介。代码示例：<!DOCTYPE html> <html> <head> <title>eventB...