Vue.js 기초(4)_템플릿

이번에는 뷰 템플릿에 대해 알아보겠습니다.

 

뷰 템플릿: HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 부라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성

 

데이터 바인딩(Data Binding)

• HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미
• {{}} 문법과 v-bind 속성
• {{}} 은 지금까지 여러번 사용했으므로 딱히 설명드리지 않겠습니다.
• v-bind: HTML 속성값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png"><br/>
<!--    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
    <button v-on:click="getData">프레임워크 목록 가져오기</button>
    <p v-bind:id="id">아이디 바인딩</p>
    <p v-bind:class="classA">클래스 바인딩</p>
    <p v-bind:style="styleA">스타일 바인딩</p>

    {{ true ? 100 : 0 }}<br/>
    {{ reversedMessage }}

    <p v-if="flag">Good Vue.js</p>
    <ul>
      <li v-for="system in systems" v-bind:key="system">{{ system }}</li>
    </ul>
    <p v-show="flag">Better Vue.js</p>
    <h5 v-bind:id="uid">뷰 입문서</h5>
    <button v-on:click="popupAlert">Pop_Up</button>
  </div>
</template>

<script>
//import HelloWorld from './components/HelloWorld.vue'
import axios from 'axios'

export default {
  name: 'App',
  components: {
    //HelloWorld
  },
  data: function() {
    return {
      id: 4,
      classA: 'container',
      styleA: 'color: blue',
      message: 'Hello Vue.js!',
      flag: true,
      systems: ['android', 'ios', 'windows'],
      uid: 100
    }
  },
  methods: {
    getData: function() {
      axios.get('https://raw.githubusercontent.com/joshua1988/doit-vuejs/master/data/demo.json')
        .then(response => {
          console.log(response);
        });
    },
    popupAlert: function() {
      return alert('경고 창 표시');
    }
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('');
    }
  }
}
</script>

전에 썼던 코드에서 재사용하는 것이어서 관련이 없는 코드도 조금 있습니다.

그리고 미리 써둔 코드라 앞으로 다룰 내용도 들어있습니다.

<p v-bind:id="id">아이디 바인딩</p>
<p v-bind:class="classA">클래스 바인딩</p>
<p v-bind:style="styleA">스타일 바인딩</p>

이 부분이 HTML 문법으로 변형된 것을 알 수 있습니다.

 

자바스크립트 표현식

<!--    <p>{{ if(true) {return 100} }}</p>-->
    {{ true ? 100 : 0 }}
    <p>{{ message }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>
    {{ reversedMessage }}

이렇게 코드를 추가하신다면

결과가 나온다는 것을 알 수 있습니다.

이때 표현식을 사용할 경우 주의점이 있습니다.

1. 자바스크립트의 선언문과 분기 구문 사용불가
2. 복잡한 연산은 인스턴스 안에서 처리하고, 간단한 연산결과만 화면에 표시할 것

입니다.

제가 주석 처리한 것을 풀면 실행이 되지 않습니다.

그리고, 복잡한 연산의 경우 계산은 되긴 하지만, 코드 가독성을 높이기 위해 스크립트 단에서 계산을 하는 것이 바람직합니다. 

 

 

디렉티브

뷰 디렉티브 : HTML 태그 안에 v-접두사를 가지는 모든 속성 의미

    <p v-if="flag">Good Vue.js</p>
    <ul>
      <li v-for="system in systems" v-bind:key="system">{{ system }}</li>
    </ul>
    <p v-show="flag">Better Vue.js</p>
    <h5 v-bind:id="uid">뷰 입문서</h5>
    <button v-on:click="popupAlert">Pop_Up</button>

이렇게 적으면

이런 화면을 얻을 수 있습니다.

디렉티브에 대해 정리해 보겠습니다.

디렉티브 이름	역할
v-if	뷰 데이터 값의 참 & 거짓에 따라 해당 HTML 태그를 표시하거나 표시하지 않음
v-for	HTML 태그를 반복 출력
v-show	v-if와 비슷. 단 v-if는 태그를 표시하지 않지만, v-show는 태그는 남아있고 화면상에서만 표시가 되지 않음
v-bind	HTML 태그의 기본속성과 뷰 데이터 속성을 연결
v-on	화면 요소의 이벤트 감지 후 처리 ex) v-on:click은 클릭 이벤트를 감지하여 메서드 실행
v-model	form에서 주로 사용 watch와 같은 속성을 이용하여 추가 로직 수행 가능 input, select, textarea 태그에만 사용 가능

 

 

