Vue

Vue 2.0学习笔记:v-model

通过前面的学习,我们可以顺利的在Vue中将数据源渲染到HTML的DOM元素中,但很多时候我们希望能控制数据源。也就是数据绑定,并且与其通讯。简单的说,怎么在Vue中实现数据的双向绑定。这种场景一般都是在表单的操作情景中。在Vue中可以使用v-model的指令来实现。不过这篇文章我们只是来学习v-model指令的使用,但不探究Vue数据双向绑定的原理。如果你对原理方面感兴趣,可以阅读这篇文章

Vue的双向绑定原理及实现

使用Vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版Vue的双向绑定版本。是不是看起来跟Vue的使用方式差不多?接下来就来从原理到实现,从简到难一步一步来实现这个SelfVue。由于本文只是为了学习和分享,所以只是简单实现下原理,并没有考虑太多情况和设计,如果大家有什么建议,欢迎提出来。

Vue双向绑定的实现原理Object.defineproperty

2016年,Vue.js可谓是大放异彩,以迅雷不及掩耳之势赶React超Angular,用惯jQuery的我一下子被Vue开篇介绍的双向绑定给惊着了!一下子按捺不住好奇心,打算刨根究底,看看双向绑定到底是怎样实现的?

Vue 2.0学习笔记:v-on

JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码。浏览器在接收到用户的鼠标或键盘输入后,会自动在对应的DOM节点上触发相应的事件。如果该节点已经绑定了对应的JavaScript处理函数,该函数就会自动调用。

Vue 2.0学习笔记:v-text和v-html

Vue使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。在底层的实现上,Vue将模板编译成虚拟DOM渲染函数。结合响应系统,在应用状态改变时,Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。如果你熟悉虚拟DOM并且偏爱JavaScript的原始力量,你也可以不用模板,直接写渲染函数render,使用可选的JSX语法。

Vue 2.0学习笔记:v-for

上一节,我们学习了在Vue中如何通过v-ifv-show根据条件渲染所需要的DOM元素或者模板。在实际的项目中,我们很多时候会碰到将JSON数据中的数组或对象渲染出列表之类的元素。在Vue中,提供了一个v-for的指令,可以渲染列表

Vue 2.0学习笔记:v-if 和 v-show

在Vue中,我们可以使用v-ifv-show来控制元素或模板的渲染。而v-ifv-show也属于Vue的内部常用的指令。这里所说的指令就是directive,指特殊的带有前缀v-的命令,指令的值限定为绑定表达式,指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。Vue中的内部指令有很多种,今天我们先学习其中的v-ifv-show两个指令。这两都也就是大家常说的条件渲染

Vue 2.0学习笔记:Vue的运行环境

最近开始在恶补Web前端的相关技术栈。除了React之外还有Vue。学习的过程都是痛苦的,感觉自己被掏空了。除了基础不扎实之外,很多东西都得学。为了不会那么容易忘记学习的相关知识,通过博客,把自己的学习过程记录一来。好记性不如烂笔头。

Vue: 动画

这是 JavaScript 框架 Vue.js 五篇教程的第五部分。在这个系列的最后一部分,我们将学习动画(如果你了解我,你知道这一章迟早会来)。这个系列教程并不是一个完整的用户手册,而是通过基础知识让你快速了解 Vuejs 以及它的用途。内置的 <transition><transition-group> 组件同时支持 CSS 和 JS 钩子。如果你熟悉 React , transition 组件的概念对你并不陌生,因为在生命周期钩子中,它与 ReactCSSTransitionGroup 类似,但也有显著的差异 ,这让书呆子的我很兴奋。

Vuex

这是关于 JavaScript 框架 Vue.js 五个教程的第四部分。在这一部分,我们会学习使用 Vuex 进行状态管理。这个系列教程并不是一个完整的用户手册,而是通过基础知识让你快速了解 Vuejs 以及它的用途。如果你错过了关于组件及 Vue-cli 的部分,在阅读本篇文章之前应该先读读这几部分。现在我们已经了解了关于组件、传递状态和 props 的基本知识,接下来讨论一下 Vuex,它是状态管理的好工具。之前,我们是从顶层组件向下传递状态,而同胞组件之间并没有分享数据。如果它们需要相互通信,我们要在应用程序中推送状态。这是可以的!但是一旦你的程序变得复杂,这种方法就没有意义了。如果你之前用过 Redux,那 Vuex 中所有的概念及实现对你也不陌生。Vuex 是 Vue 中的 Redux。实际上,Redux 也可以用于 Vue,但是,使用专门为 Vue 设计的工具 Vuex 更加有利。

页面

返回顶部