From da157d466b2904c3373bd292b2ced67976ae950f Mon Sep 17 00:00:00 2001
From: bgchoi <choi.byunggil@gmail.com>
Date: Thu, 13 Jun 2019 01:14:50 +0900
Subject: [PATCH] =?UTF-8?q?2.6.0+=EC=97=90=EC=84=9C=20=EB=8F=84=EC=9E=85?=
 =?UTF-8?q?=EB=90=9C=20=EA=B0=80=EB=B3=80=20=EC=9D=B8=EC=9E=90=20=EC=84=A4?=
 =?UTF-8?q?=EB=AA=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/v2/guide/syntax.md | 52 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

diff --git a/src/v2/guide/syntax.md b/src/v2/guide/syntax.md
index b1481f683e..ac10f183f1 100644
--- a/src/v2/guide/syntax.md
+++ b/src/v2/guide/syntax.md
@@ -128,6 +128,50 @@ boolean 속성을 사용할 때 단순히 `true`인 경우 `v-bind`는 조금 
 
 전달인자는 이벤트를 받을 이름입니다. 우리는 이벤트 핸들링에 대해 더 자세하게 살펴 볼 것입니다.
 
+### 가변 인자
+
+> 2.6.0+ 에서 추가
+
+2.6.0 버전부터 대괄호로 자바스크립트 표현식을 감싸서 디렉티브의 인자에 사용할 수 있게 되었습니다.
+
+``` html
+<a v-bind:[attributeName]="url"> ... </a>
+```
+
+여기서 `attributeName`은 자바스크립트 표현식으로 가변적으로 작동합니다. 표현식의 결과가 최종적으로 인자에 들어가는 것입니다. 예를 들어 `attributeName`이 `"href"` 값을 가지는 데이터 속성이라면 이 바인딩에 따라 `v-bind:href`가 나오는 거죠.
+
+비슷하게 가변적인 인자를 핸들러와 가변적인 이벤트 이름을 바인딩하는 것에 쓸 수도 있습니다.
+
+``` html
+<a v-on:[eventName]="doSomething"> ... </a>
+```
+
+마찬가지로 예를 들어 `eventName`의 값이 `"focus"`라면 `v-on:[eventName]`의 최종값은 `v-on:focus`가 됩니다.
+
+#### 가변 인자 값의 제한
+
+가변 인자는 `null`이 아닌 문자여야 합니다. `null`이라는 이 특수한 값은 바인딩을 명시적으로 제거하는데 사용됩니다. 문자가 아닌 다른 값이 나오면 경고가 뜰 것입니다.
+
+#### 가변 인자 표현식의 제한
+
+<p class="tip">가변 인자 표현식은 몇 가지 문법 제한을 가지고 있습니다. 어떤 문자들은 HTML 인자의 이름으로 쓰지 못하기 때문입니다. 공백(space)이나 따옴표가 그렇습니다. in-DOM 템플릿을 사용할 때는 대문자도 피해야 합니다.</p>
+
+아래의 예를 살펴봅시다.
+
+``` html
+<!-- 컴파일러 경고를 유발합니다 -->
+<a v-bind:['foo' + bar]="value"> ... </a>
+```
+
+해결책은 두 가지인데 따옴표나 공백없이 표현식을 사용하거나 복잡한 표현식을 computed 속성으로 넘기는 것입니다.
+
+in-DOM 템플릿(HTML 파일에 작성된 템플릿)을 쓴다면 모든 인수의 이름을 소문자로 바꾼다는 것도 반드시 고려해야 합니다.
+
+``` html
+<!-- in-DOM 템플릿에서 v-bind:[someattr]로 바꿀 겁니다 -->
+<a v-bind:[someAttr]="value"> ... </a>
+```
+
 ### 수식어
 
 수식어는 점으로 표시되는 특수 접미사로, 디렉티브를 특별한 방법으로 바인딩 해야 함을 나타냅니다. 예를 들어, `.prevent` 수식어는 트리거된 이벤트에서 `event.preventDefault()`를 호출하도록 `v-on` 디렉티브에게 알려줍니다.
@@ -136,7 +180,7 @@ boolean 속성을 사용할 때 단순히 `true`인 경우 `v-bind`는 조금 
 <form v-on:submit.prevent="onSubmit"> ... </form>
 ```
 
-나중에 [`v-on`](https://vuejs.org/v2/guide/events.html#Event-Modifiers)과 [`v-model`](https://vuejs.org/v2/guide/forms.html#Modifiers)을 더 자세히 살펴볼 때 수식어를 더 많이 사용할 것 입니다.
+나중에 [`v-on`](events.html#Event-Modifiers)과 [`v-model`](forms.html#Modifiers)을 더 자세히 살펴볼 때 수식어를 더 많이 사용할 것 입니다.
 
 ## 약어
 
@@ -150,6 +194,9 @@ boolean 속성을 사용할 때 단순히 `true`인 경우 `v-bind`는 조금 
 
 <!-- 약어 -->
 <a :href="url"> ... </a>
+
+<!-- 가변 인자를 이용한 약어 (2.6.0+) -->
+<a :[key]="url"> ... </a>
 ```
 
 ### `v-on` 약어
@@ -160,6 +207,9 @@ boolean 속성을 사용할 때 단순히 `true`인 경우 `v-bind`는 조금 
 
 <!-- 약어 -->
 <a @click="doSomething"> ... </a>
+
+<!-- 가변 인자를 이용한 약어 (2.6.0+) -->
+<a @[event]="doSomething"> ... </a>
 ```
 
 이들은 일반적인 HTML과 조금 다르게 보일 수 있습니다. 하지만 `:`와 `@`는 속성 이름에 유효한 문자이며 Vue.js를 지원하는 모든 브라우저는 올바르게 구문 분석을 할 수 있습니다. 또한 최종 렌더링 된 마크업에는 나타나지 않습니다. 약어는 완전히 선택사항이지만 나중에 익숙해지면 편할 것 입니다.