Merge pull request #242 from vuejs-id/master

mandaputtra · web-flow · commit b08e866f60de · 2021-08-25T23:31:27.000+07:00
[pull] indonesian from master
diff --git a/src/.vuepress/theme/components/PageEdit.vue b/src/.vuepress/theme/components/PageEdit.vue
@@ -4,17 +4,20 @@
       <p>
         Deployed on
         <a href="https://url.netlify.com/HJ8X2mxP8">Netlify</a>.
-        <span v-if="editLink" class="edit-link">
+        <template v-if="editLink">
+          <br />
+          <span class="edit-link">
           Caught a mistake or want to contribute to the documentation?
-          <a
-            :href="editLink"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            {{ editLinkText }}
-            <OutboundLink />
-          </a>
-        </span>
+            <a
+              :href="editLink"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {{ editLinkText }}
+              <OutboundLink />
+            </a>
+          </span>
+        </template>
         <template v-if="lastUpdated" class="last-updated">
           <br />
           <span class="prefix">{{ lastUpdatedText }}:</span>
diff --git a/src/api/refs-api.md b/src/api/refs-api.md
@@ -16,7 +16,7 @@ count.value++
 console.log(count.value) // 1
 ```
 
-If an object is assigned as a ref's value, the object is made deeply reactive by the [reactive](./basic-reactivity.html#reactive) method.
+If an object is assigned as a ref's value, the object is made deeply reactive by the [reactive](./basic-reactivity.html#reactive) function.
 
 **Typing:**
 
diff --git a/src/api/sfc-style.md b/src/api/sfc-style.md
@@ -126,7 +126,7 @@ A `<style module>` tag is compiled as [CSS Modules](https://github.com/css-modul
 
 The resulting classes are hashed to avoid collision, achieving the same effect of scoping the CSS to the current component only.
 
-Refer to the [CSS Modules spec](https://github.com/css-modules/css-modules) for mode details such as [global exceptions](https://github.com/css-modules/css-modules#exceptions) and [composition](https://github.com/css-modules/css-modules#composition).
+Refer to the [CSS Modules spec](https://github.com/css-modules/css-modules) for more details such as [global exceptions](https://github.com/css-modules/css-modules#exceptions) and [composition](https://github.com/css-modules/css-modules#composition).
 
 ### Custom Inject Name
 
diff --git a/src/guide/component-attrs.md b/src/guide/component-attrs.md
@@ -18,7 +18,7 @@ app.component('date-picker', {
 })
 ```
 
-In the event we need to define the status of the date-picker component via a `data-status` property, it will be applied to the root node (i.e., `div.date-picker`).
+In the event we need to define the status of the date-picker component via a `data-status` attribute, it will be applied to the root node (i.e., `div.date-picker`).
 
 ```html
 <!-- Date-picker component with a non-prop attribute -->
diff --git a/src/guide/component-registration.md b/src/guide/component-registration.md
@@ -27,7 +27,7 @@ You can see other recommendations for component names in the [Style Guide](../st
 
 ### Name Casing
 
-When defining components in a string template or a single-file component, you have two options when defining component names:
+When defining components in a string template or a single-file component, you have two options for naming them:
 
 #### With kebab-case
 
diff --git a/src/guide/installation.md b/src/guide/installation.md
@@ -97,7 +97,12 @@ Proyek Vue dapat diatur secara cepat dengan Vite dengan menjalankan perintah ber
 Dengan npm:
 
 ```bash
-$ npm init vite <project-name> -- --template vue
+# npm 6.x
+$ npm init vite@latest <project-name> --template vue
+
+# npm 7+, extra double-dash is needed:
+$ npm init vite@latest <project-name> -- --template vue
+
 $ cd <project-name>
 $ npm install
 $ npm run dev
