vuejs / v2.vuejs.org

📄 Documentation for Vue 2

v2.vuejs.org

Important: This repository is for Vue 1.x and 2.x only. Issues and pull requests related to 3.x are managed in the v3 doc repo.

This site is built with hexo. Site content is written in Markdown format located in src. Pull requests welcome!

Writing

See the Vue Docs Writing Guide for our rules and recommendations on writing and maintaining documentation.

Developing

$ npm install
$ npm start # dev server at http://localhost:4000

Deploying

The site is automatically deployed when commits land in master, via Netlify.

If you are the maintainer of a community translation fork and would like to deploy via Netlify instead of GitHub pages, please ping @yyx990803 in an issue to request a Netlify team membership and DNS update.

On Translations

Translations for this documentation project are currently maintained in separate repositories forked from this original one.

Arabic

Arabic translation is maintained by Interstellar Club

• Translation Repo - /interstellarClub/ar.vuejs.org
• Primary Maintainers :
  • Ilyes Chouia
  • Ahmed Aissaoui

French

French translation is maintained by Vuejs-FR.

• Translation Repo - /vuejs-fr/vuejs.org

Italian

• Translation Repo - /vuejs/it.vuejs.org

Japanese

Japanese translation is maintained by Vue.js japan user group

• Translation Repo - /vuejs/jp.vuejs.org
• Primary maintainer - kazupon
• Secondary Maintainers:
  • re-fort
  • potato4d
  • oohira

Korean

Korean translation is maintained by Vue.js Korean User group.

• Translation Repo - /vuejs-kr/kr.vuejs.org
• Primary maintainer - ChangJoo Park

Mandarin

• Translation Repo - /vuejs/cn.vuejs.org

Persian (Farsi)

Persian translation is maintained by VueJS-fa.

• Translation Repo - /vuejs-fa/fa.vuejs.org
• Primary maintainer - Pooya Parsa

Português-Br

Português-Br translation is maintained by Vuejs-Br.

• Translation Repo - /vuejs-br/br.vuejs.org

Russian

Russian translation is maintained by Translation Gang.

• Translation Repo - /translation-gang/ru.vuejs.org
• Primary maintainer - Grigoriy Beziuk

Spanish

• Translation Repo - /1950Labs/vuejs.org
• Spanish translation is maintained by:

1950Labs & Vue.js Montevideo:

• Leonel More | Twitter
• Sebastián Camacho | Twitter
• Diana Rodríguez | Twitter
• Alejandro Parada
• José Javier Señaris | Twitter
• Federico Kauffman | Twitter
• Fabián Larrañaga | Twitter
• Pablo Marcano | Twitter
• Nicolás Tinte | Twitter
• Diego Barreiro
• Matías Verdier | Twitter
• Pablo Kz
• Leonardo Fagundez | Twitter

Vietnamese

Vietnamese translation is maintained by Vue.js Vietnam User group.

• Translation Repo: /vuejs-vn/vuejs.org
• Primary maintainer - phanan

Bahasa Indonesia

Bahasa Indonesia translation is maintained by Vue.js Indonesia.

• Translation Repo: /vuejs-id/docs

Want to help with the translation?

If you feel okay with translating quite alone, you can fork the repo, post a comment on the Community Translation Announcements issue page to inform others that you're doing the translation and go for it.

If you are more of a team player, Translation Gang might be for you. Let us know somehow that you're ready to join this international open-source translators community. Feel free to contact Grigoriy Beziuk or anybody else from the team.

And thank you in advance ;)

v2.vuejs.org's Issues

v-pre no longer works?

Hello!
As subject states: looks like v-pre won't work in 0.11.
Didn't find any references to that in change log.
http://jsfiddle.net/8s0ndths/3/

Small improvements

• yyx990803/vue#980 Objects are pre-processed to Arrays in v-repeat filters
• yyx990803/vue#988 Difference between internal and user watchers
• vuejs/Discussion#213 Best practices for tearing down manual timers/listeners
• yyx990803/vue#1061 Add custom filter example for <select> dynamic options
• tips on integration with 3rd party libs: wrap them with custom directives

Looking for 0.10 docs?

http://legacy.vuejs.org/guide/ links to itself when clicking the link to the previous version.
It's debatable if the 1.10 docs are still necessary or useful at this point of time (I doubt it). But it's a bit misleading to leave the link on the page, even if it's legacy ^^

For further versions however, I'd prefer an absolute naming convention. The meaning changes for the term legacy, 0.11 is unambiguous.

You could do something like bootstrap:

• http://vuejs.org/0.11/docs
• http://vuejs.org/0.12/docs

404 on filters guide

I searched for "filters" and clicked the second link which references http://vuejs.org/guide/filters.html. But this page is not available (404).

