Skip to content

Fix some text and links to the old domain #2957

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 13, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# vuejs.org
# 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](https://github.com/vuejs/docs-next).

Expand Down
4 changes: 2 additions & 2 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ language:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://vuejs.org
url: https://v2.vuejs.org
root: /
permalink: :year/:month/:day/:title/
tag_dir: tags
Expand Down Expand Up @@ -144,7 +144,7 @@ markdown:
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repository: [email protected]:vuejs/vuejs.org.git
repository: [email protected]:vuejs/v2.vuejs.org.git

feed:
type: atom
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "vuejs.org",
"name": "v2.vuejs.org",
"private": true,
"hexo": {
"version": "3.8.0"
Expand Down
4 changes: 2 additions & 2 deletions src/_posts/common-gotchas.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ Most of the time, when you change a Vue instance's data, the view updates. But t

2. When you modify an Array by directly setting an index (e.g. `arr[0] = val`) or modifying its `length` property. Similarly, Vue.js cannot pickup these changes. Always modify arrays by using an Array instance method, or replacing it entirely. Vue provides a convenience method `arr.$set(index, value)` which is syntax sugar for `arr.splice(index, 1, value)`.

Further reading: [Reactivity in Depth](/guide/reactivity.html) and [Array Change Detection](http://vuejs.org/guide/list.html#Array-Change-Detection).
Further reading: [Reactivity in Depth](/guide/reactivity.html) and [Array Change Detection](/guide/list.html#Array-Change-Detection).

### When is the DOM updated?

Expand All @@ -33,6 +33,6 @@ Further reading: [Component Option Caveats](/guide/components.html#Component-Opt

All Vue.js templates are valid, parsable HTML markup, and Vue.js relies on spec-compliant parsers to process its templates. However, as specified in the standard, HTML is case-insensitive when matching tag and attribute names. This means camelCase attributes like `:myProp="123"` will be matched as `:myprop="123"`. As a rule of thumb, you should use camelCase in JavaScript and kebab-case in templates. For example a prop defined in JavaScript as `myProp` should be bound in templates as `:my-prop`.

Further reading: [camelCase vs. kebab-case](http://vuejs.org/guide/components.html#camelCase-vs-kebab-case).
Further reading: [camelCase vs. kebab-case](/guide/components.html#camelCase-vs-kebab-case).

We are also discussing the possibility of eliminating this inconsistency by resolving props and components in a case-insensitive manner. Join the conversation [here](https://github.com/vuejs/vue/issues/2308).
4 changes: 2 additions & 2 deletions src/_posts/why-no-template-url.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ First, it allows us to write our template in a separate HTML file. This gives us

Second, because `templateURL` loads the template via Ajax at runtime, you don't need a build step in order to split up your files. This is convenient during development, but comes at a serious cost when you want to deploy it to production. Before HTTP/2 is universally supported, the number of HTTP requests is still probably the most critical factor in your app's initial load performance. Now imagine you use `templateURL` for every component in your app - the browser needs to perform dozens of HTTP requests before even being able to display anything! In case you don't know, most browsers limit the number of parallel requests it can perform to a single server. When you exceed that limit, your app's initial rendering will suffer for every extra round trip the browser has to wait for. Sure, there are build tools that can help you pre-register all those templates in `$templateCache` - but that shows us a build step is, in fact, inevitable for any serious frontend development.

So, without `templateURL`, how do we deal with the development experience problem? Writing templates as inline JavaScript strings is terrible, faking templates with `<script type="x/template">` also feels like a hack. Well, maybe it's time to up the game a bit and use a proper module bundler like [Webpack](http://webpack.github.io/) or [Browserify](http://browserify.org/). It might seem daunting if you've never dealt with them before, but trust me it's worth it to take the leap. Proper modularization is a necessity if you want to build anything large and maintainable. More importantly, you get to write your [Vue components in a single file](http://vuejs.org/guide/single-file-components.html), with proper syntax highlighting and the extra benefits of custom pre-processors, hot-reloading, ES2015 by default, autoprefixing and scoped CSS, which makes the development experience 10 times better.
So, without `templateURL`, how do we deal with the development experience problem? Writing templates as inline JavaScript strings is terrible, faking templates with `<script type="x/template">` also feels like a hack. Well, maybe it's time to up the game a bit and use a proper module bundler like [Webpack](http://webpack.github.io/) or [Browserify](http://browserify.org/). It might seem daunting if you've never dealt with them before, but trust me it's worth it to take the leap. Proper modularization is a necessity if you want to build anything large and maintainable. More importantly, you get to write your [Vue components in a single file](/guide/single-file-components.html), with proper syntax highlighting and the extra benefits of custom pre-processors, hot-reloading, ES2015 by default, autoprefixing and scoped CSS, which makes the development experience 10 times better.

Finally, Vue does allow you to [lazy load your components](http://vuejs.org/guide/components.html#Async-Components), and with Webpack it is trivially easy. Although this is only a concern when your initial bundle is so large that you are better off splitting it apart.
Finally, Vue does allow you to [lazy load your components](/guide/components.html#Async-Components), and with Webpack it is trivially easy. Although this is only a concern when your initial bundle is so large that you are better off splitting it apart.

Think in components, not templates.
2 changes: 1 addition & 1 deletion src/v2/cookbook/creating-custom-scroll-directives.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ order: 7

## Base Example

There are many times that we might want to add a bit of behavior, especially animation, to a scroll event on a site. There are many ways to do so, but the path with the least amount of code and dependencies is perhaps to use a [custom directive](https://vuejs.org/v2/guide/custom-directive.html) to create a hook for anything that fires off a particular scroll event.
There are many times that we might want to add a bit of behavior, especially animation, to a scroll event on a site. There are many ways to do so, but the path with the least amount of code and dependencies is perhaps to use a [custom directive](/v2/guide/custom-directive.html) to create a hook for anything that fires off a particular scroll event.

```js
Vue.directive('scroll', {
Expand Down
2 changes: 1 addition & 1 deletion src/v2/cookbook/packaging-sfc-for-npm.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ Vue already allows components to be written as a single file. Because a Single F

> "Why can't people use my `.vue` file directly? Isn't that the simplest way to share components?"

It's true, you can share `.vue` files directly, and anyone using a [Vue build](https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds) containing the Vue compiler can consume it immediately. Also, the SSR build uses string concatenation as an optimization, so the `.vue` file might be preferred in this scenario (see [Packaging Components for npm > SSR Usage](#SSR-Usage) for details). However, this excludes anyone who wishes to use the component directly in a browser via `<script>` tag, anyone who uses a runtime-only build, or build processes which don't understand what to do with `.vue` files.
It's true, you can share `.vue` files directly, and anyone using a [Vue build](/v2/guide/installation.html#Explanation-of-Different-Builds) containing the Vue compiler can consume it immediately. Also, the SSR build uses string concatenation as an optimization, so the `.vue` file might be preferred in this scenario (see [Packaging Components for npm > SSR Usage](#SSR-Usage) for details). However, this excludes anyone who wishes to use the component directly in a browser via `<script>` tag, anyone who uses a runtime-only build, or build processes which don't understand what to do with `.vue` files.

Properly packaging your SFC for distribution via npm enables your component to be shared in a way which is ready to use everywhere!

Expand Down
6 changes: 3 additions & 3 deletions src/v2/cookbook/practical-use-of-scoped-slots.md
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ So far, so good. With all that done, we could continue adding the other objects

But, we want to use our `GoogleMapLoader` component only as a loader that prepares the map — we don’t want to render anything on it.

To achieve that, we need to allow the parent component that will use our `GoogleMapLoader` to access `this.google` and `this.map` that are set inside the `GoogleMapLoader` component. That’s where [scoped slots](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots) really shine. Scoped slots allow us to expose the properties set in a child component to the parent component. It may sound like Inception, but bear with me one more minute as we break that down further.
To achieve that, we need to allow the parent component that will use our `GoogleMapLoader` to access `this.google` and `this.map` that are set inside the `GoogleMapLoader` component. That’s where [scoped slots](/v2/guide/components-slots.html#Scoped-Slots) really shine. Scoped slots allow us to expose the properties set in a child component to the parent component. It may sound like Inception, but bear with me one more minute as we break that down further.

### 2. Create component that uses our initializer component.

Expand Down Expand Up @@ -206,7 +206,7 @@ Now, when we have the slot in the child component, we need to receive and consum

### 4. Receive exposed props in the parent component using `slot-scope` attribute.

To receive the props in the parent component, we declare a template element and use the `slot-scope` attribute. This attribute has access to the object carrying all the props exposed from the child component. We can grab the whole object or we can [de-structure that object](https://vuejs.org/v2/guide/components-slots.html#Destructuring-slot-scope) and only what we need.
To receive the props in the parent component, we declare a template element and use the `slot-scope` attribute. This attribute has access to the object carrying all the props exposed from the child component. We can grab the whole object or we can [de-structure that object](/v2/guide/components-slots.html#Destructuring-slot-scope) and only what we need.

Let’s de-structure this thing to get what we need.

Expand Down Expand Up @@ -384,4 +384,4 @@ It might be tempting to create a very complex solution based on the example, but
## Wrapping Up
That's it. With all those bits and pieces created we can now re-use the `GoogleMapLoader` component as a base for all our maps by passing different templates to each one of them. Imagine that you need to create another map with different Markers or just Markers without Polylines. By using the above pattern it becomes very easy as we just need to pass different content to the `GoogleMapLoader` component.

This pattern is not strictly connected to Google Maps; it can be used with any library to set the base component and expose the library's API that might be then used in the component that summoned the base component.
This pattern is not strictly connected to Google Maps; it can be used with any library to set the base component and expose the library's API that might be then used in the component that summoned the base component.
4 changes: 2 additions & 2 deletions src/v2/examples/vue-20-todomvc/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ <h1>todos</h1>
},

// computed properties
// http://vuejs.org/guide/computed.html
// http://v2.vuejs.org/guide/computed.html
computed: {
filteredTodos: function() {
return filters[this.visibility](this.todos);
Expand Down Expand Up @@ -227,7 +227,7 @@ <h1>todos</h1>

// a custom directive to wait for the DOM to be updated
// before focusing on the input field.
// http://vuejs.org/guide/custom-directive.html
// http://v2.vuejs.org/guide/custom-directive.html
directives: {
"todo-focus": function(el, binding) {
if (binding.value) {
Expand Down
6 changes: 3 additions & 3 deletions src/v2/guide/components-edge-cases.md
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ In fact, you can think of dependency injection as sort of "long-range props", ex

<p class="tip">However, there are downsides to dependency injection. It couples components in your application to the way they're currently organized, making refactoring more difficult. Provided properties are also not reactive. This is by design, because using them to create a central data store scales just as poorly as <a href="#Accessing-the-Root-Instance">using <code>$root</code></a> for the same purpose. If the properties you want to share are specific to your app, rather than generic, or if you ever want to update provided data inside ancestors, then that's a good sign that you probably need a real state management solution like <a href="https://github.com/vuejs/vuex">Vuex</a> instead.</p>

Learn more about dependency injection in [the API doc](https://vuejs.org/v2/api/#provide-inject).
Learn more about dependency injection in [the API doc](/v2/api/#provide-inject).

## Programmatic Event Listeners

Expand Down Expand Up @@ -235,7 +235,7 @@ methods: {

See [this example](https://codesandbox.io/s/github/vuejs/v2.vuejs.org/tree/master/src/v2/examples/vue-20-programmatic-event-listeners) for the full code. Note, however, that if you find yourself having to do a lot of setup and cleanup within a single component, the best solution will usually be to create more modular components. In this case, we'd recommend creating a reusable `<input-datepicker>` component.

To learn more about programmatic listeners, check out the API for [Events Instance Methods](https://vuejs.org/v2/api/#Instance-Methods-Events).
To learn more about programmatic listeners, check out the API for [Events Instance Methods](/v2/api/#Instance-Methods-Events).

<p class="tip">Note that Vue's event system is different from the browser's <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget">EventTarget API</a>. Though they work similarly, <code>$emit</code>, <code>$on</code>, and <code>$off</code> are <strong>not</strong> aliases for <code>dispatchEvent</code>, <code>addEventListener</code>, and <code>removeEventListener</code>.</p>

Expand Down Expand Up @@ -363,7 +363,7 @@ Thanks to Vue's Reactivity system, it always knows when to update (if you use it

<p class="tip">If you find yourself needing to force an update in Vue, in 99.99% of cases, you've made a mistake somewhere.</p>

You may not have accounted for change detection caveats [with arrays](https://vuejs.org/v2/guide/list.html#Caveats) or [objects](https://vuejs.org/v2/guide/list.html#Object-Change-Detection-Caveats), or you may be relying on state that isn't tracked by Vue's reactivity system, e.g. with `data`.
You may not have accounted for change detection caveats [with arrays](/v2/guide/list.html#Caveats) or [objects](/v2/guide/list.html#Object-Change-Detection-Caveats), or you may be relying on state that isn't tracked by Vue's reactivity system, e.g. with `data`.

However, if you've ruled out the above and find yourself in this extremely rare situation of having to manually force an update, you can do so with [`$forceUpdate`](../api/#vm-forceUpdate).

Expand Down
2 changes: 1 addition & 1 deletion src/v2/guide/list.md
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ Since it's a generic mechanism for Vue to identify nodes, the `key` also has oth

<p class="tip">Don't use non-primitive values like objects and arrays as `v-for` keys. Use string or numeric values instead.</p>

For detailed usage of the `key` attribute, please see the [`key` API documentation](https://vuejs.org/v2/api/#key).
For detailed usage of the `key` attribute, please see the [`key` API documentation](/v2/api/#key).

## Array Change Detection

Expand Down
2 changes: 1 addition & 1 deletion src/v2/guide/reactivity.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ Vue.set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem, 1, newValue)
```

You can also use the [`vm.$set`](https://vuejs.org/v2/api/#vm-set) instance method, which is an alias for the global `Vue.set`:
You can also use the [`vm.$set`](/v2/api/#vm-set) instance method, which is an alias for the global `Vue.set`:

``` js
vm.$set(vm.items, indexOfItem, newValue)
Expand Down
2 changes: 1 addition & 1 deletion src/v2/guide/testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ Vue Test Utils is the official low-level component testing library that was writ

- [Official Vue Test Utils Documentation](https://vue-test-utils.vuejs.org)
- [Vue Testing Handbook](https://lmiller1990.github.io/vue-testing-handbook/#what-is-this-guide) by Lachlan Miller
- [Cookbook: Unit Testing Vue Components](https://vuejs.org/v2/cookbook/unit-testing-vue-components.html)
- [Cookbook: Unit Testing Vue Components](/v2/cookbook/unit-testing-vue-components.html)

## End-to-End (E2E) Testing

Expand Down
6 changes: 3 additions & 3 deletions src/v2/style-guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ In committed code, prop definitions should always be as detailed as possible, sp
</summary>
{% endraw %}

Detailed [prop definitions](https://vuejs.org/v2/guide/components.html#Prop-Validation) have two advantages:
Detailed [prop definitions](/v2/guide/components.html#Prop-Validation) have two advantages:

- They document the API of the component, so that it's easy to see how the component is meant to be used.
- In development, Vue will warn you if a component is ever provided incorrectly formatted props, helping you catch potential sources of error.
Expand Down Expand Up @@ -1925,9 +1925,9 @@ Vue.component('TodoItem', {

**[Vuex](https://github.com/vuejs/vuex) should be preferred for global state management, instead of `this.$root` or a global event bus.**

Managing state on `this.$root` and/or using a [global event bus](https://vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replaced) can be convenient for very simple cases, but it is not appropriate for most applications.
Managing state on `this.$root` and/or using a [global event bus](/v2/guide/migration.html#dispatch-and-broadcast-replaced) can be convenient for very simple cases, but it is not appropriate for most applications.

Vuex is the [official flux-like implementation](https://vuejs.org/v2/guide/state-management.html#Official-Flux-Like-Implementation) for Vue, and offers not only a central place to manage state, but also tools for organizing, tracking, and debugging state changes. It integrates well in the Vue ecosystem (including full [Vue DevTools](https://vuejs.org/v2/guide/installation.html#Vue-Devtools) support).
Vuex is the [official flux-like implementation](/v2/guide/state-management.html#Official-Flux-Like-Implementation) for Vue, and offers not only a central place to manage state, but also tools for organizing, tracking, and debugging state changes. It integrates well in the Vue ecosystem (including full [Vue DevTools](/v2/guide/installation.html#Vue-Devtools) support).

{% raw %}</details>{% endraw %}

Expand Down