Vue 2 Template

보간법

 

• 데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법이다.
• 가장 기본적인 데이터 바인딩 방식은 {{ }} (이중 괄호 : Mustache Tag)이다.
• Mustache 태그는 해당 데이터 객체의 message 속성 값으로 대체된다.
• 데이터 객체의 message 속성이 변경될 때마다 갱신된다.
• mustache는 HTML이 아닌 일반 텍스트로 데이터를 해석한다.
• 실제 HTML을 출력하려면 v-html 디렉티브를 사용해야 된다.
  

  <div id="vm1">
      <p>Mustache : {{msg1}}</p>
      <p>v-text : <span v-text="msg1"></span></p>
      <p>v-html : <span v-html="msg1"></span></p>
  </div>​

 

디렉티브

 

• v- 접두사가 붙은 특수 속성을 말한다.
• v- 라고 붙으면 vue에서 인식해서 내부적으로 돌아가서 조작을 한다.
• v-text
  - 엘리먼트의 textContent를 업데이트한다.
  - textContent의 일부를 갱신해야 하면 {{Mustache}}를 사용해야 한다.
• v-html
  - 엘리먼트의 innerHTML을 업데이트한다.
  - HTML 코드를 직접적으로 입력해 줄 때 사용한다.
  

  <div id="vm1">
      <p>Mustache : {{msg1}}</p>
      <p>v-text : <span v-text="msg1"></span></p>
      <p>v-html : <span v-html="msg1"></span></p>
  </div>
  
  <script>
      const vm1 = new Vue({
          el:'#vm1',
          data: {
              // msg1:'<span>안녕??</span>'
              msg1:'<a href="http://naver.com" target="_blank">네이버 방문</a>'
          }
      });
  </script>​

• v-if
  - 조건식을 작성할 수 있다.
  - 해당 조건이 참일 경우에만 내부 DOM 코드를 출력한다.
  - 초기 렌더링에서 조건이 거짓인 경우 렌더링 하지 않고 조건이 참일 때까지 렌더링 하지 않는다.
  - v-else-if와 v-else를 지원한다.
  

  <div id="vm2">
      <p v-if="num1<5">{{num1}}</p>
      <p v-else-if="num1<10">대상</p>
      <p v-else>초과</p>
      <button v-on:click="plus">증가</button>
      <button v-on:click="minus">감소</button>
      {{num1}}
  </div>
  
  <script>
      const vm2 = new Vue({
          el:'#vm2',
          data: {
              num1:1
          },
          methods: {
              plus: function(){
                  this.num1++;
              },
              minus : function(){
                  this.num1--;
              }
          }
      });
  </script>​

• v-for
  - 원본 데이터를 기반으로 엘리먼트 또는 템플릿 블록을 여러 번 렌더링 한다.
  - 디렉티브의 값은 반복되는 현재 엘리먼트에 대한 별칭을 제공하기 위해 특수 구문인 alias in expression을 사용해야 한다.
  

  <div id="vm3">
      <table>
          <thead>
              <tr>
                  <th scope="col">번호</th>
                  <th scope="col">이름</th>
                  <th scope="col">나이</th>
              </tr>
          </thead>
          <tbody>
              <tr v-for="person in people">
                  <td>{{person.id}}</td>
                  <td>{{person.name}}</td>
                  <td>{{person.age}}</td>
              </tr>
          </tbody>
      </table>
      <p v-for="person in people">
          {{person.id}}. {{person.name}} : {{person.age}}세
      </p>
  </div>
  
  <script>
      const vm3 = new Vue({
          el:'#vm3',
          data : {
              people: [
                  {id:1, name:'홍길동', age:40},
                  {id:2, name:'조현우', age:32},
                  {id:3, name:'홍정호', age:30},
                  {id:4, name:'손흥민', age:29},
                  {id:5, name:'황희찬', age:26},
                  {id:6, name:'이강인', age:22},
                  {id:7, name:'황의조', age:31},
                  {id:8, name:'황인범', age:25},
                  {id:9, name:'정우양', age:21}
              ]
          }
      });
  </script>​

  - 객체를 활용
  

  <div id="vm4">
      <p v-for="(value, name) in person">
          {{name}} : {{value}}
      </p>
  </div>
  
  <script>
      const vm4 = new Vue({
      el:'#vm4',
      data : {
          person: {id:1, name:'홍길동', age:20, color: '검정'}
      }
      });
  </script>​

