Vue 기초 1

간단히 CDN으로 VUE script를 추가하여 html에서 바로 VUE를 사용할 수 있다.

 

아래의 주소를 html에 넣으면 된다.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

뷰 생성

먼저 div#hello를 만든 뒤 

script에 new Vue를 통해 인스턴스를 만들고, 그 안에 el에 css 셀렉터로 div의 아이디 값인 #hello를 적어주면 

div#hello안에는 이제 Vue를 사용할 수 있게 된다고 한다. 따라서 hi라는 data를 넣어서 잘 동작하는지 확인해보자!

 

아래는 html을 브라우저에서 실행시킨 화면이다. 잘 출력이 되는 걸 확인할 수 있다.

 

메서드

메서드도 만들어서 사용할 수 있다. 데이터를 조금 수정한 뒤에 메소드에서 데이터를 사용해보려고 한다.

다른 곳에서 data나 method에 접근하려면 this 키워드를 적어주면 가능하다. methods라는 걸 추가해주고 그 안에 함수를 만들어서 사용해보았다. 인자를 담으면 greeting이라는 배개변수로 받아 와서 사용할 수 있다.

데이터 바인딩

이번에는 데이터를 바인딩 해보려고 한다. input으로 예를 들어보자.

아래의 데이터를 인풋의 value에 넣어주기 위해선 v-bind:라는 것을 value속성앞에 붙여주면 데이터가 value에 들어가게 된다. method도 마찬가지이다. 태그 속성에 data, 혹은 method등을 사용하기 위해선 v-bind:를 붙여주면 되고, 태그 사이에 넣으려면 중괄호 두개 {{}}를 사용하면 된다.

 

v-bind:를 :로 줄여서 사용할 수 있다. a태그를 보면 v-bind를 생략한 것을 확인할 수 있다.

이벤트 리스너

메소드를 이벤트 함수로 사용할 수 있다. 버튼을 만들고 거기에 이벤트를 추가하려고 한다.

click 이벤트를 만들고싶다면 @click이나 v-on:click을 사용하면 된다. 그리고 거기에 메서드를 추가해주면된다.

더하기를 누르면 num이 1증가하고 반대로 빼기를 누르면 num이 1감소한다. 이건 화면에서 실시간으로 바뀌는데

그 이유는 data가 변경되면 재 렌더링이 되기 때문이다.

 

양방향 데이터 바인딩

Vue는 양방향 데이터 바인딩이 가능하다. input에 내가 데이터를 입력하면 그 데이터가 실시간으로 변경이 되고, 또 반대로 데이터를 변경하면 실시간으로 input에도 그 데이터가 반영이 된다. 이를 위해서 v-model을 사용하면 된다. 

text라는 데이터를 만들고 input에 v-model로 text를 적어주면 input에 적히는 값이 실시간으로 text에 반영이되고 text가 변경이 되었으니 재 렌더링을 통해서 화면의 text도 바뀌게 된다. 

computed와 watch

computed

{{ }} 중괄호 안에는 자바스크립트 문법을 사용할 수 있다. 따라서 간단한 연산을 넣는 것은 괜찮지만 너무 많은 연산을 하면 비대해지고 유지보수가 어려워지는 건 당연할 것이다.

 

이 때 활용할 수 있는 것이 computed이다. 어떤 연산의 단축키 같은 느낌이라고 생각하자.

div안의 내용을 예상하면 요세하녕안 이 출력이 될 것이다.

만약 저게 3개가 있다고 가정하고, 하나가 수정이 된다면 일일이 다 바꿔줘야 하는 불편함이 생긴다. 

이렇게 computed를 만들고 중괄호 안에 적어주면 쉽게 사용할 수 있다.

method도 이러한 역할을 할 수 있지 않을까??

그렇다 가능하다! 하지만 조금의 차이가 있다. 먼저 함수이기에 중괄호 안에서 실행을 시켜주어야 한다.

반면에 computed는 변수명처럼 적어주기만 하면 되었다.

 

차이점은 computed 속성은 종속 대상을 따라 저장(캐싱)된다는 것이다. computed 속성은 해당 속성이 종속된 대상이 변경될 때만 함수를 실행한다. 즉 message가 변경되지 않는 한, computed 속성인 reversedMsg를 여러 번 요청해도 계산을 다시 하지 않고 계산되어 있던 결과를 즉시 반환한다.  반대로 method는 호출이 될 때마다 매번 새로 실행이 된다고 한다.

 

또한 Date.now()처럼 아무 곳에도 의존하지 않는 computed 속성의 경우 절대로 업데이트되지 않는다는 뜻이다.

자주 사용한다면 computed에 넣어두는 것이 좋을 것 같다. 그리고 속성이 업데이트 되지않는다면 무조건 쓰는게 좋을듯??

computed: {
  now: function () {
    return Date.now()
  }
}

 

watch

watch는 특정 데이터의 변화를 감시하고 변하면 실행되는 명령문이다.

여기서 메서드 changeWord를 누르면 msg가 바뀌게 되고 이게 바뀌면 watch에서 감지를하여 msg(data와 이름이 같아야함)함수가 실행이 된다. 여기서 첫번째 param에는 새롭게 바뀐 데이터가, 두번째 param에는 바뀌기 전 데이터가 들어있다. 따라서 이를 콘솔에 찍고 updqted의 data까지 바꿔주는 기능을 만들어 보았다.

여기서 버튼을 누르게 되면 아래와 같이 바뀐다.

computed또한 데이터가 바뀌면 다시 실행이 되는 것을 비슷하니까 적절히 상황에 따라 사용하면 될 것 같다.