VueJS - 템플릿: 초보자 가이드

안녕하세요, 미래의 Vue.js 슈퍼스타! Vue.js 템플릿의 세계로의 흥미로운 여정에 당신을 안내하게 되어 기쁩니다. 컴퓨터 과학을 가르쳐온 지 오래된 저는 Vue.js가 가장 초보자 친화적인 프레임워크 중 하나라고 확신할 수 있습니다. 그럼, 안전벨트를 채우고 시작해보겠습니다!

Vue.js 템플릿이란?

코딩을 시작하기 전에 Vue.js에서 템플릿이 무엇인지 이해해 보겠습니다. 템플릿은 웹페이지의 골격을 상상해 보세요 - 여기서는 HTML의 구조를 정의하고 Vue.js 마법을 더해 동적이고 상호작용적인 만들어집니다.

기본 구조

여기에 간단한 Vue.js 템플릿을 보여드리겠습니다:

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

이 예제에서 {{ message }}는 Vue.js의 특별한 문법인 "인터폴레이션"입니다. 이는 Vue.js가 실제 데이터로 대체할 플레이스홀더입니다.

이제 이를 작동시켜 보겠습니다:

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

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})
</script>

이 코드를 실행하면 "Hello, Vue!"가 페이지에 표시됩니다. 마법이죠? 템플릿의 {{ message }}는 Vue 인스턴스의 데이터에서 message의 값을 대체합니다.

디렉티브: Vue의 특별한 지시

이제 디렉티브에 대해 이야기해 보겠습니다. 디렉티브는 v-로 시작하는 특별한 속성으로, Vue.js가 어떻게 행동해야 하는지 지시합니다. 이들은 HTML에 마법을 부는 작은 마법사입니다!

v-bind: 동적 속성

v-bind 디렉티브는 속성을 표현식에 동적으로 연결하는 데 사용됩니다. 이는 매우 일반적이기 때문에 생략형이 있습니다: :.

<div id="app">
  <a v-bind:href="url">Click me!</a>
  <!-- 생략형 -->
  <a :href="url">Click me!</a>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    url: 'https://vuejs.org/'
  }
})
</script>

이 예제에서 <a> 태그의 href 속성은 Vue 인스턴스의 데이터에서 url의 값으로 동적으로 설정됩니다.

v-if, v-else-if, v-else: 조건부 렌더링

이 디렉티브들은 표현식의 참/거짓 여부에 따라 요소를 조건부로 렌더링합니다.

<div id="app">
  <p v-if="seen">Now you see me</p>
  <p v-else>Now you don't</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

seen을 false로 변경하면 마법이 일어납니다!

v-for: 리스트 렌더링

v-for 디렉티브는 배열을 기반으로 아이템 목록을 렌더링합니다.

<div id="app">
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})
</script>

이렇게 하면 todos 목록을 렌더링합니다. 각 <li> 요소는 todos 배열의 각 아이템에 대해 생성됩니다.

이벤트 처리와 v-on

v-on 디렉티브는 DOM 이벤트를 듣고 발생할 때 JavaScript를 실행합니다. 이는 매우 유용하여 생략형도 있습니다: @.

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
  <!-- 생략형 -->
  <button @click="reverseMessage">Reverse Message</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>

버튼을 클릭하면 메시지가 뒤집혀집니다!

양방향 바인딩과 v-model

v-model 디렉티브는 폼 입력 요소나 컴포넌트에 양방향 바인딩을 생성합니다.

<div id="app">
  <input v-model="message">
  <p>The message is: {{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>

입력 필드에 입력하면 메시지가 실시간으로 업데이트됩니다. 마법 같지만, Vue.js입니다!

계산된 속성과 워처

계산된 속성

계산된 속성은 슈퍼파워가 있는 데이터 속성입니다. 다른 속성을 기반으로 계산된 속성입니다.

<div id="app">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

reversedMessage 속성은 항상 message의 반대로 설정되며, message가 변경될 때 자동으로 업데이트됩니다!

워처

워처는 데이터의 변화를 주시하고 변화가 발생할 때 작업을 수행합니다.

<div id="app">
  <p>
    Ask a yes/no question:
    <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    question: '',
    answer: 'Questions usually contain a question mark. ;-)'
  },
  watch: {
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },
  created: function () {
    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
  },
  methods: {
    getAnswer: function () {
      if (this.question.indexOf('?') === -1) {
        this.answer = 'Questions usually contain a question mark. ;-)'
        return
      }
      this.answer = 'Thinking...'
      var vm = this
      axios.get('https://yesno.wtf/api')
        .then(function (response) {
          vm.answer = _.capitalize(response.data.answer)
        })
        .catch(function (error) {
          vm.answer = 'Error! Could not reach the API. ' + error
        })
    }
  }
})
</script>

이 예제에서 우리는 question 속성을 주시합니다. 이 속성이 변경될 때 answer를 업데이트하고 API에서 새로운 답변을 가져오는 메서드를 호출합니다.

메서드 표

이제 우리가 다루었던 메서드를 요약하는 표를 보여드리겠습니다:

메서드	설명	예제
v-bind	동적으로 속성을 바인딩	<a v-bind:href="url">
v-if	조건부 렌더링	<p v-if="seen">Now you see me</p>
v-for	리스트 렌더링	<li v-for="item in items">{{ item }}</li>
v-on	이벤트 처리	<button v-on:click="doSomething">
v-model	양방향 데이터 바인딩	<input v-model="message">

이제 Vue.js 템플릿의 매력적인 세계로的第一步을 걸었습니다. 연습이 완벽을 만든다는 것을 기억하고, 이 개념들을 실험해 보지 마세요. 얼마 지나지 않아 놀라운 Vue.js 애플리케이션을 만들 수 있을 것입니다. 즐겁게 코딩하세요!

Credits: Image by storyset