[Hoon] Vuejs 강의 - Vue 핵심 문법 실습 ( 공식 가이드 문서 오류 해결 )

템플릿 문법

https://kr.vuejs.org/v2/guide/syntax.html

보간법(Interpolation) - 삽입법

#문자열

데이터 바인딩의 가장 기본 형태는 “Mustache” 구문(이중 중괄호)을 사용한 텍스트 보간입니다.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <div id="app">
      <span>메시지: {{ msg }}</span>
   </div>

new Vue({
      el:'#app',
   data: {
      // 1. 선언적 렌더링
      msg: 'Hello Vue!'  
   }
   })

<span v-once>다시는 변경하지 않습니다: {{ msg }}</span>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <div id="app">
      <span>메시지: {{ msg }}</span>
      <span v-once>다시는 변경하지 않습니다: {{ msg }}</span>
   </div>   

var vm = new Vue({
      el:'#app',
   data: {
      // 1. 선언적 렌더링
      msg: '안녕하세요 Vue!'  
   }
   })

   vm.msg = 'Hi Vue!'

#원시 HTML

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <div id="app">  
      <p>Using mustaches: {{ rawHtml }}</p> 
      <p>Using v-html directive: <span v-html="rawHtml"></span></p>
   </div> 

new Vue({ el:'#app', data: { rawHtml: '<span style="color:red">This is red!</span>' } })

new Vue({
      el:'#app',
      data: {    
         rawHtml: '<span style="color:red">This is red!</span>'
      }
   })

#속성

Mustaches는 HTML 속성에서 사용할 수 없습니다. 대신 v-bind 디렉티브를 사용해야 합니다.

<div v-bind:id="dynamicId"></div>

div id 를 부여할 수 있습니다.

new Vue({
      el:'#app',
      data: {            
         dynamicId: 'dynamicId-1'
      }  
   })

boolean 속성을 사용할 때 단순히 true인 경우 v-bind는 조금 다르게 작동합니다.

<button v-bind:disabled="isButtonDisabled">Button</button>

