【vue 快速入门 系列 —— 侦测数据的变化 - [基本实现]】的更多相关文章

vue 快速入门 系列 —— 侦测数据的变化 - [基本实现]

其他章节请看: vue 快速入门 系列 侦测数据的变化 - [基本实现] 在 初步认识 vue 这篇文章的 hello-world 示例中,我们通过修改数据(app.seen = false),页面中的一行文本(现在你看到我了)就不见了. 这里涉及到 Vue 一个重要特性:响应式系统.数据模型只是普通的 JavaScript 对象,当我们修改时,视图会被更新.而变化侦测是响应式系统的核心. Object的变化侦测 下面我们就来模拟侦测数据变化的逻辑. 强调一下我们要做的事情:数据变化,通知到外界…

vue 快速入门 系列 —— 侦测数据的变化 - [vue 源码分析]

其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来,配合上文(侦测数据的变化 - [基本实现]) 一起来分析一下 vue 是如何实现数据侦测的. Tip: 以下代码出自 vue.esm.js,版本为 v2.5.20.无关代码有一些删减.中文注释都是笔者添加. /** * Define a property. * 定义属性的方法 */ function def (obj, key, val, enumerable) {…

vue 快速入门 系列 —— 侦测数据的变化 - [vue api 原理]

其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue api 原理] 前面(侦测数据的变化 - [基本实现])我们已经介绍了新增属性无法被侦测到,以及通过 delete 删除数据也不会通知外界,因此 vue 提供了 vm.$set() 和 vm.$delete() 来解决这个问题. vm.$watch() 方法赋予我们监听实例上数据变化的能力. 下面依次对这三个方法的使用以及原理进行介绍. Tip: 以下代码出自 vue.esm.js,版本为 v2.5.20.无关代码有一些删减.…

vue 快速入门 系列 —— Vue(自身) 项目结构

其他章节请看: vue 快速入门 系列 Vue(自身) 项目结构 前面我们已经陆续研究了 vue 的核心原理:数据侦测.模板和虚拟 DOM,都是偏底层的.本篇将和大家一起来看一下 vue 自身这个项目,了解它的目录结构,以及构建过程. vue 的目录结构 将 vue 项目 下载到本地 git clone git@github.com:vuejs/vue.git vuev2.5.20 - vuev2.5.20 - dist // 构建后的文件 - examples // 有几个用 vue 写的示例…

vue 快速入门 系列 —— 实例方法（或 property）和静态方法

其他章节请看: vue 快速入门 系列 实例方法(或 property)和静态方法 在 Vue(自身) 项目结构 一文中,我们研究了 vue 项目自身构建过程,也知晓了 import Vue from 'core/index' 就是引入 vue 的核心代码,该文件的前两行对应着 vue 的实例方法和静态方法(或称全局方法),本篇就和大家一起来看一下这两部分. // vuev2.5.20/src/core/index.js // 返回 Vue 构造函数,并准备好实例方法 import Vue fr…

vue 快速入门 系列 —— Vue 实例的初始化过程

其他章节请看: vue 快速入门 系列 Vue 实例的初始化过程 书接上文,每次调用 new Vue() 都会执行 Vue.prototype._init() 方法.倘若你看过 jQuery 的源码,你会发现每次调用 jQuery() 也会执行一个初始化的方法(即 jQuery.fn.init()).两者在执行初始化方法后都会返回一个实例(vue 实例或 jQuery 实例),而且在初始化过程中,都会做许多事情.本篇就和大家一起来看一下 vue 实例的初始化过程. Tip:本篇亦叫 Vue.pr…

vue 快速入门 系列 —— vue 的基础应用（上）

其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello-world.对 vue 已经有了一个大概的印象. 接下来我们应该掌握 vue 的最基础知识,学会 vue 的基本应用. 比较好的方法就是花个几天的时间将 vue 官网的基础篇尽量走一遍,写一写例子.以下是 vue 2.x 的基础篇的目录: - 教程 2.x - 基础 - 安装 - 介绍 - Vue…

vue 快速入门 系列 —— vue-cli 上