이벤트 처리

클릭이나 키보드 입력같은 이벤트를 처리합니다.

이를 위해 v-on 디렉티브와 methods 속성을 활용합니다.

<template>
	<div>
    	<p><button v-on:click="clickBtn">click</button></p>
    </div>
</template>

<script>
	export default {
    	methods: {
        	clickBtn: function () {
      			alert('clicked');
    		}
        }
    }
</script>

이런 식으로 하고 화면에서 클릭을 누르면

다음과 같이 볼 수 있습니다.

그리고 인자를 넘기는 법은

<template>
	<div>
    	<p><button v-on:click="clickBtn(10)">click</button></p>
    </div>
</template>

<script>
	export default {
    	methods: {
        	clickBtn: function (num) {
      			alert('clicked ' + num);
    		}
        }
    }
</script>

 

변경하시면 위에 화면에서 alert 창에 'clicked 10' 이라고 뜹니다.(캡쳐를 못했습니다.)

마지막으로 event 인자를 사용해보겠습니다.

<template>
	<div>
    	<p><button v-on:click="clickBtn">click</button></p>
    </div>
</template>

<script>
	export default {
    	methods: {
      		clickBtn: function (event) {
      			console.log(event);
    		}
        }
    }
</script>

그러면 해당 돔 요소의 이벤트 객체에 접근할 수 있습니다.

 

 

고급 템플릿 기법

: 실제 애플리케이션 개발 시 유용한 속성입니다.

computed 속성

위의 예제를 다시 사용하겠습니다.

<template>
  <div id="app">
    
    <p>{{ reversedMessage }}</p>

</template>

<script>
export default {
  name: 'App',
  data: function() {
    return {
      message: 'Hello Vue.js!'
    }
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('');
    }
  }
}
</script>

이렇게 작성하시면

이 화면을 볼 수 있습니다.

computed 속성의 특징이자 장점은

• data 값의 변화에 따라 자동적으로 다시 연산한다.
• 캐싱 효과 : 화면의 여러 곳에 가져다가 쓸 수 있다.

 

computed와 methods

• methods: 호출할 때만 해당 로직이 수행됨
• computed: 데이터 값이 변경되면 자동적으로 수행

<template>
  <div id="app">
    
    <p>{{ message }}</p>
    <button v-on:click="reverseMsg">문자열역순</button>

</template>

<script>
export default {
  name: 'App',
  data: function() {
    return {
      message: 'Hello Vue.js!'
    }
  },
  methods: {
  	reverseMsg: function() {
    	this.message = this.message.split('').reverse().join('');
        return this.message;
    }
  }
}
</script>

이러면 다음과 같은 화면을 볼 수 있습니다.

버튼을 누르면 역순으로 되는 것을 볼 수 있습니다.

 

watch 속성

• 데이터 변화를 감지하여 특정 로직을 수행합니다.
• 데이터 호출 같이 비동기 처리에 적합합니다.

코드로 보겠습니다.

<template>
  <div id="app">
    
    <p><input v-model="message"/></p>

</template>

<script>
export default {
  name: 'App',
  data: function() {
    return {
      message: 'Hello Vue.js!'
    }
  },
  watch: {
    message: function(data) {
      console.log("message의 값이 바뀝니다. : " + data);
    }
  }
}
</script>

그러면 

위의 화면을 얻을 수 있고

input 칸에 !를 추가해보면 콘솔창에 로그가 찍히는 것을 확인 할 수 있습니다.