[SI에서 살아남기] 내맘대로 예시와 함께 공부하는 Vue.js [1] (export ,data,methods,computed,watch)

Vue.js란?

• 사용자 관점의 인터페이스를 만들기 위한 프레임워크 이다.
• Vue.js를 사용하게 되면 편리하게 구문을 이용하여 DOM에서의 데이터를 추가/변경/삭제 할 수 있다.

학습 방법: 정의 -> 예시 -> 설명

*export default{}

• ES6의 모듈 문법으로 다른 곳에서 한 객체나 메서드,데이터를 사용하고자 할때 쓸 수 있는 것입니다.

Example) 

// A.js
<script>
	export default{}
</script>

// main.vue
<script>
	import A from 'A';
</script>

export 내에 있는 데이터를  import 하여 사용 할 수 있음. 

 

 

 

*data()

• 원하는 변수와 원하는 값을 마치 Java 맵타입처럼 저장 할 수 있음.

Example)

//A.js
<script>
  export default{
    data(){
      return{
        abc: "wow",
        isAbc: "true"
    }
  }
</script>

// main.vue
<template>
  <div v-if="isAbc">
    {{abc}}
  </div>
</template>

<script>
	import A from 'A'
</script>

실행 결과

wow

 

A.js => data()를 설정함. 변수 abc,isAbc

main.vue => 

{{abc}} = A.js에서 data()내에 있는 abc 값을 dom객체에 전달한다.

v-if = if문처럼 isAbc가 true일 때만 실행 (예제는 실행 됨.)

 

※ data()에 Key들은 v-if,{{},v-model 등의 방식으로 사용 가능하다. 하지만 저는 model을 모릅니다.. Soorrrryyy

※ data function(){return} 도 가능하고 data()=>{return}도 가능하지만 화살표는 사용하는걸 this 방식을 사용 할 수 없ㄱ기때문에 사용하지 않는다.(제가 적었던 방식은 ES6 문법에서 function을 생략해도 인식해준다.)

 

 

 

 

*methods{ function(){ } }

• 원하는 이벤트 처리나 데이터 변경 등 메서드 선언

//A.js
<script>
  export default{
    data(){
      return{
        abc: "wow",
        isAbc: "true"
      },
    methods:{
      changeAbc(){
          this.isAbc="false";
      }
    }
  }
</script>

// main.vue
<template>
  <button v-on:click="changAbc">버튼</button>
  <div v-if="isabc">
      {{abc}}
  </div>
</template>
<script>
	import A from 'A'
</script>

실행 결과

[버튼]   => 클릭시 <div></div> 사라짐

wow

 

A.js => methods에 원하는 이름의 메서드 선언

main.vue => methods를 버튼 v-on:click에서 사용, 버튼 클릭시 메서드 실행

 

※버튼 내에 v-on:click 이외의 이벤트들은 vue.js Api 참조 하세욤 v-on Api 보기

 

 

 

*computed

• 선언형 프로그래밍 방식( 리턴으로 무엇을 나타낼지 선언하는 방식)
• 원하는 메서드나 이벤트 등을 선언함.

//A.js
<script>
  export default{
    data(){
      return{
        abc: "wow",
        isAbc: "true"
      },
    methods:{
      changeAbc(){
          this.isAbc="false";
      }
    },
    computed:{
      getAbc(){
          if(this.abc==="wow"){
              return "LoL";
          }
      }
    }
  }
</script>

// main.vue
<template>
  <button v-on:click="changAbc">버튼</button>
  <div v-if="isabc">
      {{abc}}
      {{getAbc}}
  </div>
</template>
<script>
	import A from 'A';
</script>

실행 결과

[버튼] => 클릭시 <div></div> 사라짐

wow

LoL

 

A.js => computed에 원하는 이름의 메서드 선언

main.vue => {{getAbc}}를 사용하여 computed 의 getAbc()의 리턴 값을 가져옴.

 

@computed vs methods

computed

• 한번쓴 계산값을 캐시에 저장하여 계속 가져온다.
• return 반드시있어야함
• 사용방법 {{ 변수명 }}

methods

• 사용 할 때 마다 실행하여 값을 가져온다.
• 사용방법 {{ 변수명() }}

예를 들어 Data.now()라는 메서드를 쓸 경우 명확히 차이를 알 수 있다.

Data.now()가 사용된 method와 computed의 변수를 태그 내에 반복적으로 사용 할 경우 

method는 값이 계속 바뀌지만 computed는 처음에 실행 했던 값만 가져온다.

 

즉) 같은 페이지 내에서 같은 연산을 여러번 해야 한다면 computed 사용을 권장한다.

 

*watch

• vue 인스턴스의 특정 프로퍼티가 변경될때 지정한 함수가 실행되는 것임
• 특히나 비동기 계산, 복잡한 계산을 하고자 할때 watch를 사용한다.
• 명령형 프로그래밍 방식( 데이터가 바뀌면 특정 함수를 실행하는 방식)
•  (예제는 생략하겠습니다. 공부 후 추후 삽입 할 예정) 

 

 

본 글은 다소 주관적인 생각들을 포함하고 있어, 잘못된 정보를 제공할 수도 있습니다. 부족한 점이 있으면 댓글 남겨주세요. 추가 및 수정 하도록 하겠습니다. 감사합니다.