Broken examples - mixed content

Hey I was just digging through your examples and you might be interesting that I the vue.min.js isn't loaded. Do you have a CDN with SSL where you can link it to?

"Mixed Content: The page at 'https://fiddle.jshell.net/yyx990803/wy2qf6yx/show/light/' was loaded over HTTPS, but requested an insecure script 'http://vuejs.org/js/vue.min.js'. This request has been blocked; the content must be served over HTTPS."

the default value of the 'replace' option should be true in Chinese API Doc

Please see this.
https://github.com/yyx990803/vue/issues/1051#issuecomment-121574359

The Chinese version of vue.js documention should be updated to v0.12.7. Now it's still v0.11.5.

UTF8 support for filtering

I have a problem with filtering data containing UTF8 characters, like names of people from Slovakia, for example Čechovič, Šipoš etc...

I want to find this name also by typing cechovic, sipos... Currently I have to add another set of data from backend with strings with removed special characters. to be able to do the filtering.

Is it possible to add support for this directyl in Vue?

Vuejs logo license

What is license ?

Home redesign

Typo in master/source/api/options.md

https://github.com/vuejs/vuejs.org/blame/master/source/api/options.md#L100

prop-validation-demoo size="hello" should be
prop-validation-demo size="hello"

Morrrrre Live Examples

JSFiddle links / PRs welcome.

A printable version of API Reference/Guide?

The current API reference and guide is nice. It would be great if they can be printed.

Is it possible to export all the documents into a single PDF or HTML file to make it printable?

How to generate site into the gh-pages branch and manage it?

just as the title
Is there any shell/script/tool or github function to do this?

Thx

In the benchmarks, Angular interacts with local storage.

The version of TODO MVC included for angular saves and loads data from local storage. I removed this interaction and gained about 25% performance.

clarify literal directives and `isFn` options

https://github.com/yyx990803/vue/issues/122

Missing doc of v-else

How to test component

Hi
I don't understand one moment in your example for testing http://vuejs.org/guide/application.html#Unit_Testing

//----------------return only object
var myComponent = require('../src/my-component')
//----------------why the myComponent contain function "data" ?
expect(typeof myComponent.data).toBe('function')

Thank you for advance.

Normalize benchmark implementations

From https://github.com/yyx990803/vue/issues/155

Specifically which browser versions are supported?

I notice that firefox 4 to 10 do not work for a number of the examples in the examples page.
e.g. http://vuejs.org/examples/grid-component.html
The following is a link to the screenshots produced for those versions:
https://www.browserstack.com/screenshots/16186472da07af3c3696983908409a843f325bf4
The site seems to indicate that ECMAScript 5+ is required, but my understanding is that firefox 4+ has implemented nearly all of that.
The Galaxy S2 and Galaxy Note (original) seem to show nothing at all for that example page, but maybe the browser used is pre ECMAScript 5.
Is there a formal list of what browsers are supported?
(I know all the browsers and devices I have mentioned are quite old, so no problem if not supporting, I would just like to know).
Thanks,
Andrew

Mention one-way binding in guide’s comparison with Angular

The framework comparison page (src/guide/comparison.md) describes four ways that Vue is different from Angular 1. However, it doesn’t mention that Vue supports and defaults to one-way binding between components, while Angular only supports two-way binding.

I think readers would want to know about this difference. For example, this HN commenter who Evan replied to said he wouldn’t use Vue because it uses two-way binding. If the comparison had mentioned the use of one-way binding, people like him wouldn’t be put off.

You might say something like this. I’m not sure that this is accurate, though, as I have only ever used Angular:

• While Angular uses two-way binding, Vue also supports, and defaults to, one-way binding between components. Using one-way binding makes the flow of data easier to reason about in large apps.

Two-way Filters example code does'nt work

http://vuejs.org/guide/custom-filter.html#Two-way_Filters

This doesn't work.

Vue.filter('currencyDisplay', {
  currencyDisplay: {
    // model -> view
    // formats the value when updating the input element.
    read: function(val) {
      return '$'+val.toFixed(2)
    },
    // view -> model
    // formats the value when updating the data.
    write: function(val, oldVal) {
      var number = +val.replace(/[^\d.]/g, '')
      return isNaN(number) ? 0 : number
    }
  }
})

This is work.

Vue.filter('currencyDisplay', {
    // model -> view
    // formats the value when updating the input element.
    read: function(val) {
      return '$'+val.toFixed(2)
    },
    // view -> model
    // formats the value when updating the data.
    write: function(val, oldVal) {
      var number = +val.replace(/[^\d.]/g, '')
      return isNaN(number) ? 0 : number
    }
  }
})

Menu alignment on the homepage

Solution:

#nav li:last-child .nav-link {
  margin-right: 0;
}

