From 6cdc99bf8a2e215b4e0cf5065b0b2c970b581fc2 Mon Sep 17 00:00:00 2001 From: Herrington Darkholme Date: Sat, 28 Oct 2017 19:47:28 +0800 Subject: [PATCH 0001/1043] Recommend return type annotation (#1239) * Recommend return type annotation * make explanation clear, thank @DanielRosenwasser --- src/v2/guide/typescript.md | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/src/v2/guide/typescript.md b/src/v2/guide/typescript.md index 2cfc80082d..e5283d8443 100644 --- a/src/v2/guide/typescript.md +++ b/src/v2/guide/typescript.md @@ -141,3 +141,39 @@ var vm = new Vue({ myOption: 'Hello' }) ``` + +## Annotating Return Types + +Because of the circular nature of Vue's declaration files, TypeScript may have difficulties inferring the types of certain methods. +For this reason, you may need to annotate the return type on methods like `render` and those in `computed`. + +```ts +import Vue, { VNode } from 'vue' + +const Component = Vue.extend({ + data() { + return { + msg: 'Hello' + } + }, + methods: { + // need annotation due to `this` in return type + greet(): string { + return this.msg + ' world' + } + }, + computed: { + // need annotation + greeting(): string { + return this.greet() + '!' + } + }, + // `createElement` is inferred, but `render` needs return type + render(createElement): VNode { + return createElement('div', this.greeting) + } +}) +``` + +If you find type inference or member completion isn't working, annotating certain methods may help address these problems. +Using the `--noImplicitAny` option will help find many of these unannotated methods. From 11830760ba24ea6047c955fe4dbdad104ccc3602 Mon Sep 17 00:00:00 2001 From: Evan You Date: Sat, 28 Oct 2017 14:11:46 +0200 Subject: [PATCH 0002/1043] update sponsors --- src/support-vuejs/index.md | 13 +++++++------ themes/vue/layout/partials/sidebar.ejs | 5 ++++- themes/vue/layout/partials/sponsors.ejs | 17 +++++++++-------- themes/vue/source/css/_sidebar.styl | 9 +++++---- themes/vue/source/images/vuejsadmin.png | Bin 0 -> 9063 bytes 5 files changed, 25 insertions(+), 19 deletions(-) create mode 100644 themes/vue/source/images/vuejsadmin.png diff --git a/src/support-vuejs/index.md b/src/support-vuejs/index.md index 3994c4ce3a..87ffbc213f 100644 --- a/src/support-vuejs/index.md +++ b/src/support-vuejs/index.md @@ -15,14 +15,17 @@ However, the amount of effort needed to maintain and develop new features for th

- + + + +

### OpenCollective Platinum ($2000/mo) ### Patreon Gold ($500/mo) @@ -50,16 +53,14 @@ However, the amount of effort needed to maintain and develop new features for th - - - - + +

diff --git a/themes/vue/layout/partials/sidebar.ejs b/themes/vue/layout/partials/sidebar.ejs index 09ac641a08..e98464f9c8 100644 --- a/themes/vue/layout/partials/sidebar.ejs +++ b/themes/vue/layout/partials/sidebar.ejs @@ -5,10 +5,13 @@
- Platinum Sponsor
+ Platinum Sponsors
+
"> Become a Sponsor diff --git a/themes/vue/layout/partials/sponsors.ejs b/themes/vue/layout/partials/sponsors.ejs index 9a7340cc57..2861f2ca31 100644 --- a/themes/vue/layout/partials/sponsors.ejs +++ b/themes/vue/layout/partials/sponsors.ejs @@ -1,7 +1,11 @@

Patreon Sponsors

 - "> + " style="width: 180px;"> + +
+ + " style="width: 180px;">

@@ -38,9 +42,6 @@ " style="width: 120px;"> - - " style="width: 100px;"> - " style="width: 65px;"> @@ -50,8 +51,8 @@ " style="width: 105px;"> - - " style="width: 100px;"> + + " style="width: 100px;">
@@ -60,9 +61,9 @@

OpenCollective Sponsors

Platinum

- +

Gold

- +
{% endraw %} -When the page loads, that element gains focus (note: autofocus doesn't work on mobile Safari). In fact, if you haven't clicked on anything else since visiting this page, the input above should be focused now. Now let's build the directive that accomplishes this: +When the page loads, that element gains focus (note: `autofocus` doesn't work on mobile Safari). In fact, if you haven't clicked on anything else since visiting this page, the input above should be focused now. Now let's build the directive that accomplishes this: ``` js -// Register a global custom directive called v-focus +// Register a global custom directive called `v-focus` Vue.directive('focus', { // When the bound element is inserted into the DOM... inserted: function (el) { @@ -76,16 +76,16 @@ We'll explore the arguments passed into these hooks (i.e. `el`, `binding`, `vnod Directive hooks are passed these arguments: -- **el**: The element the directive is bound to. This can be used to directly manipulate the DOM. -- **binding**: An object containing the following properties. - - **name**: The name of the directive, without the `v-` prefix. - - **value**: The value passed to the directive. For example in `v-my-directive="1 + 1"`, the value would be `2`. - - **oldValue**: The previous value, only available in `update` and `componentUpdated`. It is available whether or not the value has changed. - - **expression**: The expression of the binding as a string. For example in `v-my-directive="1 + 1"`, the expression would be `"1 + 1"`. - - **arg**: The argument passed to the directive, if any. For example in `v-my-directive:foo`, the arg would be `"foo"`. - - **modifiers**: An object containing modifiers, if any. For example in `v-my-directive.foo.bar`, the modifiers object would be `{ foo: true, bar: true }`. -- **vnode**: The virtual node produced by Vue's compiler. See the [VNode API](../api/#VNode-Interface) for full details. -- **oldVnode**: The previous virtual node, only available in the `update` and `componentUpdated` hooks. +- `el`: The element the directive is bound to. This can be used to directly manipulate the DOM. +- `binding`: An object containing the following properties. + - `name`: The name of the directive, without the `v-` prefix. + - `value`: The value passed to the directive. For example in `v-my-directive="1 + 1"`, the value would be `2`. + - `oldValue`: The previous value, only available in `update` and `componentUpdated`. It is available whether or not the value has changed. + - `expression`: The expression of the binding as a string. For example in `v-my-directive="1 + 1"`, the expression would be `"1 + 1"`. + - `arg`: The argument passed to the directive, if any. For example in `v-my-directive:foo`, the arg would be `"foo"`. + - `modifiers`: An object containing modifiers, if any. For example in `v-my-directive.foo.bar`, the modifiers object would be `{ foo: true, bar: true }`. +- `vnode`: The virtual node produced by Vue's compiler. See the [VNode API](../api/#VNode-Interface) for full details. +- `oldVnode`: The previous virtual node, only available in the `update` and `componentUpdated` hooks.

Apart from `el`, you should treat these arguments as read-only and never modify them. If you need to share information across hooks, it is recommended to do so through element's [dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset).

From ad3092edb8c1abcfd06cb64e50ac160bb8498cbb Mon Sep 17 00:00:00 2001 From: Pooya Parsa Date: Fri, 10 Nov 2017 03:34:08 +0330 Subject: [PATCH 0026/1043] chore(readme): Add persian translation repo (#1267) --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/README.md b/README.md index fab8c23992..4162bbabbd 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,13 @@ Spanish translation is maintained by VueJS-ES. * Translation Repo - [/vuejs-es/vuejs.org](https://github.com/vuejs-es/vuejs.org) +### Persian (Farsi) + +Persian translation is maintained by VueJS-fa. + +* Translation Repo - [/vuejs-fa/fa.vuejs.org](https://github.com/vuejs-fa/fa.vuejs.org) +* Primary maintainer - [Pooya Parsa](https://github.com/pi0) + ### Want to help with the translation? If you feel okay with translating sorta alone, you can fork the repo, create a "work-in-progress" issue to inform others that you're doing the translation, and go for it. From 2fc6cfae60f721e7128e872933cc020d093ca550 Mon Sep 17 00:00:00 2001 From: Sarah Drasner Date: Thu, 9 Nov 2017 21:04:57 -0700 Subject: [PATCH 0027/1043] Add in cookbook template (#1268) * Add in cookbook template * update cookbook template based on review comments --- src/v2/cookbook/cookbook-contributions.md | 61 +++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 src/v2/cookbook/cookbook-contributions.md diff --git a/src/v2/cookbook/cookbook-contributions.md b/src/v2/cookbook/cookbook-contributions.md new file mode 100644 index 0000000000..e3e93c5810 --- /dev/null +++ b/src/v2/cookbook/cookbook-contributions.md @@ -0,0 +1,61 @@ +--- +title: Cookbook Contributions +type: cookbook +order: 1000 +--- + +## What we're looking for + +The Cookbook gives developers examples to work off of that both cover common or interesting use cases, and also progressively explain more complex detail. Our goal is to move beyond a simple introductory example, and demonstrate concepts that are more widely applicable, as well as some caveats to the approach. + +If you're interested in contributing, please initiate collaboration by filing an issue under the tag **cookbook idea** with your concept so that we can help guide you to a successful pull request. After your idea has been approved, please follow the template below as much as possible. Some sections are required, and some are optional. Following the numerical order is strongly suggested, but not required. + +## Simple Example + +_required_ + +1. Articulate the problem in a sentence or two. +2. Explain the simplest possible solution in a sentence or two. +3. Show a small code sample. +4. Explain what this accomplishes in a sentence. + +## Details about the Value + +_required_ + +1. Address common questions that one might have while looking at the example. (Blockquotes are great for this) +2. Show examples of common missteps and how they can be avoided. +3. Show very simple code samples of good and bad patterns. +4. Discuss why this may be a compelling pattern. Links for reference are not required but encouraged. + +## Real-World Example + +_required_ + +Demonstrate the code that would power a common or interesting use case, either by: +1. Walking through a few terse examples of setup, or +2. Embedding a codepen/jsfiddle example + +If you choose to do the latter, you should still talk through what it is and does. + +## Additional Context + +_optional_ + +It's extremely helpful to write a bit about this pattern, where else it would apply, why it works well, and run through a bit of code as you do so or give people further reading materials here. + +## When To Avoid This Pattern + +_optional_ + +This section is not required, but heavily recommended. It won't make sense to write it for something very simple such as toggling classes based on state change, but for more advanced patterns like mixins it's vital. The answer to most questions about development is ["It depends!"](https://codepen.io/rachsmith/pen/YweZbG), this section embraces that. Here, we'll take an honest look at when the pattern is useful and when it should be avoided, or when something else makes more sense. + +## Alternative Patterns + +_optional, except when the section above is provided_ + +This section is required when you've provided the section above about avoidance. It's important to explore other methods so that people told that something is an antipattern in certain situations are not left wondering. In doing so, consider that the web is a big tent and that many people have different codebase structures and are solving different goals. Is the app large or small? Are they integrating Vue into an existing project, or are they building from scratch? Are their users only trying to achieve one goal or many? Is there a lot of asyncronous data? All of these concerns will impact alternative implementations. A good cookbook recipe gives developers this context. + +## Thank you + +It takes time to contribute to documentation, and if you spend the time to submit a PR this section of our docs, you do so with our gratitude. \ No newline at end of file From 43d58f00f0b66954f4736ef805c8874e5287db15 Mon Sep 17 00:00:00 2001 From: Justineo Date: Fri, 10 Nov 2017 17:30:31 +0800 Subject: [PATCH 0028/1043] add some backticks to indicate code --- src/v2/guide/events.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/v2/guide/events.md b/src/v2/guide/events.md index 1172992559..a6a75b2dd9 100644 --- a/src/v2/guide/events.md +++ b/src/v2/guide/events.md @@ -210,11 +210,11 @@ Unlike the other modifiers, which are exclusive to native DOM events, the `.once When listening for keyboard events, we often need to check for common key codes. Vue also allows adding key modifiers for `v-on` when listening for key events: ``` html - + ``` -Remembering all the keyCodes is a hassle, so Vue provides aliases for the most commonly used keys: +Remembering all the `keyCode`s is a hassle, so Vue provides aliases for the most commonly used keys: ``` html @@ -239,7 +239,7 @@ Here's the full list of key modifier aliases: You can also [define custom key modifier aliases](../api/#keyCodes) via the global `config.keyCodes` object: ``` js -// enable v-on:keyup.f1 +// enable `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112 ``` From 00a1310a14c30a9f78de157ab83cd047ff85d055 Mon Sep 17 00:00:00 2001 From: sdras Date: Fri, 10 Nov 2017 06:44:23 -0700 Subject: [PATCH 0029/1043] clarify falsy conditions for attribute description --- src/v2/guide/syntax.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index 65c84b83fe..025dac613e 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -54,6 +54,8 @@ It also works for boolean attributes - the attribute will be removed if the cond ``` +This will be removed if the value is `null`, `undefined`, or `false`. `0` and `NaN` will still be displayed. + ### Using JavaScript Expressions So far we've only been binding to simple property keys in our templates. But Vue.js actually supports the full power of JavaScript expressions inside all data bindings: From 255cf8168470959fb12482f0addd840f964a068f Mon Sep 17 00:00:00 2001 From: Chris Fritz Date: Fri, 10 Nov 2017 15:49:49 -0500 Subject: [PATCH 0030/1043] Tweak v-bind boolean example --- src/v2/guide/syntax.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index 025dac613e..ea7c09deec 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -42,19 +42,19 @@ The contents of this `div` will be replaced with the value of the `rawHtml` prop ### Attributes -Mustaches cannot be used inside HTML attributes, instead use a [v-bind directive](../api/#v-bind): +Mustaches cannot be used inside HTML attributes. Instead, use a [v-bind directive](../api/#v-bind): ``` html
``` -It also works for boolean attributes - the attribute will be removed if the condition evaluates to a falsy value: +In the case of boolean attributes, where their mere existence implies `true`, `v-bind` works a little differently. In this example: ``` html ``` -This will be removed if the value is `null`, `undefined`, or `false`. `0` and `NaN` will still be displayed. +If `isButtonDisabled` has the value of `null`, `undefined`, or `false`, the `disabled` attribute will not even be included in the rendered ` -

Look at me!

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.
``` @@ -231,7 +231,7 @@ new Vue({
-

Look at me!

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.
From adba41713516e5301035f5b2fcfc932ff5584285 Mon Sep 17 00:00:00 2001 From: Phan An Date: Mon, 13 Nov 2017 19:50:28 +0100 Subject: [PATCH 0033/1043] docs: add mustaches vs v-html example (#1277) * docs: add mustaches vs v-html example * docs: use

instead of

--- src/v2/guide/syntax.md | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md index ea7c09deec..ddd821ca44 100644 --- a/src/v2/guide/syntax.md +++ b/src/v2/guide/syntax.md @@ -33,10 +33,28 @@ You can also perform one-time interpolations that do not update on data change b The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the `v-html` directive: ``` html -
+

Using mustaches: {{ rawHtml }}

+

Using v-html directive:

``` -The contents of this `div` will be replaced with the value of the `rawHtml` property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use `v-html` to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition. +{% raw %} +
+

Using mustaches: {{ rawHtml }}

+

Using v-html directive:

+
+ +{% endraw %} + +The contents of the `span` will be replaced with the value of the `rawHtml` property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use `v-html` to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.

Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS vulnerabilities](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use HTML interpolation on trusted content and **never** on user-provided content.

From a749cd7a45b2ae4b74450794f38b554e41fb5acd Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Mon, 13 Nov 2017 19:52:23 +0100 Subject: [PATCH 0034/1043] [Doc EN]: remove `Single-file component top-level element order` from `style-guide/index.md` (#1275) * New in with + symbol Signed-off-by: Bruno Lesieur * Review of 2.5.0 doc Signed-off-by: Bruno Lesieur * Review Signed-off-by: Bruno Lesieur * Remove Single-file component top-level element order Signed-off-by: Bruno Lesieur * Just change order of template and script Signed-off-by: Bruno Lesieur --- src/v2/style-guide/index.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/v2/style-guide/index.md b/src/v2/style-guide/index.md index c368162e0b..ff1a2bb957 100644 --- a/src/v2/style-guide/index.md +++ b/src/v2/style-guide/index.md @@ -1476,15 +1476,15 @@ computed: { ### Single-file component top-level element order recommended -**[Single-file components](../guide/single-file-components.html) should always order `