Vue.js 템플릿 문법

뷰의 템플릿 문법이란 뷰로 화면을 조작하는 방법을 의미합니다. 템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉩니다.

데이터 바인딩#

데이터 바인딩이란 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법입니다. 가장 기본적인 데이터 바인딩 형식은 Mustache Tag입니다.

아래는 그 예제입니다,

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

new Vue({
  data: {
    message: 'Hello Vue.js',
  },
})

해당 코드는 div 태그에 {{}}(Mustache Tag)를 통해 뷰 인스턴스의 message속성을 연결해서 화면에 Hello Vue.js가 출력되게 됩니다.

데이터를 바꾸는 경우에는 computed를 사용하는 것이 좋습니다.

디렉티브#

디렉티브는 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법입니다. 화면 조작에서 주로 사용하는 방식들을 모아서 디렉티브 형태로 제공합니다. 예를 들어 아래와 같이 특정 속성 값에 따라 화면의 영역을 표시하거나 표시하지 않을 수 있습니다.

v-if 예제#

아래의 예시는 show의 속성값에 따라 Vue.js 텍스트가 출력되거나 되지 않습니다.

<div>Hello <span v-if="show">Vue.js</span></div>

new Vue({
  data: {
    show: false,
  },
})

v-for 예제#

또 다른 예시는 v-for 디렉토리를 통해서 데이터 속성의 개수만큼 화면의 요소를 반복하여 출력할 수 있습니다. 목록을 표현하는 경우 유용하게 사용가능합니다.

<ul>
    <li v-for:"item in items">{{item}}</li>
</ul>

new Vue({
  data: {
    items: ['shirts', 'jeans', 'hats'],
  },
})

이와 같이 사용할 수 있습니다.

v-on 예제 및 methods 속성#

<div id="app">
  <button v-on:click="logText">click me</button>
  <input type="text" v-on:keyup="logText" />
  <!-- <input type="text" v-on:keyup.enter="logText">-->
  <!-- .enter를 붙이면 modified(엔터 친 경우) 된 경우만 적용 -->
</div>

new Vue({
  el: '#app',
  methods: {
    logText: function() {
      console.log('clicked')
    },
  },
})

해당 예제는 "click me"를 클릭시 console 창에 clicked 메세지가 발생합니다. input에 v-on:keyup을 줌으로써, 입력하고 키보드를 떼는 순간 이벤트가 발생합니다. keyup.enter를 붙이게 되면 modified된 경우에만 적용하게 됩니다.

이예 대한 실제 코드는 아래에 적어놓았습니다.

그 외의 디렉티브#

주로 사용되는 디렉티브는 다음과 같습니다.

v-if / v-else
v-for
v-on
v-model
v-show (v-if 와 다르게 html element에 남아있습니다.)

이 외에도 다양한 문법을 알아야하는 경우에는 일일히 그에 따른 개념을 외울수는 없기 때문에 공식 문서에서 보면서 찾아야합니다.

공식 문서에 대한 링크는 다음과 같습니다.

Method#

뷰 메서드는 특정 기능 별로 묶을 수 있는 자바스크립트 함수를 의미합니다. 메서드는 뷰 템플릿의 버튼 이벤트 처리부터 HTTP 통신까지 다양한 성격의 코드로 구성됩니다.

Method 코드 형식#

일반적인 메서드 코드의 형식은 아래와 같습니다.

new Vue({
  methods: {
    // ...
  },
})

Method 예시 - 1#

기본적인 버튼 클릭 메서드입니다.

<button v-bind:click="clickButton">click me</button>

new Vue({
  methods: {
    clickButton() {
      alert('clicked')
    },
  },
})

해당 예시 코드는 click me를 클릭하면 경고창이 뜨고 알람이 발생합니다.

Method 예시 - 2#

화면 조작 외에도 특정 로직을 담을 수도 있습니다.

<button v-bind:click="displayProducts">Refresh</button>

new Vue({
  data: {
    products: [],
  },
  methods: {
    displayProducts() {
      this.fetchData()
      // ..
    },
    fetchData() {
      axios
        .get('/products')
        .then(function(response) {
          this.products = response.data
        })
        .catch(function(error) {
          alert(error)
        })
    },
  },
})

해당 코드에서 Refresh 버튼 클릭 시, displayProducts() 메서드가 실행되고, 이 메서드가 fetchData()를 호출합니다. 이런식으로 연결하게 되면, 특정 기능 별로 메서드를 분리할 수 있고 코드를 중복없이 사용할 수 있게 됩니다.

Computed#

Computed 속성은 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성입니다.

코드의 예시는 다음과 같습니다.

<div>{{ reverseMessage }}</div>

computed: {
    reverseMessage() {
        return this.messgae.split(' ').reverse().join(' ');
    }
}

computed 장점#

Computed 속성은 두가지의 장점이 있습니다,.

코드의 가독성을 높여줍니다.
Computed 속성의 대상으로 정한 data 속성이 변했을 때 이를 감지하고 자동으로 다시 연산해줍니다.

computed 주의사항 1 - computed 속성은 인자를 받지않습니다.#

아래는 잘못된 코드이며 정상적으로 동작하지 않습니다.

<div>{{ reverseMessage(false) }}</div>

