6.[Vue.js] method, computed, watch

티스토리 뷰

Skill/Programming - Server & Client

6.[Vue.js] method, computed, watch

gyulee0220 2019. 12. 7. 01:13

1. Vue.js 함수 사용

javascript 함수를 통해 Vue.js 구축이 가능하다. javascript에서 기본적으로 제공해주는 함수는 물론이고 우리가 임의로 작성한 함수를 활용해 우리가 원하는 값을 웹 브라우저로 보여줄 수 있다. 두가지 모두 살펴보기로 하자.

- Date 함수 사용

javascirpt에서는 Date 오브젝트와 함수를 통해 현재 날짜에 대한 기본 함수를 제공한다.

new Date() : 날짜 함수를 사용하기 위한 생성자

date.getTime() : 현재 시각 출력 (사용자 입장에서 보기 불편하다.)
date.getFullYear() : 연도 출력
date.getMonth() : 월 출력
date.getDay() : 일 출력

이를 활용한 오늘 날짜를 출력해주는 페이지를 만들 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>클라이언트 구축 3</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <h2>Vue.js Date</h2>
    <div id="instance">
      <img v-bind:src="img" width="150px" height="150px"></img>
      <div>
        Today : {{ date.getFullYear() }} - {{ parseInt(date.getMonth()) + 1 }} - {{ date.getDay() }}
      </div>
    </div>
    <script type="text/javascript">
      var app = new Vue({
        el: '#instance',
        data () {
          return {
            img: 'https://kr.vuejs.org/images/logo.png',
            date: new Date()
          }
 
        }
      })
    </script>
  </body>
</html>
 
Colored by Color Scripter
cs

- 사용자 변수 사용

이번엔 직접 함수를 만들어서 사용해보자. 실제로 웹 페이지를 개발하게 된다면 javascirpt로 직접 구현한 메소드를 사용할 확률이 매우 높다. 대부분의 사이트가 단순히 정보 제공을 그치는 것이 아니라 사용자가 직접 정보를 생산하거나 자신의 요구에 맞게 데이터를 조회하려고 하기 때문이다.

JavaScript에서 변수를 만들기 위해서는 method 객체를 새로 생성하고 이 안에 함수를 선언해주면 된다.

그리고 전체 웹 페이지 코드를 보면 아래와 같이 구현된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>클라이언트 구축 3</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <h2>Vue.js Date</h2>
    <div id="instance">
      <img v-bind:src="img" width="150px" height="150px"></img>
      <div>
        Result : {{ sum() }}
      </div>
    </div>
    <script type="text/javascript">
      var app = new Vue({
        el: '#instance',
        data () {
          return {
            img: 'https://kr.vuejs.org/images/logo.png',
          }
        },
        methods: {
          sum: function () {
            return 1 + 1
          }
        }
      })
    </script>
  </body>
</html>
 
Colored by Color Scripter
cs

2. computed 속성

만약 데이터 속성이 바뀌게 되어서 필요할 떄마다 함수를 계산하게 된다면 method를 이용해야 한다. 하지만 계산값이 변화가 없이 계산되는 경우엔 computed 속성이 더욱 효율적이다. computed의 경우 한번 웹 페이지 로딩 작업을 실시하면 다시 값을 계산하지 않고 캐싱되어 값을 저장한다. 반대로 method 방식은 값이 변경 되었는지 확인하지 않고 호출할 때마다 메소드를 실행하게 되므로 페이지의 과부화가 올 수 있다.

computed 속성의 경우 한번 호출된 이후 다시 계산하지 않으므로 메소드의 인자를 입력할 필요가 없다.

Result : {{ sum }}

-> computed에서 사용

Result : {{ sum() }}

-> methods에서 사용

만약 위의 웹 페이지를 computed 방식으로 전환한다면 아래와 같은 코드가 나온다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>클라이언트 구축 3</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <h2>Vue.js Method</h2>
    <div id="instance">
      <img v-bind:src="img" width="150px" height="150px"></img><br>
      <div>
        Result : {{ sum }}
      </div>
    </div>
    <script type="text/javascript">
      var app = new Vue({
        el: '#instance',
        data () {
          return {
            img: 'https://kr.vuejs.org/images/logo.png',
          }
        },
        computed: {
          sum: function () {
            return 1 + 2
          }
        }
      })
    </script>
