2020年10月13日20:53:27

Author: RegExpRegExp

src/.vuepress/theme/styles/index.styl

@@ -17,6 +17,9 @@ body
   font-size 16px
   color $textColor
 
+p
+  white-space pre-line
+  
 .page
   padding-left $sidebarWidth
 

src/guide/component-basics.md

@@ -1,4 +1,4 @@
-# Components Basics
+# Components Basics(组件的基本知识)
 
 ## Base Example
 
@@ -23,10 +23,16 @@ app.component('button-counter', {
 ```
 
 ::: info
-We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template. You can find more information about them [in this section](single-file-component.html).
+We're showing you a simple example here, but in a typical Vue application we use Single File Components instead of a string template.
+我们在这里向您展示了一个简单的示例，但是在一个典型的Vue应用程序中，我们使用单个文件组件而不是字符串模板。
+You can find more information about them [in this section](single-file-component.html).
+您可以在[本节](single-file-component.html)找到更多关于它们的信息。
 :::
 
-Components are reusable instances with a name: in this case, `<button-counter>`. We can use this component as a custom element inside a root instance:
+Components are reusable instances with a name: in this case, `<button-counter>`.
+组件是具有名称的可重用实例:在本例中为` <button-counter> `。
+We can use this component as a custom element inside a root instance:
+我们可以在根实例中使用这个组件作为自定义元素:
 
 ```html
 <div id="components-demo">

src/guide/component-custom-events.md

@@ -1,31 +1,41 @@
-# Custom Events
-
-> This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components.
-
+# Custom Events(自定义事件)
+> This page assumes you've already read the [Components Basics](component-basics.md).
+>本页假设您已经阅读了[Components Basics](component-basic .md)。
+Read that first if you are new to components.
+如果您对组件不熟悉，请先阅读它。
 ## Event Names
-
-Unlike components and props, event names don't provide any automatic case transformation. Instead, the name of an emitted event must exactly match the name used to listen to that event. For example, if emitting a camelCased event name:
+# #事件名称
+Unlike components and props, event names don't provide any automatic case transformation.
+与组件和道具不同，事件名不提供任何自动案例转换。
+Instead, the name of an emitted event must exactly match the name used to listen to that event.
+相反，所发出事件的名称必须与用于侦听该事件的名称完全匹配。
+For example, if emitting a camelCased event name:
+例如，如果发送驼峰大小写事件名:
 
 ```js
 this.$emit('myEvent')
 ```
-
 Listening to the kebab-cased version will have no effect:
+监听(短横线隔开式) 命名的版本将没有任何效果:
 
 ```html
 <!-- Won't work -->
 <my-component @my-event="doSomething"></my-component>
 ```
 
-Since event names will never be used as variable or property names in JavaScript, there is no reason to use camelCase or PascalCase. Additionally, `v-on` event listeners inside DOM templates will be automatically transformed to lowercase (due to HTML's case-insensitivity), so `@myEvent` would become `@myevent` -- making `myEvent` impossible to listen to.
+Since event names will never be used as variable or property names in JavaScript, there is no reason to use camelCase or PascalCase.
+因为在JavaScript中事件名永远不会用作变量名或属性名，所以没有理由使用camelCase或PascalCase。
+Additionally, `v-on` event listeners inside DOM templates will be automatically transformed to lowercase (due to HTML's case-insensitivity), so `@myEvent` would become `@myevent` -- making `myEvent` impossible to listen to
+此外，DOM模板中的“v-on”事件监听器将自动转换为小写(由于HTML的大小写不敏感)，因此“@myEvent”将变成“@myEvent”——使“myEvent”不可能被监听.
 
 For these reasons, we recommend you **always use kebab-case for event names**.
-
+由于这些原因，我们建议您**始终对事件名称使用(短横线隔开式)**。
 ## Defining Custom Events
 
 <VideoLesson href="https://vueschool.io/lessons/defining-custom-events-emits?friend=vuejs" title="Learn how to define which events a component can emit with Vue School">Watch a free video about Defining Custom Events on Vue School</VideoLesson>
 
 Emitted events can be defined on the component via the `emits` option.
+可以通过“emit”选项在组件上定义所发出的事件。
 
 ```js
 app.component('custom-form', {
@@ -34,16 +44,19 @@ app.component('custom-form', {
 ```
 
 When a native event (e.g., `click`) is defined in the `emits` option, the component event will be used __instead__ of a native event listener.
-
+当原生事件(例如“click”)在“emit”选项中定义时，组件事件将被剩余使用，而不是原生事件侦听器。
 ::: tip
+:::提示
 It is recommended to define all emitted events in order to better document how a component should work.
+建议定义所有发出的事件，以便更好地记录组件应该如何工作。
+:::
 :::
-
 ### Validate Emitted Events
-
+###验证发出的事件
 Similar to prop type validation, an emitted event can be validated if it is defined with the Object syntax instead of the Array syntax.
-
+与prop类型验证类似，如果使用对象语法而不是数组语法定义发出的事件，则可以对其进行验证。
 To add validation, the event is assigned a function that receives the arguments passed to the `$emit` call and returns a boolean to indicate whether the event is valid or not.
+要添加验证，将为事件分配一个函数，该函数接收传递给' $emit '调用的参数，并返回一个布尔值来指示事件是否有效。
 
 ```js
 app.component('custom-form', {

src/guide/component-props.md

@@ -1,16 +1,20 @@
-# Props
+# Props(属性)
 
 > This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components.
 
 ## Prop Types
 
 So far, we've only seen props listed as an array of strings:
+到目前为止，我们只看到props以字符串数组的形式列出:
 
 ```js
 props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
 ```
 
-Usually though, you'll want every prop to be a specific type of value. In these cases, you can list props as an object, where the properties' names and values contain the prop names and types, respectively:
+Usually though, you'll want every prop to be a specific type of value.
+通常情况下，你会希望每个props都有特定的价值类型。
+In these cases, you can list props as an object, where the properties' names and values contain the prop names and types, respectively:
+在这些情况下，你可以将props作为一个对象列出，其中属性的名称和值分别包含了props的名称和类型:
 
 ```js
 props: {
@@ -24,17 +28,21 @@ props: {
 }
 ```
 
-This not only documents your component, but will also warn users in the browser's JavaScript console if they pass the wrong type. You'll learn much more about [type checks and other prop validations](#prop-validation) further down this page.
-
+This not only documents your component, but will also warn users in the browser's JavaScript console if they pass the wrong type.
+这不仅记录了您的组件，而且还会在浏览器的JavaScript控制台警告用户，如果他们传递了错误的类型。
+You'll learn much more about [type checks and other prop validations](#prop-validation) further down this page.
+在本页的后面，您将了解更多关于[类型检查和其他prop验证](#prop-validation)的信息。
 ## Passing Static or Dynamic Props
-
+##传递静态或动态props
 So far, you've seen props passed a static value, like in:
+到目前为止，您已经看到了props传递静态值，如:
 
 ```html
 <blog-post title="My journey with Vue"></blog-post>
 ```
 
 You've also seen props assigned dynamically with `v-bind` or its shortcut, the `:` character, such as in:
+你也看到了使用“v-bind”或它的快捷方式“:”字符来动态分配props，例如:
 
 ```html
 <!-- Dynamically assign the value of a variable -->
@@ -45,6 +53,7 @@ You've also seen props assigned dynamically with `v-bind` or its shortcut, the `
 ```
 
 In the two examples above, we happen to pass string values, but _any_ type of value can actually be passed to a prop.
+在上面的两个示例中，我们碰巧传递了字符串值，但是_any_类型的值实际上可以传递给prop。
 
 ### Passing a Number
 
@@ -99,8 +108,11 @@ In the two examples above, we happen to pass string values, but _any_ type of va
 ```
 
 ### Passing the Properties of an Object
-
-If you want to pass all the properties of an object as props, you can use `v-bind` without an argument (`v-bind` instead of `:prop-name`). For example, given a `post` object:
+传递对象的属性
+If you want to pass all the properties of an object as props, you can use `v-bind` without an argument (`v-bind` instead of `:prop-name`).
+如果您想将一个对象的所有属性作为props传递，您可以使用“v-bind”而不带参数(“v-bind”而不是“:prop-name”)。
+For example, given a `post` object:
+例如，给定一个“post”对象:
 
 ```js
 post: {
@@ -122,14 +134,27 @@ Will be equivalent to:
 ```
 
 ## One-Way Data Flow
-
-All props form a **one-way-down binding** between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent's state, which can make your app's data flow harder to understand.
-
-In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should **not** attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console.
-
+单向数据流
+All props form a **one-way-down binding** between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around.
+所有的props都在子属性和父属性之间形成了一个**单向绑定**:当父属性更新时，它将流向子属性，而不是反过来。
+This prevents child components from accidentally mutating the parent's state, which can make your app's data flow harder to understand.
+这可以防止子组件意外地改变父组件的状态，这会使应用程序的数据流更难理解。
+In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value.
+此外，每次更新父组件时，子组件中的所有props都将使用最新值刷新。
+This means you should **not** attempt to mutate a prop inside a child component.
+这意味着您不应该尝试在子组件内修改prop。
+If you do, Vue will warn you in the console.
+如果您这样做，Vue将在控制台中警告您。
 There are usually two cases where it's tempting to mutate a prop:
-
-1. **The prop is used to pass in an initial value; the child component wants to use it as a local data property afterwards.** In this case, it's best to define a local data property that uses the prop as its initial value:
+通常有两种情况下，它是诱人的变异一种props:
+1.
+1.
+**The prop is used to pass in an initial value;
+**使用prop传递一个初始值;
+the child component wants to use it as a local data property afterwards.
+子组件希望之后将其用作本地数据属性。
+** In this case, it's best to define a local data property that uses the prop as its initial value:
+**在这种情况下，最好定义一个使用prop作为初始值的本地数据属性:
 
 ```js
 props: ['initialCounter'],
@@ -140,7 +165,10 @@ data() {
 }
 ```
 
-2. **The prop is passed in as a raw value that needs to be transformed.** In this case, it's best to define a computed property using the prop's value:
+**The prop is passed in as a raw value that needs to be transformed.
+** prop作为需要转换的原始值传入。
+** In this case, it's best to define a computed property using the prop's value:
+**在这种情况下，最好使用props的值定义一个计算属性:
 
 ```js
 props: ['size'],
@@ -152,15 +180,23 @@ computed: {
 ```
 
 ::: tip Note
+:::提示注意
 Note that objects and arrays in JavaScript are passed by reference, so if the prop is an array or object, mutating the object or array itself inside the child component **will** affect parent state.
+注意，JavaScript中的对象和数组是通过引用传递的，所以如果props是数组或对象，在子组件中改变对象或数组本身将会影响父组件的状态。
 :::
 
 ## Prop Validation
-
-Components can specify requirements for their props, such as the types you've already seen. If a requirement isn't met, Vue will warn you in the browser's JavaScript console. This is especially useful when developing a component that's intended to be used by others.
-
-To specify prop validations, you can provide an object with validation requirements to the value of `props`, instead of an array of strings. For example:
-
+# #支持验证
+Components can specify requirements for their props, such as the types you've already seen.
+组件可以为它们的props指定需求，比如您已经看到的类型。
+If a requirement isn't met, Vue will warn you in the browser's JavaScript console.
+如果没有满足某个要求，Vue将在浏览器的JavaScript控制台警告您。
+This is especially useful when developing a component that's intended to be used by others.
+这在开发供他人使用的组件时特别有用。
+To specify prop validations, you can provide an object with validation requirements to the value of `props`, instead of an array of strings.
+要指定props验证，您可以为“props”的值提供一个验证要求的对象，而不是一个字符串数组。
+For example:
+例如:
 ```js
 app.component('my-component', {
   props: {
@@ -205,11 +241,16 @@ app.component('my-component', {
   }
 })
 ```
-
+' ' '
 When prop validation fails, Vue will produce a console warning (if using the development build).
-
+当props验证失败时，Vue将生成一个控制台警告(如果使用的是开发版本)。
 ::: tip Note
-Note that props are validated **before** a component instance is created, so instance properties (e.g. `data`, `computed`, etc) will not be available inside `default` or `validator` functions.
+:::提示注意
+Note that props are validated **before** a component instance is created, so instance properties (e.g.
+注意，props是在创建组件实例之前**验证的，所以实例属性(例如。
+`data`, `computed`, etc) will not be available inside `default` or `validator` functions.
+' data '， ' computed '等)在' default '或' validator '函数中不可用。
+:::
 :::
 
 ### Type Checks
@@ -225,8 +266,10 @@ The `type` can be one of the following native constructors:
 - Function
 - Symbol
 
-In addition, `type` can also be a custom constructor function and the assertion will be made with an `instanceof` check. For example, given the following constructor function exists:
-
+In addition, `type` can also be a custom constructor function and the assertion will be made with an `instanceof` check.
+此外，‘type’也可以是一个自定义构造函数，断言将通过‘instanceof’检查完成。
+For example, given the following constructor function exists:
+例如，给定以下构造函数存在:
 ```js
 function Person(firstName, lastName) {
   this.firstName = firstName
@@ -248,7 +291,10 @@ to validate that the value of the `author` prop was created with `new Person`.
 
 ## Prop Casing (camelCase vs kebab-case)
 
-HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase. That means when you're using in-DOM templates, camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents:
+HTML attribute names are case-insensitive, so browsers will interpret any uppercase characters as lowercase.
+HTML属性名不区分大小写，因此浏览器将任何大写字符解释为小写字符。
+That means when you're using in-DOM templates, camelCased prop names need to use their kebab-cased (hyphen-delimited) equivalents:
+这意味着，当你使用in-DOM模板时，驼峰格式的props名称需要使用类似的串串格式(连字符分隔):
 
 ```js
 const app = Vue.createApp({})