You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,4 @@
1
-
# vuejs.org
1
+
# v2.vuejs.org
2
2
3
3
> 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).
Copy file name to clipboardExpand all lines: src/_posts/common-gotchas.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -15,7 +15,7 @@ Most of the time, when you change a Vue instance's data, the view updates. But t
15
15
16
16
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)`.
17
17
18
-
Further reading: [Reactivity in Depth](/guide/reactivity.html) and [Array Change Detection](http://vuejs.org/guide/list.html#Array-Change-Detection).
18
+
Further reading: [Reactivity in Depth](/guide/reactivity.html) and [Array Change Detection](/guide/list.html#Array-Change-Detection).
19
19
20
20
### When is the DOM updated?
21
21
@@ -33,6 +33,6 @@ Further reading: [Component Option Caveats](/guide/components.html#Component-Opt
33
33
34
34
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`.
35
35
36
-
Further reading: [camelCase vs. kebab-case](http://vuejs.org/guide/components.html#camelCase-vs-kebab-case).
36
+
Further reading: [camelCase vs. kebab-case](/guide/components.html#camelCase-vs-kebab-case).
37
37
38
38
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).
Copy file name to clipboardExpand all lines: src/_posts/why-no-template-url.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -13,8 +13,8 @@ First, it allows us to write our template in a separate HTML file. This gives us
13
13
14
14
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.
15
15
16
-
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.
16
+
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.
17
17
18
-
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.
18
+
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.
Copy file name to clipboardExpand all lines: src/v2/cookbook/creating-custom-scroll-directives.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@ order: 7
6
6
7
7
## Base Example
8
8
9
-
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.
9
+
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.
Copy file name to clipboardExpand all lines: src/v2/cookbook/packaging-sfc-for-npm.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -39,7 +39,7 @@ Vue already allows components to be written as a single file. Because a Single F
39
39
40
40
> "Why can't people use my `.vue` file directly? Isn't that the simplest way to share components?"
41
41
42
-
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.
42
+
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.
43
43
44
44
Properly packaging your SFC for distribution via npm enables your component to be shared in a way which is ready to use everywhere!
Copy file name to clipboardExpand all lines: src/v2/cookbook/practical-use-of-scoped-slots.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -139,7 +139,7 @@ So far, so good. With all that done, we could continue adding the other objects
139
139
140
140
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.
141
141
142
-
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.
142
+
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.
143
143
144
144
### 2. Create component that uses our initializer component.
145
145
@@ -206,7 +206,7 @@ Now, when we have the slot in the child component, we need to receive and consum
206
206
207
207
### 4. Receive exposed props in the parent component using `slot-scope` attribute.
208
208
209
-
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.
209
+
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.
210
210
211
211
Let’s de-structure this thing to get what we need.
212
212
@@ -384,4 +384,4 @@ It might be tempting to create a very complex solution based on the example, but
384
384
## Wrapping Up
385
385
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.
386
386
387
-
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.
387
+
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.
Copy file name to clipboardExpand all lines: src/v2/guide/components-edge-cases.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -163,7 +163,7 @@ In fact, you can think of dependency injection as sort of "long-range props", ex
163
163
164
164
<pclass="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 <ahref="#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 <ahref="https://github.com/vuejs/vuex">Vuex</a> instead.</p>
165
165
166
-
Learn more about dependency injection in [the API doc](https://vuejs.org/v2/api/#provide-inject).
166
+
Learn more about dependency injection in [the API doc](/v2/api/#provide-inject).
167
167
168
168
## Programmatic Event Listeners
169
169
@@ -235,7 +235,7 @@ methods: {
235
235
236
236
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.
237
237
238
-
To learn more about programmatic listeners, check out the API for [Events Instance Methods](https://vuejs.org/v2/api/#Instance-Methods-Events).
238
+
To learn more about programmatic listeners, check out the API for [Events Instance Methods](/v2/api/#Instance-Methods-Events).
239
239
240
240
<pclass="tip">Note that Vue's event system is different from the browser's <ahref="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>
241
241
@@ -363,7 +363,7 @@ Thanks to Vue's Reactivity system, it always knows when to update (if you use it
363
363
364
364
<pclass="tip">If you find yourself needing to force an update in Vue, in 99.99% of cases, you've made a mistake somewhere.</p>
365
365
366
-
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`.
366
+
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`.
367
367
368
368
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).
Copy file name to clipboardExpand all lines: src/v2/style-guide/index.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -189,7 +189,7 @@ In committed code, prop definitions should always be as detailed as possible, sp
189
189
</summary>
190
190
{% endraw %}
191
191
192
-
Detailed [prop definitions](https://vuejs.org/v2/guide/components.html#Prop-Validation) have two advantages:
192
+
Detailed [prop definitions](/v2/guide/components.html#Prop-Validation) have two advantages:
193
193
194
194
- They document the API of the component, so that it's easy to see how the component is meant to be used.
195
195
- In development, Vue will warn you if a component is ever provided incorrectly formatted props, helping you catch potential sources of error.
@@ -1925,9 +1925,9 @@ Vue.component('TodoItem', {
1925
1925
1926
1926
**[Vuex](https://github.com/vuejs/vuex) should be preferred for global state management, instead of `this.$root` or a global event bus.**
1927
1927
1928
-
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.
1928
+
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.
1929
1929
1930
-
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).
1930
+
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).
0 commit comments