Colored by Color Scripter
cs

3. Watch 속성

watch 속성은 vue 인스턴스 내에서 데이터를 감시하는 기능을 수행한다. watch 안에 감지하고 싶은 데이터를 선언해주면 그 값이 변경된 경우 어떻게 처리할지 정의를 내려주어야 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>클라이언트 구축 3</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <h2>Vue.js Method</h2>
    <div id="instance">
      <img v-bind:src="img" width="150px" height="150px"></img><br>
      <input type="number" name="" v-model:value="a">
      <div>
        Result : {{ sum }}
      </div>
    </div>
    <script type="text/javascript">
      var app = new Vue({
        el: '#instance',
        data () {
          return {
            img: 'https://kr.vuejs.org/images/logo.png',
            a: 1,
            sum: 1,
          }
        },
        watch: {
          a: function (e) {
            this.sum += parseInt(e)
          }
        }
      })
    </script>
  </body>
</html>
Colored by Color Scripter
cs

만약 input태그를 통해 값을 입력하게 되면 result에 값을 더해서 계산해주는 함수를 만들 수 있다. watch 안에 input 태크를 바인딩한 a 변수를 넣어주면 Vue 인스턴스에서 값을 읽을 수 있다.

4. Vue.js 응용

앞서 배운 지식들을 응용해 프로그램 페이지를 한번 만들어보자. 농구에서 각 선수의 야투율을 계산해주는 웹 사이트를 제작한다고 하자.

야투율의 공식은 매우 간단하다.

야투율 = 야투 성공 / 야투 시도 * 100%

즉, 야투율을 구하기 위해서는 총 2가지 변수가 필요한데 그것이 야투 성공과 야투 시도이다. 우리는 입력값으로 이 두가지를 사용해야 한다. 또한 사람들의 편의성을 위해 선수 이름을 넣는 부분도 추가한다.

- 필요 입력 변수

1. 선수 이름 (name)

2. 야투 성공 횟수 (fgm)

3. 야투 시도 횟수 (fga)

총 이 세가지를 입력 변수로 지정해주어야 한다.

- HTML

1
2
3
4
5
6
7
8
9
    <div id="instance">
      <img v-bind:src="img" width="150px" height="150px"></img></br>
      <h3>Field Goal Percentage of Player</h3><br>
      <input type="text" name="" v-model="name"><br>  <!-- 선수 이름 -->
      <input type="number" v-model="fgm"><br>  <!-- 야투 성공 -->
      <input type="number" v-model="fga"><br>  <!-- 야투 시도 -->
      <div>Name : {{ name }}</div>
      <div>FG% : {{ result }} %</div>
    </div>
Colored by Color Scripter
cs

input 1 (name) : text로 입력 선언

-> {{ name }} 으로 바인딩 됨

input 2 (fgm) : number로 입력 선언

input 2 (fga) : number로 입력 선언

result : 결과 값이 노출

- JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
      var app = new Vue({
        el: '#instance',
        data() {
          return {
            img: 'https://kr.vuejs.org/images/logo.png',
            name: '',
            fga: 1,
            fgm: 1,
          }
        },
        computed: {
          // fg % = (fgm / fga) * 100
          result: function() {
            return (this.fgm / this.fga * 100).toFixed(2)
          },
        }
      })
Colored by Color Scripter
cs

이런 식으로 코드를 구성하게 되면 다음과 같이 야투율 계산용 사이트가 완성된다.

사이트 주소 : https://adrian0220.github.io/Webclient/pgpcalculate.html

저작자표시 동일조건

'Skill > Programming - Server & Client' 카테고리의 다른 글

8.[Vue.js] 이벤트 핸들링 (0)	2019.12.21
7.[Vue.js] 조건부 렌더링, 리스트 렌더링 (0)	2019.12.15
5. [Vue.js] 데이터 바인딩 응용 (0)	2019.12.01
4. Vue.js 인스턴스, 데이터 바인딩 (0)	2019.11.24
3. Angular.js를 이용한 웹 사이트 (0)	2019.11.14

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

글 보관함

Adrian's Web Page

티스토리 뷰