computed: {
  reverseMessage(isReversed) {
    return isReversed ? this.message.split('').reverse().join('') : this.message;
  }
}

computed 주의사항 2 - HTTP 통신과 같이 컴퓨팅 리소스가 많이 필요한 로직은 정의하지 않습니다.#

비싼 비용의 로직은 작성하지 않습니다. 이는 watch나 method에 넣는 것이 적합합니다. 아래는 잘못된 코드입니다.

data: {
  message: ''
},
computed: {
  reverseMessage() {
    var vm = this;
    axios.get('/message').then(function(response) {
      vm.message = response.data;
    });
    return this.message.split('').reverse().join('');
  }
}

Watch#

watch 속성은 특정 데이터의 변화를 감지해서 자동으로 특정 로직을 수행해주는 속성 입니다.

코드 구현 형식은 다음과 같습니다.

new Vue({
  data() {
    return {
      message: 'Hello',
    }
  },
  watch: {
    message: function(value, oldValue) {
      console.log(value)
    },
  },
})

watch의 실용 문법은 아래와 같습니다.

watch 사용 방식 1 - watch 속성에 메서드 함수 연결#

watch 대상 속상에 함수 대신에 메소드를 연결하는 예시입니다.

new Vue({
  data() {
    return {
      message: 'Hello',
    }
  },
  methods: {
    logMessage() {
      console.log(this.message)
    },
  },
  watch: {
    message: 'logMessage', // 대상 속성과 메서드 함수를 매칭합니다.
  },
})

watch 사용 방식 2 - 핸들러와 초기 실행 옵션#

watch 대상 속성에 아래와 같이 handler()와 immediate 속성을 정의할 수 있습니다.

new Vue({
  data() {
    return {
      message: 'Hello',
    }
  },
  watch: {
    message: {
      handler(value, oldValue) {
        console.log(value)
      },
      immediate: true, // 컴포넌트가 생성되자마자 즉시 실행됩니다.
    },
  },
})

실제 코드#

watch.html

Computed vs Watch#

공식 document를 보면 computed와 watch property에 대한 이야기가 있습니다.

공식 document : computed vs watch

Vue는 Vue 인스턴스의 데이터 변경을 관찰하고 반응하는 watch 속성을 제공합니다. 다만, 다른 데이터 기반으로 변경할 필요가 있는 데이터의 경우에는 watch 속성 보다는 computed 속성이 좋습니다.

아래는 두 속성의 차이를 보여주는 코드입니다.

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
    el: '#demo',
    data: {
        firstName: 'Foo',
        lastName: 'Bar',
        fullName: 'Foo Bar'
    },
    watch: {
        firstName: function (val) {
            this.fullName = val + ' ' + this.lastName;
        },
        lastName: fucntion (val) {
            this.fullName = this.firstName +  ' ' + val;
        }
    }
})

위는 watch 속성을 이용한 코드입니다. 명령형이며 코드를 반복합니다.

아래는 computed를 이용한 코드입니다.

var vm = new Vue({
    el: '#demo',
    data: {
        firstName: 'Foo',
        lastName: 'Bar',
    },
    computed; {
        fullName: function() {
            return this.firstName + ' ' + this.lastName;
        }
    }
})

Filter#

뷰 필터는 화면에 표시되는 텍스트의 형식을 쉽게 변환해주는 기능입니다. 간단하게 단어의 대문자화부터 다국어, 국제 통화 표시 등으로 다양하게 사용할 수 있습니다.

필터 사용 방법#

<div id="app">
  {{ message | capitalize }}
</div>

new Vue({
  el: '#app',
  data: {
    message: 'hello',
  },
  filters: {
    capitalize: function(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    },
  },
})

위 코드를 실행시키면 hello가 아닌 Hello 텍스트가 화면에 나오게됩니다.

필터 등록 패턴#

filter 속성을 각 컴포넌트에 등록하는 방법도 있지만, 읿반적으로는 filter.js 파일을 별도로 분리해서 사용합니다.

// filters.js
export function capitalize() {
  // ..
}

export function translate() {
  // ..
}

// main.js
import Vue from 'vue'
import * as filters from 'filters.js'

Object.keys(filters).forEach(function(key) {
  Vue.filter(key, filters[key])
})

new Vue({
  // ..
})

다음과 같은 구조를 가지게 됩니다.

Form handling#

폼(Form)은 웹 어플리케이션에서 가장 많이 사용되는 코드 형식입니다. 로그인이나 상품 결제 등 모든 곳에 사용자의 입력을 처리하는 폼이 필요합니다.

간단한 로그인 Form 에시#

다음의 순서를 따라 구성할 수 있습니다.

예제 코드는 다음과 같습니다.

<form v-on:submit.prevent="loginUser">
  <div>
    <label for="email">Email</label>
    <input id="email" type="text" ref="email" />
  </div>
  <div>
    <label for="password">Password</label>
    <input id="password" type="password" ref="password" />
  </div>
  <div>
    <button type="submit">Login</button>
  </div>
</form>

new Vue({
  methods: {
    loginUser() {
      var email = this.$refs.email.value
      var password = this.$refs.password.value
      axios.post('/login', {
        email: email,
        password: password,
      })
    },
  },
})

이에 따른 설명은 아래의 원본 링크에서 더 자세히 볼 수 있습니다.

원본 링크