Skip to content
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

Fix render error in Chrome browser & Fix markdown syntax error in tip section #219

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
14 changes: 7 additions & 7 deletions src/v2/guide/components.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ Vue.component('my-component', {
})
```

<p class="tip">Vue는 사용자 지정 태그 이름에 대해 [W3C 규칙](http://www.w3.org/TR/custom-elements/#concepts)을 적용하지 않습니다 (모두 소문자이어야 하고 하이픈을 포함해야합니다). 그러나 이 규칙을 따르는 것이 좋습니다.</p>
<p class="tip">Vue는 사용자 지정 태그 이름에 대해 <a href="http://www.w3.org/TR/custom-elements/#concepts">W3C 규칙</a>을 적용하지 않습니다 (모두 소문자이어야 하고 하이픈을 포함해야합니다). 그러나 이 규칙을 따르는 것이 좋습니다.</p>

일단 등록되면, 컴포넌트는 인스턴스의 템플릿에서 커스텀 엘리먼트,`<my-component></my-component>`로 사용할 수 있습니다. 루트 Vue 인스턴스를 인스턴스화하기 **전에** 컴포넌트가 등록되어 있는지 확인하십시오. 전체 예제는 다음과 같습니다.

Expand Down Expand Up @@ -403,7 +403,7 @@ todo: {
}
```

<p class="tip">자바 스크립트의 객체와 배열은 참조로 전달되므로 prop가 배열이나 객체인 경우 하위 객체 또는 배열 자체를 부모 상태로 변경하면 부모 상태에 **영향을 줍니다**.</p>
<p class="tip">자바 스크립트의 객체와 배열은 참조로 전달되므로 prop가 배열이나 객체인 경우 하위 객체 또는 배열 자체를 부모 상태로 변경하면 부모 상태에 <strong>영향을 줍니다</strong>.</p>

### Prop 검증

Expand Down Expand Up @@ -506,12 +506,12 @@ Props가 아닌 속성은 컴포넌트로 전달되지만 해당 props는 정의
- `$on(eventName)`을 사용하여 이벤트를 감지 하십시오.
- `$emit(eventName)`을 사용하여 이벤트를 트리거 하십시오.

<p class="tip">Vue의 이벤트 시스템은 브라우저의 [EventTarget API](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget)와 별개입니다. 비슷하게 작동하지만 `$on``$emit``addEventListener``dispatchEvent`의 별칭이 __아닙니다__.</p>
<p class="tip">Vue의 이벤트 시스템은 브라우저의 <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget">EventTarget API</a>와 별개입니다. 비슷하게 작동하지만 <code>$on</code><code>$emit</code><code>addEventListener</code><code>dispatchEvent</code>의 별칭이 <u>아닙니다</u>.</p>

또한, 부모 컴포넌트는 자식 컴포넌트가 사용되는 템플릿에서 직접 `v-on` 을 사용하여 자식 컴포넌트에서 보내진 이벤트를 청취할 수 있습니다.


<p class="tip">`$on`은 자식에서 호출한 이벤트는 감지하지 않습니다. `v-on`을 템플릿에 반드시 지정해야 합니다. 아래의 예제를 보십시오.</p>
<p class="tip"><code>$on</code>은 자식에서 호출한 이벤트는 감지하지 않습니다. <code>v-on</code>을 템플릿에 반드시 지정해야 합니다. 아래의 예제를 보십시오.</p>

예제:

Expand Down Expand Up @@ -781,7 +781,7 @@ Vue.component('my-checkbox', {
</my-checkbox>
```

<p class="tip">`checked` prop를 명시적으로 선언해야 합니다.</p>
<p class="tip"><code>checked</code> prop를 명시적으로 선언해야 합니다.</p>

### 비 부모-자식간 통신

Expand Down Expand Up @@ -1134,7 +1134,7 @@ var child = parent.$refs.profile

`ref`가 `v-for`와 함께 사용될 때, 얻을 수 있는 ref는 데이터 소스를 미러링하는 자식 컴포넌트를 포함하는 배열이 될 것입니다.

<p class="tip">`$refs` 는 컴포넌트가 렌더링 된 후에만 채워지며 반응적이지 않습니다. 그것은 직접 자식 조작을 위한 escape 해치를 의미합니다 - 템플릿이나 계산 된 속성에서 `$refs`를 사용하지 말아야합니다.</p>
<p class="tip"><code>$refs</code> 는 컴포넌트가 렌더링 된 후에만 채워지며 반응적이지 않습니다. 그것은 직접 자식 조작을 위한 escape 해치를 의미합니다 - 템플릿이나 계산 된 속성에서 <code>$refs</code>를 사용하지 말아야합니다.</p>

### 비동기 컴포넌트

Expand Down Expand Up @@ -1183,7 +1183,7 @@ new Vue({
})
```

<p class="tip">비동기 컴포넌트를 사용하려는 <strong>Browserify</strong> 사용자인 경우, 작성자는 불행히도 비동기로드가 Browserify에서 지원하지 않는 것이라고 [분명하게 주장합니다.](https://github.com/substack/node-browserify/issues/58#issuecomment-21978224) 적어도 공식적으로. Browserify 커뮤니티는 기존 및 복잡한 응용 프로그램에 도움이 될 수있는 [몇 가지 해결 방법](https://github.com/vuejs/vuejs.org/issues/620)을 발견했습니다. 다른 모든 시나리오의 경우 기본 제공되는 비동기식 지원을 위해 Webpack을 사용하는 것이 좋습니다.</p>
<p class="tip">비동기 컴포넌트를 사용하려는 <strong>Browserify</strong> 사용자인 경우, 작성자는 불행히도 비동기로드가 Browserify에서 지원하지 않는 것이라고 <a href="https://github.com/substack/node-browserify/issues/58#issuecomment-21978224">분명하게 주장합니다.</a> 적어도 공식적으로. Browserify 커뮤니티는 기존 및 복잡한 응용 프로그램에 도움이 될 수있는 <a href="https://github.com/vuejs/vuejs.org/issues/620">몇 가지 해결 방법</a>을 발견했습니다. 다른 모든 시나리오의 경우 기본 제공되는 비동기식 지원을 위해 Webpack을 사용하는 것이 좋습니다.</p>

### 고급 비동기 컴포넌트

Expand Down
4 changes: 2 additions & 2 deletions src/v2/guide/conditional.md
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ new Vue({

차이점은 `v-show`가 있는 엘리먼트는 항상 렌더링 되고 DOM에 남아있다는 점입니다. `v-show`는 단순히 엘리먼트에 `display` CSS 속성을 토글합니다.

<p class="tip">`v-show`는 `<template>` 구문을 지원하지 않으며 `v-else`와도 작동하지 않습니다.</p>
<p class="tip"><code>v-show</code>는 <code>&lt;template&gt;</code> 구문을 지원하지 않으며 <code>v-else</code>와도 작동하지 않습니다.</p>

## `v-if` vs `v-show`

Expand All @@ -187,6 +187,6 @@ new Vue({

## `v-if` 와 `v-for`

<p class="tip">`v-if`와 `v-for`을 함께 사용하는 것을 권장하지 않습니다. 자세한 내용은[style guide](/v2/style-guide/#Avoid-v-if-with-v-for-essential)을 확인하십시오.</p>
<p class="tip"><code>v-if</code>와 <code>v-for</code>을 함께 사용하는 것을 권장하지 않습니다. 자세한 내용은 <a href="/v2/style-guide/#v-if와-v-for를-동시에-사용하지-마세요-필수">스타일 가이드</a>을 확인하십시오.</p>

`v-if`와 함께 사용하는 경우, `v-for`는 `v-if`보다 높은 우선순위를 갖습니다. 자세한 내용은 <a href="../guide/list.html#v-for-with-v-if">리스트 렌더링 가이드</a>를 확인하십시오.
20 changes: 10 additions & 10 deletions src/v2/guide/events.md
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ methods: {
<div v-on:click.self="doThat">...</div>
```

<p class="tip">관련 코드가 동일한 순서로 생성되므로 수식어를 사용할 때 순서를 지정하세요. 다시말해 `v-on:click.prevent.self`를 사용하면 **모든 클릭**을 막을 수 있으며 `v-on:click.self.prevent`는 엘리먼트 자체에 대한 클릭만 방지합니다.</p>
<p class="tip">관련 코드가 동일한 순서로 생성되므로 수식어를 사용할 때 순서를 지정하세요. 다시말해 <code>v-on:click.prevent.self</code>를 사용하면 <strong>모든 클릭</strong>을 막을 수 있으며 <code>v-on:click.self.prevent</code>는 엘리먼트 자체에 대한 클릭만 방지합니다.</p>

> 2.1.4에 새로 추가됨

Expand All @@ -217,16 +217,16 @@ Vue는 [`addEventListener`의 `passive` option](https://developer.mozilla.org/en
<div v-on:scroll.passive="onScroll">...</div>
```

추가로, Vue는 `.passive` 수식어를 제공합니다. 특히 모바일 환경에서 성능향상에 도움이 됩니다. 예를 들어, 브라우저는 핸들러가 `event.preventDefault()`를 호출할지 알지 못하므로 프로세스가 완료된 후 스크롤 합니다. `.passive` 수식어는 이 이벤트가 기본 동작을 멈추지 않는다는 것을 브라우저에 알릴 수 있습니다.
`.passive` 수식어는 특히 모바일 환경에서 성능향상에 도움이 됩니다. 예를 들어, 브라우저는 핸들러가 `event.preventDefault()`를 호출할지 알지 못하므로 프로세스가 완료된 후 스크롤 합니다. `.passive` 수식어는 이 이벤트가 기본 동작을 멈추지 않는다는 것을 브라우저에 알릴 수 있습니다.

<p class="tip">`.passive`와 `.prevent`를 함께 사용하지 마세요.`.prevent`는 무시되고 브라우저는 오류를 발생시킬 것입니다. `.passive`는 당신이 이벤트의 기본 행동을 무시하지 _않기를 원하는_ 브라우저와 상호작용한다는 사실을 기억하세요.</p>
<p class="tip"><code>.passive</code>와 <code>.prevent</code>를 함께 사용하지 마세요. <code>.prevent</code>는 무시되고 브라우저는 오류를 발생시킬 것입니다. <code>.passive</code>는 당신이 이벤트의 기본 행동을 무시하지 <u>않기를 원하는</u> 브라우저와 상호작용한다는 사실을 기억하세요.</p>

## 키 수식어

키보드 이벤트를 청취할 때, 종종 공통 키 코드를 확인해야 합니다. Vue는 키 이벤트를 수신할 때 `v-on`에 대한 키 수식어를 추가할 수 있습니다.

``` html
<!-- only call `vm.submit()` when the `key` is `Enter` -->
<!-- `key`가 `Enter`일 때만 `vm.submit()`이 호출됩니다 -->
<input v-on:keyup.enter="submit">
```

Expand All @@ -238,17 +238,17 @@ Vue는 [`addEventListener`의 `passive` option](https://developer.mozilla.org/en

위의 예제에서 핸들러는 `$event.key === 'PageDown'` 일 때에만 호출됩니다.

### Key Codes
### 키 코드

<p class="tip">The use of `keyCode` events [is deprecated](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode) and may not be supported in new browsers.</p>
<p class="tip"><code>keyCode</code> 이벤트의 사용은 <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode">더 이상 권장되지 않으며</a> 새로운 브라우저에서는 지원되지 않을 수도 있습니다.</p>

Using `keyCode` attributes is also permitted:
`keyCode` 속성의 사용도 가능합니다:

``` html
<input v-on:keyup.13="submit">
```

Vue provides aliases for the most commonly used key codes when necessary for legacy browser support:
Vue는 과거 브라우저 지원을 위해 필요 시 가장 많이 사용되는 키 코드들의 별칭(alias)들을 제공합니다.

- `.enter`
- `.tab`
Expand All @@ -260,7 +260,7 @@ Vue provides aliases for the most commonly used key codes when necessary for leg
- `.left`
- `.right`

<p class="tip">일부 키(`.esc`와 모든 화살표 키)는 IE9에서 일관성 없는 `key` 값을 가지고 있습니다. IE9를 지원해야하는 경우 내장 별칭이 선호됩니다.</p>
<p class="tip">일부 키(<code>.esc</code>와 모든 화살표 키)는 IE9에서 일관성 없는 <code>key</code> 값을 가지고 있습니다. IE9를 지원해야하는 경우 내장 별칭이 선호됩니다.</p>

또한 전역 `config.keyCodes` 객체를 통해 [사용자 지정 키 수식어 별칭을 지정할 수 있습니다.](../api/#keyCodes)

Expand Down Expand Up @@ -293,7 +293,7 @@ Vue.config.keyCodes.f1 = 112
```

<p class="tip">
수식어 키는 일반 키와 다르며 `keyup` 이벤트와 함께 사용되면 이벤트가 발생할 때 수식어 키가 눌려있어야 합니다. 즉,`keyup.ctrl`는 `ctrl`을 누른 상태에서 키를 놓으면 트리거됩니다. `ctrl` 키만 놓으면 트리거되지 않습니다.
수식어 키는 일반 키와 다르며 <code>keyup</code> 이벤트와 함께 사용되면 이벤트가 발생할 때 수식어 키가 눌려있어야 합니다. 즉, <code>keyup.ctrl</code>는 <code>ctrl</code>을 누른 상태에서 키를 놓으면 트리거됩니다. <code>ctrl</code> 키만 놓으면 트리거되지 않습니다.
</p>

### `.exact` 수식어
Expand Down
10 changes: 5 additions & 5 deletions src/v2/guide/forms.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,18 @@ order: 10

## 기본 사용법

`v-model` 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있습니다. 입력 유형에 따라 엘리먼트를 업데이트 하는 올바른 방법을 자동으로 선택합니다. 약간 이상하지만 `v-model`은 기본적으로 사용자 입력 이벤트에 대한 데이터를 업데이트하는 "syntax sugar"이며 일부 경우에 특별한 주의를 해야합니다.
`v-model` 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있습니다. 입력 유형에 따라 엘리먼트를 업데이트 하는 올바른 방법을 자동으로 선택합니다. 약간 이상하지만 `v-model`은 기본적으로 사용자 입력 이벤트에 대한 데이터를 업데이트하는 "편의 문법(syntax sugar)"이며 일부 경우에 특별한 주의를 해야합니다.

<p class="tip">
`v-model`은 모든 form 엘리먼트의 초기 `value`와 `checked` 그리고 `selected` 속성을 무시합니다. 항상 Vue 인스턴스 데이터를 원본 소스로 취급합니다. 컴포넌트의 `data` 옵션 안에 있는 JavaScript에서 초기값을 선언해야합니다.
<code>v-model</code>은 모든 form 엘리먼트의 초기 <code>value</code>와 <code>checked</code> 그리고 <code>selected</code> 속성을 무시합니다. 항상 Vue 인스턴스 데이터를 원본 소스로 취급합니다. 컴포넌트의 <code>data</code> 옵션 안에 있는 JavaScript에서 초기값을 선언해야합니다.
</p>

`v-model`은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송합니다 :
- text 와 textarea 태그는 `value`속성과 `input`이벤트를 사용합니다.
- 체크박스들과 라디오버튼들은 `checked` 속성과 `change` 이벤트를 사용합니다.
- Select 태그는 `value`를 prop으로, `change`를 이벤트로 사용합니다.

<p class="tip" id="vmodel-ime-tip">[IME](https://en.wikipedia.org/wiki/Input_method) (중국어, 일본어, 한국어 등)가 필요한 언어의 경우 IME 중 `v-model`이 업데이트 되지 않습니다. 이러한 업데이트를 처리하려면 `input` 이벤트를 대신 사용하십시오.</p>
<p class="tip" id="vmodel-ime-tip"><a href="https://en.wikipedia.org/wiki/Input_method">IME</a> (중국어, 일본어, 한국어 등)가 필요한 언어의 경우 IME 중 <code>v-model</code>이 업데이트 되지 않습니다. 이러한 업데이트를 처리하려면 <code>input</code> 이벤트를 대신 사용하십시오.</p>

### 문자열

Expand Down Expand Up @@ -211,7 +211,7 @@ new Vue({
</script>
{% endraw %}

<p class="tip">`v-model` 표현식의 초기 값이 어떤 옵션에도 없으면, `&lt;select&gt;` 엘리먼트는 "선택없음" 상태로 렌더링됩니다. iOS에서는 이 경우 변경 이벤트가 발생하지 않아 사용자가 첫 번째 항목을 선택할 수 없게됩니다. 따라서 위 예제처럼 사용하지 않는 옵션에 빈 값을 넣는 것이 좋습니다.</p>
<p class="tip"><code>v-model</code> 표현식의 초기 값이 어떤 옵션에도 없으면, <code>&lt;select&gt;</code> 엘리먼트는 "선택없음" 상태로 렌더링됩니다. iOS에서는 이 경우 변경 이벤트가 발생하지 않아 사용자가 첫 번째 항목을 선택할 수 없게됩니다. 따라서 위 예제처럼 사용하지 않는 옵션에 빈 값을 넣는 것이 좋습니다.</p>

다중 셀렉트 (배열을 바인딩 합니다):

Expand Down Expand Up @@ -329,7 +329,7 @@ vm.toggle === 'yes'
vm.toggle === 'no'
```

<p class="tip">`true-value``false-value` 속성은 폼 전송시 체크되지 않은 박스를 포함하지 않기 때문에 입력의 `value` 속성에 영향을 미치지 않습니다. 두 값 중 하나가 폼을 통해 전송 되려면 (예 : '예' 또는 '아니요') 라디오를 대신 사용하십시오.</p>
<p class="tip"><code>true-value</code><code>false-value</code> 속성은 폼 전송시 체크되지 않은 박스를 포함하지 않기 때문에 입력의 <code>value</code> 속성에 영향을 미치지 않습니다. 두 값 중 하나가 폼을 통해 전송 되려면 (예 : '예' 또는 '아니요') 라디오를 대신 사용하십시오.</p>

### 라디오

Expand Down