• v-bind
  - 지정된 해당 태그의 속성 값을 지정하는 데 사용된다.
  - v-bind: 속성 명의 형태로 해당 태그에 유효한 속성명을 지정한다.
  - :속성 명의 형태로도 사용 가능하다.
  

  <div id="vm5">
      <p><a v-bind:href="url1" v-bind:target="newTab">네이버</a></p>
      <p><a v-bind:href="url2" v-bind:target="newTab">다음</a></p>
  </div>
  
  <script>
      const vm5 = new Vue({
          el:'#vm5',
          data : {
              url1: "http://naver.com",
              url2: "http://daum.net",
              newTab: '_blank'
          }
      });
  </script>​

  - for문 활용
  

  <div id="vm6">
      <p v-for="link in websites">
          <a v-bind:href="link.url" v-bind:target="newTab">{{link.name}}</a>
      </p>
  </div>
  
  <script>
      const vm6 = new Vue({
          el:'#vm6',
          data : {
              newTab: '_blank',
              websites: [
                  {name:'네이버', url:'http://naver.com'},
                  {name:'다음', url:'http://daum.net'},
                  {name:'구글', url:'http://google.com'},
                  {name:'페이스북', url:'http://facebook.com'}
              ]
          }
      });
  </script>

  - 인라인 스타일 지정
  

  <div id="vm7">
      <p style="color:red;">직접 지정</p>
      <p v-bind:style="cGreen">스타일 v-bind로 지정</p>
      <p v-bind:style="{color:warning}">스타일 value v-bind로 지정</p>
      <p v-bind:style="{background:warning, color:light}">여러 스타일 v-bind로 여러 스타일 지정</p>
  </div>
  
  <script>
      const vm7 = new Vue({
      el:'#vm7',
      data : {
          cGreen : 'color:green',
          warning : 'red',
          light : '#eee'
      }
      });
  </script>

  - Class 속성 지정
  

  <div id="vm8">
      <p v-bind:class="classDot">클래스 v-bind로 지정</p>
      <p v-bind:class="[classDash, classRadius]">다중 클래스 v-bind로 지정</p>
  </div>
  
  <script>
      const vm8 = new Vue({
      el:'#vm8',
      data : {
          classDot : 'dot',
          classDash: 'dash',
          classRadius: 'radius'
      }
      });
  </script>
  
  .dot{
      border-style:dotted;
  }
  
  .dash{
      border-style:dashed;
  }
  
  .radius{
      border-radius:10px;
  }

  - 이벤트와 결합
  

  <div id="vm9">
      <p v-bind:class="cl">안녕하세요</p>
      <button v-on:click="ck">버튼</button>
  </div>
  
  <script>
      const vm9 = new Vue({
      el:'#vm9',
      data : {
          cl : 'dot',
          check: true
      },
      methods: {
          ck: function(){
              if(this.check == true){
                  this.cl = 'dash';
                  this.check = false;
              }else{
                  this.cl ='dot';
                  this.check = true;
              }
          }
      }
      });
  </script>