new Vue({ el:'#app', data: { isButtonDisabled: true // false } })

new Vue({ el:'#app', data: { isButtonDisabled: true // false } })

isButtonDisabled가 null, undefined 또는false의 값을 가지면 disabled 속성은 렌더링 된 button 엘리먼트에 포함되지 않습니다.

true / false 시 개발자 도구에서 소스 확인

Vue.js는 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원합니다.

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

new Vue({
      el:'#app',
      data: {            
         number: 1,
         message: 'Hello Vu1!',
         ok: true,
         id:1
      }  
   })

각 바인딩에 하나의 단일 표현식 만 포함될 수 있으므로 아래처럼 작성하면 안됩니다

<!-- 아래는 구문입니다, 표현식이 아닙니다. -->
   {{ var a = 1 }}

   <!-- 조건문은 작동하지 않습니다. 삼항 연산자를 사용해야 합니다. -->
   {{ if (ok) { return message } }}

디렉티브

디렉티브는 v- 접두사가 있는 특수 속성입니다. 디렉티브 속성 값은 단일 JavaScript 표현식 이 됩니다. (나중에 설명할 v-for는 예외입니다.) 디렉티브의 역할은 표현식의 값이 변경될 때 사이드이펙트를 반응적으로 DOM에 적용하는 것 입니다.

<p v-if="seen">이제 나를 볼 수 있어요</p>

new Vue({
      el:'#app',
      data: {            
         seen: true         
      }  
   })

#전달인자

일부 디렉티브는 콜론으로 표시되는 “전달인자”를 사용할 수 있습니다. 예를 들어, v-bind 디렉티브는 반응적으로 HTML 속성을 갱신하는데 사용됩니다.

 <a v-bind:href="url" target='_blank'> open page </a> 

new Vue({
      el:'#app',
      data: {            
         url: 'http://www.naver.com'         
      }  
   })

여기서 href는 전달인자로, 엘리먼트의 href 속성을 표현식 url의 값에 바인드하는 v-bind 디렉티브에게 알려줍니다.

또 다른 예로 DOM 이벤트를 수신하는 v-on 디렉티브입니다.

 <p></p>
   <a v-on:click="doSomething"> doSomething </a>

new Vue({
      el:'#app',
      data: {            
         url: 'http://www.naver.com'         
      },
      methods:{
         doSomething : function(){
            this.url = 'http://www.daum.net' 
         }
      }  
   })

#동적 전달인자 - 공식 문서 오류 발견 -> 해결함

2.6.0버전부터 Javascript 표현식을 대괄호로 묶어 디렉티브 의 아규멘트로 사용하는것도 가능해졌습니다:

<!-- 동적 전달인자는 "동적 전달인자의 형식 제약"의 부분에서 후술되는바와 같이, 
조금의 제약이 있는 점에 주의해주세요 -->
<a v-bind:[attributeName]="url"> ... </a>

new Vue({ el:'#app', data: { url: 'http://www.google.com', attributeName: 'href' } })

여기서 attributeName은 Javascript형식으로 동적 변환되어, 그 변환결과가 전달인자의 최종적인 밸류로 사용됩니다. 예를들어 당신의 Vue 인스턴스에 "href"라는 값을 가진 attributeName 데이터 속성을 가진 경우, 이 바인딩은 v-bind:href와 동등합니다.

=> 실제로는 에러가 발생함 VM143 vue.js:634 [Vue warn]: Property or method "attributename" is not defined on the instance but referenced durin ...

해결방법 ==> attributeName => attributename 동적 attributeName 은 attributename, attribute 등과 같이 단일명으로 줘야 됨. vue.js 공식 가이드 오류입니다. 영문, 중문 가이드도 동일한 오류입니다.

<a v-bind:[attributename]="url"> ... </a>

new Vue({
      el:'#app',
      data: {            
         url: 'http://www.google.com',
         attributename: 'href'
      }
   })

<p></p> <a v-on:[eventName]="doSomething"> doSomething </a>

 new Vue({
      el:'#app',
      data: {            
         url: 'http://www.google.com',
         eventName: 'click'         
      },
      methods:{
         doSomething : function(){
            this.url = 'http://www.daum.net' 
         }         
      }  
   })

=> 마찬가지로 에러 발생함 VM143 vue.js:634 [Vue warn]: Property or method "eventname" is not defined on the instance but referenced durin ...

==> eventName => eventname

추가적인 제약도 있음

• 동적 전달인자 값의 제약

• 동적 전달인자 형식의 제약

#수식어

수식어는 점으로 표시되는 특수 접미사로, 디렉티브를 특별한 방법으로 바인딩 해야 함을 나타냅니다. 예를 들어, .prevent 수식어는 트리거된 이벤트에서 event.preventDefault()를 호출하도록 v-on 디렉티브에게 알려줍니다.

<form v-on:submit.prevent="onSubmit"> ... </form>

약어

v- 접두사는 템플릿의 Vue 특정 속성을 식별하기 위한 시각적인 신호 역할을 합니다. 이 기능은 Vue.js를 사용하여 기존의 마크업에 동적인 동작을 적용할 때 유용하지만 일부 자주 사용되는 디렉티브에 대해 너무 장황하다고 느껴질 수 있습니다. 동시에 Vue.js가 모든 템플릿을 관리하는 SPA를 만들 때 v- 접두어의 필요성이 떨어집니다. 따라서 가장 자주 사용되는 두개의 디렉티브인 v-bind와 v-on에 대해 특별한 약어를 제공합니다.

#v-bind 약어

<!-- 전체 문법 --> <a v-bind:href="url"> ... </a> <!-- 약어 --> <a :href="url"> ... </a> <!-- shorthand with dynamic argument (2.6.0+) --> <a :[key]="url"> ... </a>

<!-- 전체 문법 -->
   <a v-bind:href="url"> ... </a>

   <!-- 약어 -->
   <a :href="url"> ... </a>

   <!-- shorthand with dynamic argument (2.6.0+) -->
   <a :[key]="url"> ... </a>

#v-on 약어

<!-- 전체 문법 -->
   <a v-on:click="doSomething"> ... </a>

   <!-- 약어 -->
   <a @click="doSomething"> ... </a>

   <!-- shorthand with dynamic argument (2.6.0+) -->
   <a @[event]="doSomething"> ... </a>

bit.ly/3fXOzon

인프런 인강 55%할인 쿠폰 - 커피한잔으로 Vue.js 핵심 강의!

 

bit.ly/2TtRHis

[Vue.js] Javascript Real 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 - 인프런