其他章节请看: vue 快速入门 系列 Vue CLI 4.x 上 在 vue loader 一文中我们已经学会从零搭建一个简单的,用于单文件组件开发的脚手架:本篇,我们将全面学习 vue-cli 这个官方的.成熟的脚手架. 分上下两篇进行,上篇主要是"基础",下篇主要是"开发" Tip:介绍顺序尽可能保持与官方文档一致 介绍 vue-cli 是一个基于 vue.js 进行快速开发的完整系统. 让我们专注在撰写应用上,而不必花好几天去纠结配置的问题. Vue CLI…

vue 快速入门 系列 —— vue-router

其他章节请看: vue 快速入门 系列 Vue Router Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌. 什么是路由 路由就是根据不同的 url(网址) 返回不同的页面(数据).如果这个工作在后端做(或者说由后端程序员做),就是后端路由:在前端做就是前端路由. 绝大多数的网站是后端路由.流程就像这样: 浏览器输入 url,回车 后端服务器接收到请求 将请求(url)交给对应的处理逻辑 -- 有一个专门的正则配置列表…

vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目（下）

其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(下) 上篇 我们已经成功引入 element-ui.axios.mock.iconfont.nprogress,本篇继续介绍 权限控制.布局.多环境(.env).跨域.vue.config.js,一步一步构建我们自己的架构. 权限控制 后端系统一开始就得考虑权限和安全的问题. 大概思路: 前端持有一份路由表,表示每个路由可以访问的权限(路由表也可以由后端生成,但感觉前端被后端支配,前端的权限也总是不安全的,所以后端权…

vue 快速入门 系列 —— 虚拟 DOM

其他章节请看: vue 快速入门 系列 虚拟 DOM 什么是虚拟 dom dom 是文档对象模型,以节点树的形式来表现文档. 虚拟 dom 不是真正意义上的 dom.而是一个 javascript 对象. 正常的 dom 节点在 html 中是这样表示: <div class='testId'> <p>你好</p> <p>欢迎光临</p> </div> 而在虚拟 dom 中大概是这样: { tag: 'div', attributes…

vue 快速入门 系列 —— 初步认识 vue

其他章节请看: vue 快速入门 系列 初步认识 vue vue 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 所谓渐进式,就是你可以一步一步.有阶段的使用 vue,不必一开始就使用所有的东西. 命令式框架 vs 声明式框架 jQuery 是命令式操作 DOM 的前端框架.比如点击一个新增按钮,需要出现一个录入信息的弹框,在 jQuery 中,我们需要在新增按钮被点击的时候,发出一个命令,让录入信息的弹框显示.随着交互越来越复杂,代码中会有相当一…

vue 快速入门 系列 —— vue 的基础应用（下）

其他章节请看: vue 快速入门 系列 vue 的基础应用(下) 上篇聚焦于基础知识的介绍:本篇聚焦于基础知识的应用. 递归组件 组件是可以在它们自己的模板中调用自身的.不过它们只能通过 name 选项来做这件事.我们实现一个自定义树的组件.请看示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v…

vue 快速入门 系列 —— vue loader 上

其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和生成环境,开发环境提供本地服务器,有热模块替换,能使用 sass.es6等开发项目. 实际工作中我们可能会使用声明式框架 vue 或 react 来开发项目,而它们都提供了相应的脚手架.在学习 vue-cli(vue官方的脚手架)之前,我们先来玩一下 vue loader. Tip:本篇也可以称之为"…

vue 快速入门 系列 —— vue loader 下

其他章节请看: vue 快速入门 系列 vue loader 下 CSS Modules CSS Modules 是一个流行的,用于模块化和组合 CSS 的系统.vue-loader 提供了与 CSS Modules 的一流集成,可以作为模拟 scoped CSS 的替代方案. Tip:请看下面的用法来了解 css modules. 用法 将 App.vue 内容修改为: <template> <div> <p :class="$style.red">…

vue 快速入门 系列 —— vue loader 扩展

其他章节请看: vue 快速入门 系列 vue loader 扩展 在vue loader一文中,我们学会了从零搭建一个简单的,用于单文件组件开发的脚手架.本篇将在此基础上继续引入一些常用的库:vue-router.vuex.axios.mockjs.i18n.jquery.lodash. 环境准备 Tip: 此环境本质就是"vue loader"一文最终生成的代码,略微精简一下:删除不必要的文件.wepback.config.js 注释掉 eslint 以及自定义 loader. 项…

vue 快速入门 系列 —— vue-cli 下

其他章节请看: vue 快速入门 系列 Vue CLI 4.x 下 在 vue loader 一文中我们已经学会从零搭建一个简单的,用于单文件组件开发的脚手架:本篇,我们将全面学习 vue-cli 这个官方的.成熟的脚手架. 分上下两篇进行,上篇主要是"基础",下篇主要是"开发" Tip:介绍顺序尽可能保持与官方文档一致 准备环境 注:本篇所有的实验都将基于项目 vue-example vue-example 通过 vue create 命令创建项目 vue-exa…

vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目（上）

其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(上) 前面我们已经学习了一个成熟的脚手架(vue-cli),笔者希望通过这个脚手架快速搭建系统(或项目).而展开搭建最好的方法是向优秀的项目学习,依葫芦画瓢. 这里通过研究 vue-admin-template 项目,逐一引入 element-ui.axios.mock.iconfont.nprogress.权限控制.布局.多环境(.env).跨域.vue.config.js,一步一步打造我们自己的架构. Tip:…

vue 快速入门 系列 —— 模板

其他章节请看: vue 快速入门 系列 模板 前面提到 vue 中的虚拟 dom 主要做两件事: 提供与真实节点对应的 vNode 新旧 vNode 对比,寻找差异,然后更新视图 ①.vNode 从何而来? 前面也说了声明式框架只需要我们描述状态与 dom 之间的映射关系.状态到视图的转换,框架会给我们做. ②.用什么描述状态与 dom 之间的映射关系? Tip:jQuery 是命令式的框架,现代的 vue.react属于声明式框架. 简介 首先公布问题 ② 的答案:用模板描述状态与 dom 之…

vue 快速入门 系列

vue 快速入门(未完结,持续更新中...) 前言 为什么要学习 vue 现在主流的框架 vue.angular 和 react 都是声明式操作 DOM 的框架.所谓声明式,就是我们只需要描述状态与 DOM 之间的映射关系,就可以将状态渲染成视图.状态到视图的转换,框架会帮我们做,不需要我们手动去操作 DOM.我们只需要关注状态的维护,而不用再关心 DOM 的操作. 笔者想通过 vue 来探索一下这其中的奥秘. vue 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户…

es6 快速入门 系列 —— 对象

其他章节请看: es6 快速入门 系列 对象 试图解决的问题 写法繁杂 属性初始值需要重复写 function createPeople(name, age){ // name 和 age 都写了 2 次 return { name: name, age: age } } 对象中的方法有更简单的写法吗? let person = { name: 'aaron', sayName: function(){ } } 原型访问困难 要记得如何使用 Object.getPrototypeOf() 方法和…

快速入门系列--WebAPI--01基础

ASP.NET MVC和WebAPI已经是.NET Web部分的主流,刚开始时两个公用同一个管道,之后为了更加的轻量化(WebAPI是对WCF Restful的轻量化),WebAPI使用了新的管道,因此两者相关类的命名空间有细微差异,在使用时需要注意. WebAPI学习系列目录如下,欢迎您的阅读! 快速入门系列--WebAPI--01基础 快速入门系列--WebAPI--02进阶 快速入门系列--WebAPI--03框架你值得拥有 快速入门系列--WebAPI--04在老版本MVC4下的调整 W…

WPF快速入门系列(4)——深入解析WPF绑定

一.引言 WPF绑定使得原本需要多行代码实现的功能,现在只需要简单的XAML代码就可以完成之前多行后台代码实现的功能.WPF绑定可以理解为一种关系,该关系告诉WPF从一个源对象提取一些信息,并将这些信息来设置目标对象的属性.目标属性总是依赖属性.然而,源对象可以是任何内容,可以是一个WPF元素.或ADO.NET数据对象或自定义的数据对象等.下面详细介绍了WPF绑定中的相关知识点. 二.绑定元素对象 2.1 如何实现绑定元素对象 这里首先介绍绑定最简单的情况——绑定元素对象,即数据源是一个WPF元…

[转]快速入门系列--WebAPI--01基础

本文转自:http://www.cnblogs.com/wanliwang01/p/aspnet_webapi_base01.html ASP.NET MVC和WebAPI已经是.NET Web部分的主流,刚开始时两个公用同一个管道,之后为了更加的轻量化(WebAPI是对WCF Restful的轻量化),WebAPI使用了新的管道,因此两者相关类的命名空间有细微差异,在使用时需要注意. WebAPI学习系列目录如下,欢迎您的阅读! 快速入门系列--WebAPI--01基础 快速入门系列--Web…

前端学习 node 快速入门 系列 —— 报名系统 - [express]

其他章节请看: 前端学习 node 快速入门 系列 报名系统 - [express] 最简单的报名系统: 只有两个页面 人员信息列表页:展示已报名的人员信息列表.里面有一个报名按钮,点击按钮则会跳转到报名页 报名页:用于报名.里面是一个表单,可以输入姓名和年龄,点击保存,成功后会跳转到人员信息列表页 本文主要分 3 部分: 使用 node 实现这个项目 介绍 express 相关知识 使用 express 重写这个项目 Tip: 有将本文分成两篇的打算,因为篇幅有点长:但最后还是决定写在一起,因…

webpack 快速入门 系列 —— 性能

其他章节请看: webpack 快速入门 系列 性能 本篇主要介绍 webpack 中的一些常用性能,包括热模块替换.source map.oneOf.缓存.tree shaking.代码分割.懒加载.渐进式网络应用程序.多进程打包.外部扩展(externals)和动态链接(dll). 准备本篇的环境 虽然可以仅展示核心代码,但笔者认为在一个完整的环境中边看边做,举一反三,效果更佳. 这里的环境其实就是实战一一文完整的示例,包含打包样式.打包图片.以及打包javascript 项目结果如下: w…

快速入门系列--WebAPI--03框架你值得拥有

接下来进入的是俺在ASP.NET学习中最重要的WebAPI部分,在现在流行的互联网场景下,WebAPI可以和HTML5.单页应用程序SPA等技术和理念很好的结合在一起.所谓ASP.NET WebAPI,其核心概念就是构建REST风格的Web服务,把一起数据视为资源,无论是服务请求或者是数据操作,与以前的SOAP和XML-RPC架构风格有很大不同.说道这,很多读者可能想到WCF中不是早都有了REST风格的服务么,为什么还需要这个WebAPI?确实如此,不过WCF中的该类型服务显得比较复杂,因为其通…

快速入门系列--WebAPI--04在老版本MVC4下的调整

WebAPI是建立在MVC和WCF的基础上的,原来微软老是喜欢封装的很多,这次终于愿意将http编程模型的相关细节暴露给我们了.在之前的介绍中,基本上都基于.NET 4.5之后版本,其System.Net.Http程序集非常的丰富,而老版本的则相对较弱.在WebAPI v1.0(和ASP.NET MVC4在一起的版本)很多的类和接口并不存在,同时对Task异步编程(ApiController默认提供异步执行方法)的支持还有一些欠缺(缺少不少方便的扩展方法),在使用时会有一些需要注意的地方,由于一…

快速入门系列--MVC--02路由

现在补上URL路由的学习,至于蒋老师自建的MVC小引擎和相关案例就放在论文提交后再实践咯.通过ASP.NET的路由系统,可以完成请求URL与物理文件的分离,其优点是:灵活性.可读性.SEO优化.接下来通过一个最简单的路由例子进入这部分的学习,这是一个蒋老师提供的WebForm路由的例子,回想起刚做ASP.NET时,每次看到.aspx页面的前台代码时的茫然和无措,茫茫多的标签,属性,数据源的绑定吓死小兄弟俺了,也花过不少时间去理解记忆,效果不也不大.现在回头看看感觉好了很多,看到IsPostbac…

快速入门系列--MVC--07与HTML5移动开发的结合

现在移动互联网的盛行,跨平台并兼容不同设备的HTML5越来越盛行,很多公司都在将自己过去的非HTML5网站应用渐进式的转化为HTML5应用,使得一套代码可以兼容不同的物理终端设备和浏览器,极大的提高了系统的可维护性和可扩展性.于此同时,HTML5提供了很多的新特性,比如新的架构元素.代替cookie的Web存储技术.WebSocket等,也使得网站应用能够更好适应新的商业环境和技术更新. 本系统的网站模块使用.NET技术堆栈中的ASP.NET MVC框架,此框架是微软公司推出的开源框架,相关源代…