• v-model
  - 양방향 데이터 바인딩을 가능하게 해주는 디렉티브이다.
  - 대표적으로 form 입력 또는 출력에 적용된다.
  - v-model은 모든 form 엘리먼트의 초기 value와 checked, selected 속성을 무시한다.
  - 항상 Vue 인스턴스 데이터를 원본 소스로 취급한다.
  - 사용 대상 태그는 <input>, <select>, <textarea>로 제한된다.
  - 한 줄 문자열
    ▷ value 속성 사용
  

  <div id="vm10">
      <input type="text" v-model="userName" placeholder="이름을 입력하세요.">
      <p>{{userName}}</p>
  </div>
  
  <script>
      const vm10 = new Vue({
      el:'#vm10',
      data: {
          userName:''
      }
      });
  </script>

  - 여러 줄 문자열
    ▷ value 속성 사용
    ▷ <textarea>{{text}}</textarea>는 적용되지 않는다.
    ▷ 여러 줄 입력 내용이 여러 줄로 출력되려면 출력 부분에 white-space:pre-line 사용
  

  <div id="vm11">
      <textarea v-model="userSuggestion" placeholder="건의 내용을 입력하세요."></textarea>
      <p>{{userSuggestion}}</p>
  </div>
  
  <script>
      const vm11 = new Vue({
      el:'#vm11',
      data: {
          userSuggestion:''
      }
      });
  </script>
  
  #vm11 p {
      white-space:pre-line;
  }

  - 체크박스
    ▷ checked 사용
    ▷ 하나의 체크박스는 단일 boolean 값을 가진다.
  

  <div id="vm12">
      <input type="checkbox" id="check" v-model="check">
      <label for="check">선택하세요</label>
      <p>{{check}}</p>
  </div>
  
  <script>
      const vm12 = new Vue({
          el:'#vm12',
          data: {
              check:true
          }
      });
  </script>​

   ▷ 여러 개의 체크박스는 같은 배열을 바인딩할 수 있다.
  

  <div id="vm13">
      <p><input type="checkbox" id="course1" v-model="course" value="메타버스/제페토 개발과정">
      <label for="course1">메타버스/제페토 개발과정</label></p>
      <p><input type="checkbox" id="course2" v-model="course" value="웹디자인/웹개발자 취업과정">
      <label for="course2">웹디자인/웹개발자 취업과정</label></p>
      <p><input type="checkbox" id="course3" v-model="course" value="광고편집 취업과정">
      <label for="course3">광고편집 취업과정</label></p>
      <p><input type="checkbox" id="course4" v-model="course" value="건축/인테리어 취업과정">
      <label for="course4">건축/인테리어 취업과정</label></p>
      <p><input type="checkbox" id="course5" v-model="course" value="모션그래픽/영상 취업과정">
      <label for="course5">모션그래픽/영상 취업과정</label></p>
      <p><input type="checkbox" id="course6" v-model="course" value="3D마야/CG 취업과정">
      <label for="course6">3D마야/CG 취업과정</label></p>
      <p>{{course}}</p>
  </div>
  
  <script>
      const vm13 = new Vue({
          el:'#vm13',
          data: {
              course:[]
          }
      });
  </script>

    ▷ 버튼 및 v-bind:disabled 활용
  

  <div id="vm14">
      <input type="checkbox" v-model="myAgree" id="agreement">
      <label for="agreement">동의합니다.</label>
      <button v-bind:disabled="myAgree==false">전송</button>
  </div>
  
  <script>
      const vm14 = new Vue({
          el:'#vm14',
          data: {
              myAgree:false
          }
      });
  </script>

  - 라디오
    ▷ checked 사용
  

  <div id="vm15">
      <p><input type="radio" id="color1" v-model="colorBg" value="red"><label for="color1">빨강</label></p>
      <p><input type="radio" id="color2" v-model="colorBg" value="green"><label for="color2">초록</label></p>
      <p><input type="radio" id="color3" v-model="colorBg" value="blue"><label for="color3">파랑</label></p>
      <p><input type="radio" id="color4" v-model="colorBg" value="orange"><label for="color4">주황</label></p>
      <p v-bind:style="{background:colorBg}">{{colorBg}}</p>
  </div>
  
  <script>
      const vm15 = new Vue({
          el:'#vm15',
          data: {
              colorBg:'blue'
          }
      });
  </script>

  - select
    ▷ value 사용
    ▷ v-model 표현식의 초기 값이 어떤 옵션에도 없으면 <select> 요소는 "선택 없음" 상태로 렌더링 된다.
    ▷ iOS에서는 이 경우 변경 이벤트가 발생하지 않아 사용자가 첫 번째 항목을 선택할 수 없게 되기 때문에 사용하지 않는 옵션에 빈 값을 넣는 것이 좋다.
    ▷ 다중 셀렉터는 배열 형태로 바인딩할 수 있다.
  

  <div id="vm17">
      <label for="area">지역</label>
      <select id="area" v-model="myArea">
          <option disabled value="">선택하세요.</option>
          <option>서울</option>
          <option>인천</option>
          <option>부산</option>
          <option>광주</option>
          <option>제주</option>
      </select>
      <p>선택한 지역은 <b>{{myArea}}</b>입니다.</p>
  </div>
  
  <script>
      const vm17 = new Vue({
          el:'#vm17',
          data: {
              myArea:''
          }
      });
  </script>

  
  

 

text 엘리먼트의 수식어

 