Add a LICENSE file

Hey, I'm working on some documentation and I really love the way you've done the navigation with the sidebar on vuejs.org. I also really love the fact that you're using native APIs rather than jquery. Would you mind if I based the navigation I'm building off of yours? Although it would look different and probably work a bit differently too.

Bootstrap Tooltips fail when using v-repeat with AJAX data

I'm having trouble with tooltips for elements inside a v-repeat loop, whenever the loop is based on data received by an AJAX callback.

Here is a jsfiddle with the issue.
http://jsfiddle.net/hotrod/526e6qwv/

Any idea on what am I doing wrong here?
Thank you.

1.0 文档中 Parent-Child_Communication 部分的例子中，似乎多了个 )

http://vuejs.org/guide/components.html#Parent-Child_Communication

v-on="click: return submit()"

when I try to use that, it failed.

setup the blog

Special key filter presets require quotes

The docs (http://vuejs.org/guide/events.html#The_Special_key_Filter) say you can specify a key filter like this:

<input v-on="keyup:submit | key enter">`

However, as per the filter syntax change in v0.12.0 (https://github.com/yyx990803/vue/releases/tag/0.12.0) the key specifier must be surrounded in quotes like this:

<input v-on="keyup:submit | key 'enter'">

The docs should be changed to reflect this necessity

It has been 0.10.4 on vuejs.org but still 0.10.3 here?

Request an update...

Improve code legibility

Moved from https://github.com/yyx990803/vue/issues/166

API Docs as a single page

Right now it's really hard to search unless you know what you are looking for AND where you are looking. Making this a single page with expandable links to content would be hugely helpful. If I can find some time I'm happy to help if you're accepting PRs

Can i use vuejs safely in my project ? (need to support IE 7,8)

Hi, I want to know can i use vuejs safely in my project which is need to support Internet Explorer 7, 8.
I know that vuejs just supports es5 , so I am also going to use es-shims/es5-shim (I think this will help).
I am also know that es5-shim is not support all features of es5, so i ask this issues. : )

Adding a"see source" link next to each API methods

I'm using Pixi.JS at the moment ans I find it pretty neat, for a small/young library to give the user the possibility to easily check the source if needed: pixi docs.

Do you find it useful? Would that be possible with hexo?
I guess it would require to insert some kind of documentation in the current code so that may not be ideal (given that there is not doc in the code).

Update "watch" component option description

1. At current time we also have alternative syntax (with options object: yyx990803/vue@47c52d6).
2. Please add an example describing option usage for object case:

data: {
  some: {property: 1}
},
watch: {
  'some.property': 'handler'
}

Migrate to hexo 3.0？

I found hexo 3.0 is not compatible with hexo 2.x..

https://github.com/hexojs/hexo/wiki/Migrating-from-2.x-to-3.0

The new version use npm install hexo-cli -g instead of npm install hexo -g for installation.

I was wondering whether this site is planning to migrate to hexo 3.0. If so, maybe there is something I could help..

Small Typo on Installation Page

There is a small typo here: http://vuejs.org/guide/installation.html#CSP-compliant_build

"Secuirty" is written wrong. It's Security. =)

examples for each directive

Had a little idea to create comprehensive fiddle examples for each of the directives to give people a reference point for their projects and clear up any gotchas or quirks. A very quick and crude example for v-text and v-html as an example:

v-html
http://jsfiddle.net/brandonpierce/rT5LE/

v-text
http://jsfiddle.net/brandonpierce/fzCBJ/

v-show
http://jsfiddle.net/brandonpierce/zKedk/

v-class
http://jsfiddle.net/brandonpierce/zePz9/

v-attr
http://jsfiddle.net/brandonpierce/hD6EV/

v-style
http://jsfiddle.net/brandonpierce/Uf26z/

These fiddles could then be either linked or embedded in the docs page.

Two-ways data-binding on non-form elements?

Hey,

Is there any way to initialise data from rendered HTML content instead of the $data property?

Use Case

I have a list of elements rendered from server-side,
And I want to set-up an "external" form to filter it.

<form id='filter-form' action='#' method='get'>
    <input type='search' name='filter' placeholder='Filter' v-model='query' />
</form>

<!-- A list rendered from server -->
<ul id='characters'>
    <!-- Following elements are rendered in HTML from server-side -->
    <!-- How to push them as characters directly from HTML? -->
    <li class='static character'>Marty McFly</li>
    <li class='static character'>Jennifer Parker</li>
    <li class='static character'>Emmet Brown</li>
    <li class='static character'>Biff Tannen</li>
    <li class='static character'>Einstein</li>
</ul>


var filtrableList = new Vue({
    el: '#filtrable-list',
    data: {
        characters: [],
        query: ''
    }
});

Workaround

To make it work "as I want", I wait for the list to be loaded, then parse the rendered items, push them to the list, then delete their rendered DOM element...

As in the following: http://jsfiddle.net/FloSchieldBobby/avr8ccus/

<ul id='characters'>
    <li v-repeat='character: characters | filterBy query' class='rendered character'>{{ character.name }}</li>
    <!-- [...] -->
</ul>

var charactersList = document.querySelector('#characters');
var characters = charactersList.querySelectorAll('.character.static');
var charactersLength = characters.length;
var index;

for (index = 0; index < charactersLength; index++) {
    var character = characters[index];

    filtrableList.characters.$set(index, {
        name: character.innerHTML
    });

    character.remove();
}

But it is very hacky (dirty) IMO.

Do you have an idea?

typo at http://vuejs.org/guide/composition.html

The last sentence of the "Partials and {{>yield}}" section begins with "It", but should be "If".

Saw an input element in code

Looks strange, probably mistake:

vuejs.org website translation

In the Event,
VueJS japanese user community want to translate the vuejs.org website for Japan.

I think that create a vuejs/vuejs-ja.org repository, and should translate in the repository.

I hope you give me the other good ideas. :)

0.12.13 updated?

I saw the website updated but this repo not

Development Setup Help

I know this may not be specifically your issue, but thought I would add here in case you had the solution -

Trying to run the development environment -

hexo server
[info] Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
[warn] No layout: 

Am I missing something?

About the Vue vs Angular comparison

You mention on the "Common FAQ" that Angular will be dropping support for IE8 on version 2. But it actually dropped support on the already released version 1.3.

{{> yield }} example

re: http://vuejs.org/guide/composition.html

I might suggest removing thje id="#test" from

div id="test" v-component="my-component">
    <p>original content</p>
</div>

In all the other examples where an id is used, it's used as a target for a viewmodel. However, since viewmodels can only use components on descendant elements, the naive beginner finds their code not working when targeting the #test div.

A more thorough guide on Vue.extend

I have read both the "API guide" on Vue.extend and the "Extending Vue" portion which talks about it, but I think the concept of extending components is more powerful than what it currently seems after you read the docs.

For example I am in a situation where I would want to have a hierarchy of related components:

var userTemplate = '<h3>User Profile</h3>' + '<p>{{firstName}}</p>'

var User = Vue.extend({
    name: 'UserCard',
    el: function() {
        return document.createElement('div')   
    },
    template: userTemplate,
    methods: {
        login: function() {
            console.log('Logging in user: ' + this.firstName)   
        }
    },
    ready: function() {
        this.login()   
    }
})
var Student = User.extend({ 
    name: 'StudentCard',
    template: userTemplate + '<p>Student ID: {{studentId}}</p>'
})
var Gardener = User.extend({
    name: 'GardenerCard',
    data: function() {
        return { 
            accessRights: [ 'open', 'close' ] 
        }
    },
    template: userTemplate + 
        'Can access: <ul>' + 
                        '<li v-repeat="accessRights">{{$value}}</li>' + 
                    '</ul>'
})

var user = new User({
    data: {
        firstName: 'Agon'   
    }
}).$appendTo('#user')
var student = new Student({
    data: { 
        firstName: 'Agon the student', 
        studentId: 5 
    }
}).$appendTo('#student')
var gardener = new Gardener({
    data: {
        firstName: 'Agon the gardener'   
    }
}).$appendTo('#gardener')

The example above works very well, but I am not quite sure if there might be some sort of unexpected behaviors because of how the chain of extending works?

A list of which properties can be "extended", dos and don'ts, pros and cons and any other information that doesn't seem so obvious on extending from a custom component to another custom component would certainly be very useful to have either in the "Extending Vue" portion or the API Guide itself :)

mustache-security review of VueJS

FYI,

https://code.google.com/p/mustache-security/wiki/VueJS

I guess those issues should have an issue in the bug tracker, so this is it. Maybe some code from Angular could be reused in Vue?

Full tutorial with TodoMVC

Could vue.js support IE8 and below ?

"avalon是一款基于 Object.defineProperty 与 VBScript 实现属性监控变动的MVVM框架，因此性能比基于脏检测的angular来得更好，使用方法也比基于属性转函数的knockout来得直接便捷。简单易用易上手兼容性好的是其最大的特点"

vue.js是否可以通过vbscript扩大浏览器支持？

Executing order of mixins (options.html#mixins)

http://vuejs.org/api/options.html#mixins

var mixin = {
  created: function () { console.log(2) }
}
var vm = new Vue({
  created: function () { console.log(1) },
  mixins: [mixin]
})
// -> 1
// -> 2

Should be

// -> 2
// -> 1