vue
nicexibeidage
这个作者很懒,什么都没留下…
展开
-
vue源码(九)渲染函数的观察者与进阶的数据响应系统
实际上在揭开数据响应系统的面纱一节中我们仅仅学习了数据响应系统的部分内容,比如当时我们做了一个合理的假设,即:dep.depend()这句代码的执行就代表观察者被收集了,而dep.notify()的执行则代表触发了响应,但是我们并没有详细讲解dep本身是什么东西,我们只是把它当做了一个收集依赖的“筐”。除此之外我们也没有讲解数据响应系统中另一个很重要的部分,即Watcher,我们知...转载 2020-02-14 12:26:32 · 639 阅读 · 0 评论 -
Vue自定义事件
前面的话 父组件使用props传递数据给子组件,子组件怎么跟父组件通信呢?这时,Vue的自定义事件就派上用场了。本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Events interface),即使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件 [注意]Vue 的事件系统分离自浏览器的EventTarget AP...转载 2018-02-14 09:18:35 · 1986 阅读 · 0 评论 -
Vue路由vue-router
前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序。对于大多数单页面应用,都推荐使用官方支持的vue-router。Vue-router通过管理URL,实现URL和组件的对应,以及通过URL进行组件之间的切换。本文将详细介绍Vue路由vue-router 安装 在使用vue-router之前,首先需要安装该插件npm install vue-router 如果在一个模块化工程中...转载 2018-03-29 10:55:19 · 4501 阅读 · 0 评论 -
详解vue生命周期
首先,每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉:可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数,然后我们再一一详解:beforeCreatecreatedbeforeMountmountedbeforeUpdateupda...转载 2018-05-05 10:40:02 · 145 阅读 · 0 评论 -
vue源码(七)Vue 的初始化之开篇
本文是学习vue源码,之所以转载过来是方便自己随时查看,在这里要感谢HcySunYang大神,提供的开源vue源码解析,写的非常非常好,简单易懂,比自己看要容易多了,他的文章链接地址是http://hcysun.me/vue-design/art/用于初始化的最终选项 $options在 以一个例子为线索 一节中,我们写了一个很简单的例子,这个例子如下:var vm = new Vu...转载 2018-08-27 14:23:05 · 4723 阅读 · 0 评论 -
vue源码(八)揭开数据响应系统的面纱
本文是学习vue源码,之所以转载过来是方便自己随时查看,在这里要感谢HcySunYang大神,提供的开源vue源码解析,写的非常非常好,简单易懂,比自己看要容易多了,他的文章链接地址是http://hcysun.me/vue-design/art/相信很多同学都对 Vue 的数据响应系统有或多或少的了解,本章将完整的覆盖 Vue 响应系统的边边角角,让你对其拥有一个完善的认识。接下来我们还是接...转载 2018-08-27 14:25:23 · 2331 阅读 · 0 评论 -
vue源码(一)写在前面
本文是学习vue源码,之所以转载过来是方便自己随时查看,在这里要感谢HcySunYang大神,提供的开源vue源码解析,写的非常非常好,简单易懂,比自己看要容易多了,他的文章链接地址是http://hcysun.me/vue-design/art/文章特点超级详细 - 逐行级别的分析所谓逐行并非一行接着一行,逐行指的是讲解的详细程度,这套文章将致力于覆盖所有核心代码,毕竟每一句代码都有他...转载 2018-08-23 10:28:07 · 466 阅读 · 0 评论 -
vue源码(二)了解 Vue 这个项目
本文是学习vue源码,之所以转载过来是方便自己随时查看,在这里要感谢HcySunYang大神,提供的开源vue源码解析,写的非常非常好,简单易懂,比自己看要容易多了,他的文章链接地址是http://hcysun.me/vue-design/art/目录及文件正如 前言 中介绍的那样,你可以把 Vue 的源码 clone 到本地,也可以安装方便在线查看GitHub仓库代码的 Chrome 扩...转载 2018-08-23 10:32:00 · 539 阅读 · 0 评论 -
vue源码(三)Vue 构造函数
本文是学习vue源码,之所以转载过来是方便自己随时查看,在这里要感谢HcySunYang大神,提供的开源vue源码解析,写的非常非常好,简单易懂,比自己看要容易多了,他的文章链接地址是http://hcysun.me/vue-design/art/我们知道,我们在使用 Vue 的时候,要使用 new 操作符进行调用,这说明 Vue 应该是一个构造函数,所以我们要做的第一件事就是:把 Vue 构...转载 2018-08-23 10:33:50 · 2869 阅读 · 2 评论 -
vue源码(四)以一个例子为线索
本文是学习vue源码,之所以转载过来是方便自己随时查看,在这里要感谢HcySunYang大神,提供的开源vue源码解析,写的非常非常好,简单易懂,比自己看要容易多了,他的文章链接地址是http://hcysun.me/vue-design/art/在上一节 Vue构造函数 中,我们整理了完整的 Vue 构造函数,包括原型的设计和全局API的设计,并且我们专门为其整理了附录,目的是便于查看相应的...转载 2018-08-23 10:35:09 · 312 阅读 · 1 评论 -
vue源码(五)Vue 选项的规范化
本文是学习vue源码,之所以转载过来是方便自己随时查看,在这里要感谢HcySunYang大神,提供的开源vue源码解析,写的非常非常好,简单易懂,比自己看要容易多了,他的文章链接地址是http://hcysun.me/vue-design/art/注意:本节讨论依旧沿用前文的例子#弄清楚传递给 mergeOptions 函数的三个参数这一小节我们继续前面的讨论,看一看 mergeOpt...转载 2018-08-23 10:36:11 · 2246 阅读 · 0 评论 -
vue源码(六)Vue 选项的合并
本文是学习vue源码,之所以转载过来是方便自己随时查看,在这里要感谢HcySunYang大神,提供的开源vue源码解析,写的非常非常好,简单易懂,比自己看要容易多了,他的文章链接地址是http://hcysun.me/vue-design/art/上一章节我们了解了 Vue 对选项的规范化,而接下来才是真正的合并阶段,我们继续看 mergeOptions函数的代码,接下来的一段代码如下:...转载 2018-08-23 10:37:14 · 2507 阅读 · 0 评论 -
VUE快速入门心得——render函数
很多朋友对于长篇大论看不下去,有的呢是有接触过这些,所以我们今天吧总结写在前边。需要的朋友可以往下看: 总结: 1. render方法的实质就是生成template模板; 2. 通过调用一个方法来生成,而这个方法是通过render方法的参数传递给它的; 3. 这个方法有三个参数,分别提供标签名,标签相关属性,标签内部的html内容 4. 通过这三个参数,可以生成一个完整的木模板备注...转载 2018-08-20 14:54:30 · 289 阅读 · 0 评论 -
Vue实例生命周期
前面的话 Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等。在此过程中,我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑。本文将详细介绍Vue实例的生命周期 图示 下图是Vue实例生命周期的图示 解释 接下来,根据提供的生命周期钩子,对Vue实例各个阶段的情况进行详细说明【转载 2018-01-19 18:11:48 · 257 阅读 · 0 评论 -
Vue实例对象的数据选项
前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可。涉及到复杂逻辑时,则需要用到methods、computed、watch等方法。本文将详细介绍Vue实例对象的数据选项 data data是Vue实例的数据对象。Vue将会递归将data的属性转换为getter/setter,从而让data属性能响应数据变化 [注意]不应该对data属性使用箭头函数div id="app"转载 2018-01-19 17:57:40 · 777 阅读 · 0 评论 -
Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实。但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好。个人还是比较喜欢类似于《JS高级程序设计》的风格,从浅入深,娓娓道来 于是,还是按照自己的思路,对Vue的知识体系从浅入深的开始学习,并把学习记录总结成博客,也是希望能够帮助到同样入门Vue的朋友,本文将详细介绍Vue入门基础 概述转载 2018-01-19 17:12:33 · 256 阅读 · 0 评论 -
Vue数组更新及过滤排序
前面的话 Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本。本文将详细介绍Vue数组更新及过滤排序 变异方法 Vue 包含一组观察数组的变异方法,它们将会触发视图更新,包含以下方法push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度pop() 从数组末尾移除最后一项,减转载 2018-01-22 13:34:29 · 3744 阅读 · 0 评论 -
Vue事件处理
前面的话 Vue事件监听的方式貌似违背了关注点分离(separation of concern)的传统理念。实际上,所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上,它不会导致维护上的困难。使用v-on有以下好处: 1、扫一眼HTML模板便能轻松定位在JS代码里对应的方法 2、无须在JS里手动绑定事件,ViewModel代码可以是非常纯转载 2018-01-22 14:04:02 · 1498 阅读 · 0 评论 -
Vue表单控件绑定
前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model本质上不过是语法糖,它负责监听用户的输入事件以更新数据 [注意]v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它会选择Vue转载 2018-01-22 14:18:28 · 267 阅读 · 0 评论 -
Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。根据项目需求,抽象出一些组件,每个组件里包含了展现、功能和样式。每个页面,根据自己所需,使用不同的组件来拼接页面。这种开发模式使前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦。本文将详细介绍Vue组件基础用法 概述 在 Vue 里,转载 2018-01-22 14:53:33 · 577 阅读 · 0 评论 -
Vue组件选项props
前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项。在 Vue 中,父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props 父子级组件 在介绍props之前,先介绍父子转载 2018-01-22 15:24:45 · 378 阅读 · 0 评论 -
Vue自定义指令
前面的话 除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。在Vue里,代码复用的主要形式和抽象是组件。然而,有的情况下,仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。本文将详细介绍Vue自定义指令 指令注册 以一个input元素自动获得焦点为例,当页面加载时,使用autofocus可以让元素将转载 2018-01-22 16:11:07 · 564 阅读 · 0 评论 -
Vue模板逻辑
前面的话 上一篇介绍了Vue的模板内容,而对于一般的模板引擎来说,除了模板内容,还包括模板逻辑。常用的模板逻辑包括条件和循环。本文将详细介绍Vue模板逻辑 条件渲染 在Vue中,实现条件逻辑依靠条件指令,包括v-if、v-else、v-else-if这三个【v-if】 根据表达式的值的真假条件渲染元素。赋值为true时,将元素插入DOM中,转载 2018-01-22 11:44:14 · 529 阅读 · 0 评论 -
Vue内容分发slot
前面的话 为了让组件可以组合,需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 内容分发 (或 “transclusion” )。Vue实现了一个内容分发 API,参照了当前 Web 组件规范草案,使用特殊的 元素作为原始内容的插槽。本文将详细介绍Vue内容分发slot 编译作用域 在深入内容分发 API 之前,先明确内容在哪个作用域里编译转载 2018-01-22 16:01:04 · 203 阅读 · 0 评论 -
Vue动态组件
前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件。本文将详细介绍Vue动态组件 概述 通过使用保留的 元素,动态地绑定到它的 is 特性,可以实现动态组件div id="example"> button @click="change">切换页面button> component :is="currentView">compo转载 2018-01-24 10:53:10 · 2082 阅读 · 0 评论 -
Vue组件实例间的直接访问
前面的话 有时候需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件。 在组件实例中,Vue提供了相应的属性,包括$parent、$children、$refs和$root,这些属性都挂载在组件的this上。本文将详细介绍Vue组件实例间的直接访问 $parent $parent表示父组件的实例,该属性只读 下面是一个简易实例转载 2018-01-24 11:12:20 · 279 阅读 · 0 评论 -
Vue单文件组件
前面的话 本文将详细介绍Vue单文件组件 概述 在很多 Vue 项目中,使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。 这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中,或者前转载 2018-01-24 11:24:22 · 1069 阅读 · 0 评论 -
Vue命令行工具vue-cli
前面的话 Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目 。本文将详细介绍Vue命令行工具vue-cli 概述 Vue-cli是Vue官方提供的用于初始化Vue项目的脚手架工具。使用Vue-cl转载 2018-02-02 17:41:02 · 4189 阅读 · 0 评论 -
Vue模板内容
前面的话 如果只使用Vue最基础的声明式渲染的功能,则完全可以把Vue当做一个模板引擎来使用。本文将详细介绍Vue模板内容 概述 Vue.js使用了基于HTML的模板语法,允许声明式地将DOM绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML ,所以能被遵循规范的浏览器和HTML解析器解析 在底层的实现上, Vue将模板编译成虚拟转载 2018-01-22 11:09:42 · 504 阅读 · 0 评论