• text 엘리먼트에 사용할 수 있는 수식어는 v-model 디렉티브에 추가하며 별도의 코드로 문자열 입력 처리를 쉽게 할 수 있도록 도와준다.
  - number
    ▷ 일반적으로 text 엘리먼트에 입력한 상태 값의 데이터 타입은 문자열이다.
    ▷ 이 값이 숫자로 처리되어야 한다면 .number 수식어를 사용하여 입력한 문자열을 자동으로 숫자 타입으로 바꾼다.
  

  <div id="vm20">
      <label for="number">수량 : </label>
      <input type="number" id="number" v-model.number="myNumber">
      <p>100을 더한 수량은 <b>{{100+myNumber}}</b>입니다.</p>
  </div>
  
  <script>
      const vm20 = new Vue({
          el:'#vm20',
          data: {
              myNumber:0
          }
      });
  </script>​

  - lazy
    ▷ Vue는 text 엘리먼트에 문자열을 입력하는 것과 동시에 Vue 인스턴스 상태에 입력한 문자열을 바로 저장한다.
    ▷ 그런데 특정 글자 수를 입력했을 때 서버로 데이터를 보내는 상황이나 입력하는 글자를 화면에 보여주지 않는 비밀번호는 상태 값을 바로 업데이트하는 Vue의 기본 동작이 오히려 방해된다.
    ▷ .lazy 수식어를 사용하면 입력한 문자열을 인스턴스 상태 값으로 바로 설정되지 않는다.
  

  <div id="vm21">
      <label for="userId">아이디 : </label>
      <input type="text" id="userId" v-model.lazy="myId" placeholder="아이디를 입력하세요.">
      <p>입력한 아이디는 <b>{{myId}}</b>입니다.</p>
  </div>
  
  <script>
      const vm21 = new Vue({
          el:'#vm21',
          data: {
              myId:''
          }
      });
  </script>

  - trim
    ▷ text 엘리먼트에서 빈번하게 사용하는 수식어 중 하나로 입력한 문자열의 앞뒤에 있는 공백을 잘라낸다.
    ▷ 입력받은 데이터를 처리할 때 문자열 앞뒤의 공백을 유효한 입력으로 보지 않는다.
  

  <div id="vm22">
      <label for="shortRivew">아이디 : </label>
      <input type="text" id="shortRivew" v-model.trim="userRivew" placeholder="후기를 입력하세요.">
      <p>작성하신 내용은 <b>{{userRivew}}</b>입니다.</p>
  </div>
  
  
  <script>
      const vm22 = new Vue({
          el:'#vm22',
          data: {
              userRivew:''
          }
      });
  </script>

 

 

이벤트 리스닝

 

• Vue에서 이벤트를 사용하기 위해 v-on 디렉티브를 사용한다.
• v-on:이벤트명 형태로 사용하며 @이벤트명으로도 줄여서 사용 가능하다.

<div id="vm1">
    <button v-on:click="counter1 += 1">클릭</button>
    <p>클릭한 횟수는 <b>{{counter1}}</b>입니다.</p>
</div>

<script>
    const vm1 = new Vue({
        el:'#vm1',
        data: {
            counter1: 0
        }
    });
</script>

• 한 번에 여러 개 이벤트 사용

<div id="vm6">
    <p v-on="{mousedown:doThis, mouseup:doThat}">{{text}}</p>
</div>

const vm6 = new Vue({
    el:'#vm6',
    data:{
        text:'마우스로 누르세요.'
    },
    methods: {
        doThis: function(){
            this.text = '마우스가 눌렸어요.';
        },
        doThat: function(){
            this.text = '마우스에서 손울 땠어요.';
        }
    }
});

• $event
  - 메서드 호출 인자를 1개 이상 전달할 때는 브라우저에서 발생한 이벤트 정보를 리스너에 전달하려면 $event 인자를 명시적으로 설정해야 한다.
  - 인라인 메서드 리스너가 인자를 1개 이상 전달받기 시작하면 브라우저 네이티브 이벤트를 받을 때 반드시 $인자를 전달해야 한다.
• 키 수식어
  - 키 수식어 대부분은 keyup, keydown, keypress 이벤트에 반응하지만 일부 수식어는 keyup 등의 이벤트에 반응하지 않는다.
    ▷ .enter : 키보드 Enter 키를 입력했을 때 실행
    ▷ .shift : 키보드 Shift 키를 입력했을 때 실행
    ▷ .tab : 키보드 Tab 키를 입력했을 때 실행 (keydown과 keypress 이벤트에만 반응)
    ▷ .esc : 키보드 Esc 키를 입력했을 때 실행
    ▷ space : 키보드 Space 키를 입력했을 때 실행
  
  

<div id="vm9">
    <p>
        <input type="text" v-on:keydown.enter.shift="enterAlert" placeholder="shift + enter키를 눌러주세요.">
    </p>
</div>

const vm9 = new Vue({
    el:'#vm9',
    methods: {
        enterAlert: function(){
            alert('Shift와 Enter키를 눌렀습니다.');
        }
    }
});

• 마우스 버튼 수식어
  - left : 마우스 왼쪽 버튼을 눌렀을 때 실행
  - :contextmenu : 마우스 오른쪽 버튼을 눌렀을 때 실행
• 시스템 수식어 키
  - 시스템 수식어 키는 포커스를 가질 수 있는 엘리먼트(하이퍼링크, 폼 엘리먼트 등) 뿐만 아니라 마우스 이벤트 수식어와 함께 사용하면 포커스를 갖지 않는 div와 같은 엘리먼트에도 이벤트 리스너를 실행할 수 있다.
    ▷ .alt : 키보드 Alt 키를 입력했을 때 실행 (macOs는 option 키에 해당)
    ▷ .ctrl : 키보드 Shift 키를 입력했을 때 실행
    ▷ .meta : 윈도우에서는 윈도우 키를 macOS에서는 command 키를 입력했을 때 실행