什么是组件？ 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。 本篇资料是小编参考官方文档的基础上整理的一篇更加细致的说明，代码更多更全，非常适合新手学习。 官方文档：http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6 动...
本文参考官方文档整理的一篇更加细致代码更加安全的一篇适合新手阅读学习吧教程。 本篇资料来于官方文档：http://cn.vuejs.org/guide/components.html什么是组件？ 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。 组件的定义 ①组件的作用： 【1】...
本篇资料是小编结合官方文档整理的一套更全面细致的说明，代码更多更全。 本篇资料来于官方文档：http://cn.vuejs.org/guide/transitions.html下面看下过渡动画相关知识： ①过渡动画的定义； 简单来说，就是当模块消失、出现时，会以什么样的形式消失和出现； 如果要使用过渡动画，则在标签里加入属性： transition=”过渡动画名” 例如： <div class="box" v-if="box_1" transition="mytran">1</div>这里是mytran就是过渡动画名，...
本文是小编结合官方文档整理的一篇细致代码更多更全的详细教程，非常适合新手学习，感兴趣的朋友一起看看吧！ 资料来于官方文档：http://cn.vuejs.org/guide/forms.html表单绑定 ①常见绑定方法： 【1】文本输入框绑定；【2】textarea绑定（类似【1】）；【3】radio选中值绑定；【4】checkbox绑定（自动捆绑数组，无需name）；【5】select绑定；【6】select multiple多选选中框绑定；【7】动态绑定（以上不同类型但同一个值可以互动...
之前一直接触都是原始的前端模型，jquery+bootstrap，冗杂的dom操作，繁琐的更新绑定。接触vue后，对前端MVVM框架有了全新的认识。本文是基于webpack+vue构建，由于之前的工作主要是基于java的服务端开发工作，对前端框架和组件的理解，不够深入，借此来记录在前端框架使用和构建中的点点滴滴。此分页组件参照于bootstrap-datatable底部分页开发完成，相关参数增加自定义功能。最终使用展现效果图如下，数据来源于cnodejs【https:/...
---## 防止vuejs在解析时出现闪烁 ## 原因： 在使用vuejs、angularjs开发时，经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁。对于这个问题由于JavaScript去操作DOM，都会等待DOM加载完成（DOM ready）。对于vuejs、angularjs这些会在DOM ready完会才回去解析html view Template，所以对于Chrome这类快速的浏览器你会看见有闪烁的情况出现。而对于IE7，8这类解析稍慢的浏览器大...
download:Vue.js源码全方位深入解析 （含Vue3.0源码分析） 本课程从基础的 Vue源码目录设计、源码构建开始讲起，包括数据驱动，响应式原理，让同学们深入全面理解Vue的实现原理，掌握源码分析技巧，牢固对Vue的使用，斩断BAT进阶拦路虎，快人一步进名企。 适合人群有一定前端基础和 Vue.js 的基础 技术储备要求1、已经用过 Vue.js 做过 2 个以上的实际项目，对 Vue.js 的思想有了一定的了解，对绝大部分的 API 都已经有使用。2、有...
准备 vue版本号2.6.12，为方便分析，选择了runtime+compiler版本。 组件注册 Vue的组件祖册分为两部分，一部分为全局组件注册，也就是使用Vue.component(tag,options)，另外一部分为局部组件注册，使用options.component = {App}。 我们先来看全局组件注册。 import HelloWorld from './components/HelloWorld';Vue.component('HelloWorld', HelloWorld);new Vue({render: h => h(App) }).$mount('#app');这里使用了Vue.component注...
最近利用空闲时间又翻看了一遍Vue的源码，只不过这次不同的是看了Flow版本的源码。说来惭愧，最早看的第一遍时对Flow不了解，因此阅读的是打包之后的vue文件，大家可以想象这过程的痛苦，没有类型的支持，看代码时摸索了很长时间，所以我们这次对Vue源码的剖析是Flow版本的源码，也就是从Github上下载下来的源码中src目录下的代码。不过，在分析之前，我想先说说阅读Vue源码所需要的一些知识点，掌握这些知识点之后，相信再阅读源码...
模板编译综述 1.前言 前几篇文章中我们介绍了Vue中的虚拟DOM以及虚拟DOM的patch(DOM-Diff)过程，而虚拟DOM存在的必要条件是得先有VNode，那么VNode又是从哪儿来的呢？这就是接下来几篇文章要说的模板编译。你可以这么理解：把用户写的模板进行编译，就会产生VNode。 2.什么是模板编译 在日常开发中，我们把写在<template></template>标签中的类似于原生HTML的内容称之为模板。为什么说是“类似于原生HTML的内容”而不是“就是HTML的...
Array的变化检测 1.前言 为什么Object数据和Array型数据会有两种不同的变化侦测方式？ 因为对于Object数据我们使用的是JS提供的对象原型上的方法Object.defineProperty，而这个方法是对象原型上的，所以Array无法使用这个方法，所以我们需要对Array型数据设计一套另外的变化侦测机制，虽然对Array型数据设计了新的变化侦测机制，但是其根本思路还是不变的。那就是：还是在获取数据时收集依赖，数据变化时通知依赖更新。 2.在哪里收...
Vue.$data、this._data源码解析 $data是Vue实例中的实例属性，表示Vue实例观察的数据对象。官网给出的解释：vm.$data 类型：Object??详细：Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象 property 的访问。 先看一个栗子： <!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><div id="app">{{ message }}<...
前言 在 Vue 核心中除了响应式原理外，视图渲染也是重中之重。我们都知道每次更新数据，都会走视图渲染的逻辑，而这当中牵扯的逻辑也是十分繁琐。 本文主要解析的是初始化视图渲染流程，你将会了解到从挂载组件开始，Vue 是如何构建 VNode，又是如何将 VNode 转为真实节点并挂载到页面。 挂载组件($mount) Vue 是一个构造函数，通过 new 关键字进行实例化。 // src/core/instance/index.js function Vue (options) {if (process.en...
转载请注明出处 本文转载至我的blog 目录前言 virtual dom 分析diff 总结前言 vue2.0加入了virtual dom，有向react靠拢的意思。vue的diff位于patch.js文件中，我的一个小框架aoy也同样使用此算法，该算法来源于snabbdom，复杂度为O(n)。了解diff过程可以让我们更高效的使用框架。本文力求以图文并茂的方式来讲明这个diff的过程。 virtual dom 如果不了解virtual dom，要理解diff的过程是比较困难的。虚拟dom对应的是真实dom， 使用...
Math.abs(x) 方法可返回数的绝对值。 x 必需。必须是一个数值。 1 indexOf() 方法 stringObject.indexOf(searchvalue,fromindex) searchvalue 必需。规定需检索的字符串值。 fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。 1 2 该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 searchvalue。开始检...