Vue 문법 정리

# 뷰의 템플릿 문법

- 뷰로 화면을 조작하는 방법

> 데이터 바인딩

<div> {{ message }} </div>

> 디렉티브

<span v-if="show"></span>

v-로 시작하는 Vue에서 정의한 디렉티브 속성

 

// 3. Root로 사용될 Element 정의
  <div id="app">
    // 8. v-bind라는 디렉티브 사용하여, 인스턴스 내 데이터 변수와 데이터바인딩
    // v-bind:<뷰의 속성명>="인스턴스내 데이터변수명"
    // v-bind:id="아이디명을 담은 데이터변수""
    // v-bind:class="클래스명을 담은 데이터변수"
    <p v-bind:id="uuid" v-bind:class="name">{{ num }}</p>
    <!-- <p id="abc1234">{{ num }}</p> -->
    // 7. 변수 데이터 바인딩
    <p>{{ doubleNum }}</p>
    // v-if="불리안 값을 가진 데이터변수" : true일 경우에만 보여줌(실제로 dom 그리지 않음)
    <div v-if="loading">
      Loading...
    </div>
    // v-else : v-if의 false값일 경우에, 보여준다.
    <div v-else>
      test user has been logged in
    </div>
    // v-show="불리안 값을 가진 데이터변수" : display:none만 붙임(없어지는 것이 아님)
    <div v-show="loading">
      Loading...
    </div>
    <!-- TODO: 인풋 박스를 만들고 입력된 값을 p 태그에 출력해보세요 -->
// v-model="인스턴스 내 변수명" : 실시간 데이터 바인딩
// v-bind:value와 비슷?
    <input type="text" v-model="message">
    <p>{{ message }}</p>
  </div>
  // 1. Vue CDN 링크 선언
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    // 2. Vue 인스턴스 생성
    new Vue({
      // 4. Root Element 매핑
      el: '#app',
      // 5. 데이터 선언
      data: {
        num: 10,
        uuid: 'abc1234',
        name: 'text-blue',
        loading: true,
        message: ''
      },
      // ★ 함수 같지만, 기존 data의 변수에서 일정 로직을 수행한 변수값
      // ★ 함수같은 변수이다.
      // 6. computed 변수 선언
      computed: {
        doubleNum: function() {
          return this.num * 2;
        }
      }
    })
  </script>

 

# 모르는 문법 찾기

- vuejs.org 내에서 검색하면 바로 예제 코드를 찾아볼 수 있음

- 서비스 구현에 필요한 대부분의 것은 vue.js에서 제공한다는 것을 가정

- 그래도 없을 경우, 기존 selector 방식으로 사용

 

methods.html

# methods 속성과 v-on:<view 사용자 이벤트명> 디렉티브를 통해 키보드, 마우스 이벤트 처리 방법

<div id="app">
    // v-on:<사용자 이벤트명>="메소드명"
    <button v-on:click="logText">click me</button>
    // v-on:keyup.enter : enter 키 이벤트 발생시 호출
    <input type="text" v-on:keyup.enter="logText">
    <button>add</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      methods: {
        logText: function() {
          console.log('clicked');
        }
      }
    })
  </script>