frontend technology

Vue | 32 内部 - 深入响应式原理

主要内容： 改变是如何被追踪到的改变检测的一些说明及声明属性的方式声明响应式属性的形式及原因异步更新队列的方式及如何在nextTick下手动更新数据现在是时候深入研究一下了！Vue最独特的功能之一就是非侵入式的响应系统。模型仅仅是纯JavaScript对象。…

Vue | 14 组件深入-自定义事件

内容提要: 事件名称命名注意事项自定义组件v-model的不同用法为组件绑定本地事件.sync修饰符的用法这页假定你已经阅读了组件基础Components Basics，如果你是组件新手请先阅读它。事件名称不像组件和props，事件名称不存在自动大小写转换。相反&#…

Vue | 30 规模化 - 状态管理

类Flux官方实现由于多个状态分散在不同的组件和组件直接的交互中，大型应用常常变得复杂。为了解决这个问题，Vue提供了vuex：我们有受到Elm启发的状态管理库。它甚至集成进了vue-devtools，无需配置即可进行时光旅行调试。 React …

Vue | 26 工具 - 单元测试

主要内容： 简单的断言写可测试的组件断言的异步更新 Vue CLI已经为单元测试构建了操作项，使用Jest或Mocha开箱即用。我们也提供了官方的单元测试库Vue Test Utils,为自定义配置提供了更为细节的指导。简单的断言你不必为了组件的可测试性提供任何特殊…

Vue | 13 组件深入-Props

内容提要： Prop的大小写与类型传递动态和静态的Props单向数据流Prop的验证非Prop属性这页假设你已经读了Components Basics，如果你不了解组件首先读它。 Prop大小写（cameCase vs kebab-case） HTML属性名是大小写不敏感的&#x…

Vue | 03 实例