diff --git a/src/guide/list.md b/src/guide/list.md
@@ -127,7 +127,7 @@ To give Vue a hint so that it can track each node's identity, and thus reuse and
 </div>
 ```
 
-It is recommended to provide a `key` attribute with `v-for` whenever possible, unless the iterated DOM content is simple, or you are intentionally relying on the default behavior for performance gains.
+[It is recommended](/style-guide/#keyed-v-for-essential) to provide a `key` attribute with `v-for` whenever possible, unless the iterated DOM content is simple, or you are intentionally relying on the default behavior for performance gains.
 
 Since it's a generic mechanism for Vue to identify nodes, the `key` also has other uses that are not specifically tied to `v-for`, as we will see later in the guide.
 
diff --git a/src/guide/migration/custom-elements-interop.md b/src/guide/migration/custom-elements-interop.md
@@ -9,7 +9,7 @@ badges:
 
 - **MERUSAK:** Pengecekan untuk mengetahui jika _tag_ HTML harus di perlakukan seperti elemen kustom sekarang dilakukan pada saat kompilasi templat, dan harus dilakukan melalui opsi kompiler bukan pada konfigurasi _runtime_
 - **MERUSAK** Penggunaan properti khusus `is` dibatasi untuk _tag_ `<component>` saja.
-- **BARU** Terdapat _directive_ baru `v-is` untuk mendukung kasus penggunaan pada Vue versi 2.x dimana `is` digunakan pada elemen bawaan untuk mengatasi masalah batasan penguraian pada elemen bawaan HTML.
+- **NEW:** To support 2.x use cases where `is` was used on native elements to work around native HTML parsing restrictions, prefix the value with `vue:` to resolve it as a Vue component.
 
 ## Elemen Kustom Otonom
 
diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md
@@ -53,8 +53,8 @@ Beberapa fitur baru yang akan membuat Anda tertarik di Vue 3 termasuk:
 - [Fragments](/guide/migration/fragments.html)
 - [Emits Component Option](/guide/component-custom-events.html)
 - [`createRenderer` API from `@vue/runtime-core`](https://github.com/vuejs/vue-next/tree/master/packages/runtime-core) to create custom renderers
-- [SFC Composition API Syntax Sugar (`<script setup>`)](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md) <Badge text="experimental" type="warning" />
-- [SFC State-driven CSS Variables (`v-bind` in `<style>`)](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0043-sfc-style-variables.md) <Badge text="experimental" type="warning" />
+- [SFC Composition API Syntax Sugar (`<script setup>`)](/api/sfc-script-setup.html)
+- [SFC State-driven CSS Variables (`v-bind` in `<style>`)](/api/sfc-style.html#state-driven-dynamic-css)
 - [SFC `<style scoped>` can now include global rules or rules that target only slotted content](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md)
 - [Suspense](/guide/migration/suspense.html) <Badge text="experimental" type="warning" />
 
diff --git a/src/guide/migration/v-bind.md b/src/guide/migration/v-bind.md
@@ -12,11 +12,11 @@ badges:
 
 ## Introduction
 
-When dynamically binding attributes on an element, a common scenario involves using both the `v-bind="object"` syntax as well as individual properties in the same element. However, this raises questions as far as the priority of merging.
+When dynamically binding attributes on an element, a common scenario involves using both the `v-bind="object"` syntax as well as individual attributes in the same element. However, this raises questions as far as the priority of merging.
 
 ## 2.x Syntax
 
-In 2.x, if an element has both `v-bind="object"` and an identical individual property defined, the individual property would always overwrite bindings in the `object`.
+In 2.x, if an element has both `v-bind="object"` and an identical individual attribute defined, the individual attribute would always overwrite bindings in the `object`.
 
 ```html
 <!-- template -->
@@ -27,7 +27,7 @@ In 2.x, if an element has both `v-bind="object"` and an identical individual pro
 
 ## 3.x Syntax
 
-In 3x, if an element has both `v-bind="object"` and an identical individual property defined, the order of how the bindings are declared determines how they are merged. In other words, rather than assuming developers want the individual property to always override what is defined in the `object`, developers now have more control over the desired merging behavior.
+In 3x, if an element has both `v-bind="object"` and an identical individual attribute defined, the order of how the bindings are declared determines how they are merged. In other words, rather than assuming developers want the individual attribute to always override what is defined in the `object`, developers now have more control over the desired merging behavior.
 
 ```html
 <!-- template -->
@@ -43,6 +43,6 @@ In 3x, if an element has both `v-bind="object"` and an identical individual prop
 
 ## Migration Strategy
 
-If you are relying on this override functionality for `v-bind`, we currently recommend ensuring that your `v-bind` attribute is defined before individual properties.
+If you are relying on this override functionality for `v-bind`, we currently recommend ensuring that your `v-bind` attribute is defined before individual attributes.
 
 [Migration build flag: `COMPILER_V_BIND_OBJECT_ORDER`](migration-build.html#compat-configuration)
diff --git a/src/guide/plugins.md b/src/guide/plugins.md
@@ -6,7 +6,7 @@ There is no strictly defined scope for a plugin, but common scenarios where plug
 
 1. Add some global methods or properties, e.g. [vue-custom-element](https://github.com/karol-f/vue-custom-element).
 
-2. Add one or more global assets: directives/filters/transitions etc. (e.g. [vue-touch](https://github.com/vuejs/vue-touch)).
+2. Add one or more global assets: directives/transitions etc. (e.g. [vue-touch](https://github.com/vuejs/vue-touch)).
 
 3. Add some component options by global mixin (e.g. [vue-router](https://github.com/vuejs/vue-router)).
 
diff --git a/src/guide/reactivity-computed-watchers.md b/src/guide/reactivity-computed-watchers.md
@@ -4,7 +4,7 @@
 
 ## Computed values
 
-Sometimes we need state that depends on other state - in Vue this is handled with component [computed properties](computed.html#computed-properties). To directly create a computed value, we can use the `computed` method: it takes a getter function and returns an immutable reactive [ref](reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs) object for the returned value from the getter.
+Sometimes we need state that depends on other state - in Vue this is handled with component [computed properties](computed.html#computed-properties). To directly create a computed value, we can use the `computed` function: it takes a getter function and returns an immutable reactive [ref](reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs) object for the returned value from the getter.
 
 ```js
 const count = ref(1)
