彳亍

在 Vue 2.5.0 中，我们大大改进了类型声明以更好地使用默认的基于对象的 API。同时此版本也引入了一些其它变化，需要开发者作出相应的升级。发布为 NPM 包的官方声明文件静态类型系统能帮助你有效防止许多潜在的运行时错误，而且随着你的应用日渐丰满会更加显著。这就是为什么 Vue 不仅仅为 Vue core 提供了针对 TypeScript 的官方类型声明，还为 Vue Router 和 Vuex 也提供了相应的声明文件。而且，我们已经把它们发布到了 NPM，最新版本的 TypeScript

配置和工具任何兼容基于模块的构建系统都可以正常使用，但如果你需要一个具体的建议，可以使用 Karma 进行自动化测试。它有很多社区版的插件，包括对 Webpack 和 Browserify 的支持。更多详细的安装步骤，请参考各项目的安装文档，通过这些 Karma 配置的例子可以快速帮助你上手 (Webpack 配置，Browserify 配置)。简单的断言你不必为了可测性在组件中做任何特殊的操作，导出原始设置就可以了：<template> <span>{{ me

介绍在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：...

Vue.js 允许你自定义过滤器，可用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:...

开发插件插件通常会为 Vue 添加全局功能。插件的范围没有限，一般有下面几种：添加全局方法或者属性，如: vue-custom-element 添加全局资源：指令/过滤器/过渡等，如 vue-touch 通过全局 mixin 方法添加一些组件选项，如: vue-router 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。 一个库，提供自己的 API，...

基础Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。<h1> <a name="hello-world" href="#hello-world"> Hello world! </a&...

简介除了内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子。当页面加载时，该元素将获得焦点。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们...

简介混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。// 定义一个混入对象var myMixin = { created: function () { this.hello() }, methods: { hello: funct...

概述Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 包括以下工具：在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库，如 Velocity.js单元素/组件的过渡Vue 提供了 tr...

编写可复用组件在编写组件时，最好考虑好以后是否要进行复用。一次性组件间有紧密的耦合没关系，但是可复用组件应当定义一个清晰的公开接口，同时也不要对其使用的外层数据作出任何假设。Vue 组件的 API 来自三部分——prop、事件和插槽：Prop： 允许外部环境传递数据给组件； 事件： 允许从组件内触发外部环境的副作用； 插槽： 允许外部环境将额外的内容组合在组件中。使用 v-b...

动态组件通过使用保留的 <component> 元素，并对其 is 特性进行动态绑定，你可以在同一个挂载点动态切换多个组件：var vm = new Vue({ el: '#example', data: { currentView: 'home' }, components: { home: { /* ... */ }, posts:...

我们经常需要使用插槽分发内容。在使用组件时，我们常常要像这样组合它们：<app> <app-header></app-header> <app-footer></app-footer></app>注意两点：<app> 组件不知道它会收到什么内容。这是由使用 <app> 的父...

我们知道，子组件通过 prop 来接收父组件传递的数据。但子组件怎么跟父组件通信呢？这个时候 Vue 的自定义事件系统就派得上用场了。使用 v-on 绑定自定义事件每个 Vue 实例都实现了事件接口，即：使用 $on(eventName) 监听事件 使用 $emit(eventName, optionalPayload) 触发事件Vue 的事件系统与浏览器的 EventTarget...

创建一个 Vue 实例每个 Vue 应用都需要通过 Vue 构造器实例化一个 Vue 实例来实现。语法格式：var vm = new Vue({ // 选项})我们把 Vue() 称为 Vue 构造器。虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。...

简介Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。数据绑定数据绑定也称作插值，主要分为以下几种形式：文本 原始...

简介构造器的 computed 选项，用于定义 Vue 实例的计算属性。虽然模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。如果在模板中放入太多的逻辑会让模板过重且难以维护。例如：<div id="example"> {{ message.split('').reverse().join('') }}</div>这里是想要显示变量 me...

简介构造器的 watch 选项，用于定义 Vue 实例的侦听属性。侦听属性可以用来观察和响应 Vue 实例上的数据变动。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。细想一下这个例子：<div id="demo">{{ full...

简介HTML 元素的 class 绑定 和内联样式绑定是数据绑定的一个常见需求。由于字符串拼接麻烦且易错。因此，在用 v-bind 绑定 class 和 style 时，Vue.js 做了专门的增强。表达式的结果的类型除了字符串之外，还可以是对象或数组。绑定 Class对象语法可以传给 v-bind:class 一个对象，来动态地切换 class。<div v-bi...

v-if<h1 v-if="ok">Yes</h1>在 <template> 元素上使用 v-if 渲染分组因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想同时渲染多个多个元素呢？此时，可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <templ...

v-for 把一个数组对应为一组元素用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组，item 是数组元素迭代的别名。<ul id="example-1"> <li v-for="item in items"> {{ item.message }} ...

监听事件可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter ...

基础用法你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。注意：v-model 会忽略所有表单元素的 value、checked、select...

什么是组件？组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同...

简介Vue.js，简称 Vue，是一套构建用户界面的渐进式 JavaScript 框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。第一个例子demo.html<!DOCTYPE html><html><head> <meta cha...