创建一个Vue实例每一个Vue应用都需要从使用Vue函数创建一个Vue实例开始： var vm new Vue({//options })虽然和 MVVM pattern 不太相关，Vue的设计部分来自于它的灵感，例如习惯上，我们常常使用vm（ViewModel的简写&am…

Vue | 06 类和样式绑定

内容提要： 绑定HTML classes的语法：对象语法、数组语法、在组件上的使用绑定内联样式的语法：对象语法、数组语法、自动加前缀与多个值的使用对于数据绑定的一种常见需要是操作元素的类列表和它的内联样式。由于它们都是属性，我们…

Vue | 17 组件深入-处理边界情况

内容提要： 元素和组件的访问：根实例、父组件实例、子组件实例和子元素的访问方式以及依赖注入程式化事件监听器循环应用的产出原因及解决方式使用inline Templates、X-Templates替代模板定义数据更新的控制：强制更新和加载静态内容的方式这页…

Vue | 08 列表渲染

内容提要: v-for映射数组与对象的用法 key值的作用与用法数组变化检测 3.1 数组可变方法 3.2 如何替换数组 3.3 数组index/length赋值不能响应变化的处理方法对象无法响应变化的处理如何显示过滤/或排序的结果 v-for与范围、template上使用v-for v-for与v-if的优先级处…

Vue | 07 条件渲染

v-if的用法详解v-show的用法v-if与v-show的用法比较v-if与v-for联合使用的建议 v-if 在字符串模板里，例如 Handlebars，我们像这样写一个条件模块：  {{#if ok}} <h1>Yes</h1> {{/if}}在Vue我…

Vue 系列 | Vue-Router

注意： 本文所有示例代码详见：vue-rouer-demo 1.What | 什么是Vue Router Vue Router是Vue.js提供的官方路由管理器，它和Vue.js深度集成,使构建单页面应用非常方便。 2.Why | 为什么要使用Vue Router 大家打开LorneNote个网站，这…

Vue | 04 模板语法

内容提要： 如何在HTML中插入值（包括插入纯文本、生成原生HTML、属性绑定v-bind、JavaScript表达式的使用）指令（指令的表示方式、参数与修饰符的含义、写法、用法）速记（速记的意义、使用场景、v-bind和v-on…

Vue | 20 可复用性组合-混入

内容提要： 基础的混入方式操作项的合并全局的混入方式自定义操作项合并策略混入是一种非常灵活的分发Vue组件中可复用的功能模块的方式。一个混入对象能包含任何组件操作项。当一个组件使用一个混入对象的时候，在混入对象的所有操作项被‘混合’进组件自…

Vue | 31 规模化 - 服务端渲染

完整的服务端渲染指南我们为在服务端渲染Vue应用创建了一个完整的指导。对于那些已经熟悉Vue客户端开发、服务端Node.js开发和webpack的人来说，很适合阅读这份更深入的指南。请移步ssr.vuejs.org。 Nuxt.js 正确配置可用于生产环境的服务器渲染应用可能是相当复…

Vue | 25 工具 - 单文件组件

内容提要： 单文件组件的意义关于新手和高级用户如何使用单文件组件的建议介绍在一些Vue项目中，全局组件将使用Vue.component定义，而后通过new Vue（{ el: #container }）在页面内找到一个容器元素。这在小型到中型的…

Vue | 02 入门

什么是Vue.js? Vue（读/vjuː/）是一个用于构建用户界面的渐进式框架，不同于其它的大框架，Vue是被设计为自底向上适应的，核心库集中在视图层，容易使用以及和其它的库或已经存在的项目集成。另一方面&#x…

Vue | 10 表单输入绑定

内容提要： 基本用法：文本、多行文本、复选框、单选框、下拉列表；复选框、单选框、列表选项的值绑定；.lazy .number .trim修饰符。基本用例你能用v-model指令去创建双向的数据绑定在表单的输入框，文本框，…

Vue | 15 组件深入-插槽

内容提要： 插槽的内容命名的插槽默认插槽内容插槽的编译范围作用域插槽解构slot-scope 这页假定你已经阅读组件基础（ Components Basics），如果你不了解组件，请先阅读它。插槽内容 Vue实现了一套内容分发的API。该API…

Vue | 09 事件处理

内容提要： 事件监听、方法事件的处理、内联方法处理事件修饰符、键修饰符、系统修饰符键（.exact修饰符、鼠标事件修饰符）在HTML中监听事件的好处监听事件当事件被触发的时候我们可以使用v-on指令去监听DOM事件和运行一些JavaScript。例如…

Vue | 12 组件深入-组件注册

内容提要： 横线分割的组件命名全局注册组件的方式局部注册组件的方式模块系统：在模块系统中本地注册组件的方式、全局自动创建基本组件的方式这页假设你已经读了组件基础Components Basics，如果你不了解组件先读它组件名称在注册组件的时…

Vue | 28 工具 - 产品部署

主要内容： 打开生产模式的几种配置方式预编译模板提取组件CSS的方式追踪运行时错误如果你使用Vue CLI以下大部分建议是默认可用的。如果你使用的是自定义的构建设置时，这章才是相关的。打开生产模式在开发阶段，Vue对于常见的错误和陷阱提…

Vue | 27 工具 - TypeScript 支持

主要内容： JavaScript在官方的声明及推荐配置创建工程及编码的开发工具推荐基本用例演示基于类风格的Vue组件插件使用中的参数类型注释返回类型 Vue CLI提供了构建 TypeScript工具支持。在Vue的下一个主要版本（3.x）我们也计划更多的提供我们对…

Vue | 18 过渡动画-进入/离开列表过渡

内容提要： 单个元素或组件的过渡: 过渡类、CSS过渡、CSS动画、自定义过渡类、动画和过渡在一起使用、声明过渡持续时间、JavaScript钩子初始渲染的过渡元素间的过渡组件间的过渡列表的过渡：列表进入/离开过渡，列表项移动过渡，交错…

Vue | 19 过渡动画-状态过渡

内容提要： 动画的状态与监听器动态状态过渡在组件内组织过渡为设计赋予生命 Vue的过渡系统提供了许多简单的方式去实现动画的进入、离开和列表的动效。但是怎么样对你的数据本身进行动画处理呢？例如： 数字和计算颜色显示可缩放的矢量图形节点…

Vue | 23 可用性组合 - 插件

内容提要： 使用一个插件如何写一个插件插件常常为Vue添加全局级功能。插件没有严格定义的作用域 - 通常有几种类型的插件： 添加一些全局的方法或属性。例如： vue-custom-element添加一个或多个全局资源：指令/过滤器/过渡等等. …

Vue | 24 可用性组合 - 过滤器

Vue.js允许你去定义过滤器，可用于一些常见的文本格式化。过滤器在两个地方可以使用：双花括号插值和v-bind 表达式（在2.1.0被支持）。过滤器应该被加到JavaScript表达式的末尾，由管道符号表示： <!-- 在双…

Vue | 01 安装

对于兼容性解释 Vue不支持IE8和以下的浏览器，因为它所使用的ECMAScript 5的特性在IE8是不可调的，然而它支持所有兼容ECMAScript 5的浏览器。 Vue 开发工具 Vue推荐在浏览器中使用 Vue Devtools，可以使你检查和调试Vue界面更加友好。如何在…

Vue | 05 计算属性和监听器

内容提要： 计算属性的使用场景及表示方法计算缓存与方法的差异计算属性与监听器属性的使用比较计算属性的Setter表示方法监听器的使用方式计算属性在模板内写表达式是非常方便的，但它们仅仅能做一些简单的操作，把太复杂的表达式放…

Vue | 11 组件基础

内容提要： 组件的复用；组件的组织：全局组件与局部组件使用Props传递数据给子组件组件必须拥有单独的根元素使用事件发送消息给父组件：用一个事件发送一个值、在组件中使用v-model用Slots内容限制动态组件的使用DOM模板解析说明先…

Vue | 29 规模化 - 路由

官方路由对于大多数单页面应用，推荐使用官方支持的vue-router library，对于更多的细节，查看vue-router的文档。从零开始简单的路由如果你仅仅需要一个非常简单的路由，但不需要包含一个完整功能的路由库，你可以像…

Vue | 16 组件深入-动态的异步的组件

内容提要： 避免内容更新—keep-alive与动态组件异步加载组件的处理方式这页假定你已经了解组件基础 Components Basics，如果你不了解组件请先读它。 keep-alive与动态组件之前，我们使用is属性去切换组件在标签栏界面： <com…

Vue | 21 可复用性组合-自定义指令

内容提要： 自定义指令基本用法介绍自定义指令内部包含哪些钩子函数指令钩子内部传递哪些元素值自定义指令函数的缩略写法用例在JavaScript对象中传递多个字面值介绍除了在核心附带的默认的指令集合（v-model和v-show）外，Vue也允…