@@ -62,7 +62,7 @@ count.value++
 
 ## `watchEffect`
 
-To apply and _automatically re-apply_ a side effect based on reactive state, we can use the `watchEffect` method. It runs a function immediately while reactively tracking its dependencies and re-runs it whenever the dependencies are changed.
+To apply and _automatically re-apply_ a side effect based on reactive state, we can use the `watchEffect` function. It runs a function immediately while reactively tracking its dependencies and re-runs it whenever the dependencies are changed.
 
 ```js
 const count = ref(0)
@@ -245,7 +245,7 @@ firstName.value = 'John' // logs: ["John", ""] ["", ""]
 lastName.value = 'Smith' // logs: ["John", "Smith"] ["John", ""]
 ```
 
-However, if you are changing both watched sources simultaneously in the same method, the watcher will be executed only once:
+However, if you are changing both watched sources simultaneously in the same function, the watcher will be executed only once:
 
 ```js{9-13}
 setup() {
diff --git a/src/guide/reactivity-fundamentals.md b/src/guide/reactivity-fundamentals.md
@@ -74,7 +74,7 @@ When a ref is returned as a property on the render context (the object returned
 ```
 
 :::tip
-If you don't need to access the actual object instance, you can wrap it in a `reactive`:
+If you don't want to access the actual object instance, you can wrap it in a `reactive`:
 
 ```js
 nested: reactive({
diff --git a/src/guide/transitions-list.md b/src/guide/transitions-list.md
@@ -8,7 +8,7 @@ So far, we've managed transitions for:
 So what about for when we have a whole list of items we want to render simultaneously, for example with `v-for`? In this case, we'll use the `<transition-group>` component. Before we dive into an example though, there are a few things that are important to know about this component:
 
 - By default, it doesn't render a wrapper element, but you can specify an element to be rendered with the `tag` attribute.
-- [Transition modes](/guide/transitions-enterleave#transition-modes) are not available, because we are no longer alternating between mutually exclusive elements.
+- [Transition modes](/guide/transitions-enterleave.html#transition-modes) are not available, because we are no longer alternating between mutually exclusive elements.
 - Elements inside are **always required** to have a unique `key` attribute.
 - CSS transition classes will be applied to inner elements and not to the group/container itself.
 
diff --git a/src/guide/web-components.md b/src/guide/web-components.md
@@ -73,7 +73,7 @@ The primary benefit of custom elements is that they can be used with any framewo
 
 ### defineCustomElement
 
-Vue supports creating custom elements using exactly the same Vue component APIs via the [`defineCustomElment`](/api/global-api.html#definecustomelement) method. The method accepts the same argument as [`defineComponent`](/api/global-api.html#definecomponent), but instead returns a custom element constructor that extends `HTMLElement`:
+Vue supports creating custom elements using exactly the same Vue component APIs via the [`defineCustomElement`](/api/global-api.html#definecustomelement) method. The method accepts the same argument as [`defineComponent`](/api/global-api.html#definecomponent), but instead returns a custom element constructor that extends `HTMLElement`:
 
 ```html
 <my-vue-element></my-vue-element>
@@ -209,8 +209,8 @@ const MyBar = defineCustomElement(Bar)
 export { MyFoo, MyBar }
 
 export function register() {
-  customElements.register('my-foo', MyFoo)
-  customElements.register('my-bar', MyBar)
+  customElements.define('my-foo', MyFoo)
+  customElements.define('my-bar', MyBar)
 }
 ```
 
diff --git a/yarn.lock b/yarn.lock
@@ -5787,9 +5787,9 @@ path-key@^2.0.0, path-key@^2.0.1:
   integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
 
 path-parse@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
-  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
 path-to-regexp@0.1.7:
   version "0.1.7"
@@ -7736,9 +7736,9 @@ url-parse-lax@^3.0.0:
     prepend-http "^2.0.0"
 
 url-parse@^1.4.3:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.1.tgz#d5fa9890af8a5e1f274a2c98376510f6425f6e3b"
-  integrity sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.3.tgz#71c1303d38fb6639ade183c2992c8cc0686df862"
+  integrity sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==
   dependencies:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
