문법 정리

데이터 바인딩

<template>
  <h4 :style="h4Style" :class="h4Class"> 키</h4>
  <p> {{ height }}cm </p>
</template>
<script>
export default {
  name : 'App',
  data(){
    return {
      height : 160,
	  h4Style : "color : blue",
	  h4Class : "newh4",
    }
  }
}

</script>

data() > return{ } 에 데이터를 선언 후 html에서 {{ }}(mustach expression)에서 변수를 호출
태그 내부에서 속성으로 사용할 때에는 :를 붙여서 선언

 

반복문 v-for

<template>
	<div class="menu" v-for="data in menuNames" :key="data">
	  <h3>{{ data }}</h3>
	</div>
	<div class="menu" v-for="(data, i) in menuNames" :key="data">
	  <h3>{{ menuNames[i] }}</h3>
	</div>
</template>
<script>
export default {
  name : 'App',
  data(){
    return {
      menuNames : [Burger, Pizza, Pasta, Fried Chicken],
    }
  }
}

</script>

반복하고 싶은 태그에 속성으로 v-for을 선언한다.
v-for="data in menuNames" :key="data"
menuNames의 크기만큼 반복하며 menuNames 배열의 자료가 순차적으로 data에 할당된다.
v-for="(data, i) in menuNames" :key="data"
속성에 변수가 하나 추가되었다.
index 변수를 추가하고 싶을 때 사용하는 방법으로, menuNames의 크기만큼 반복문이 돌 때 0부터 1씩 커진다.

 

Vue EventHandler

<template>
	<div class="menu" v-for="(el, i) in menuNames" :key="i">
	  <h3>{{ el }}</h3>
		<button @click="likeCnt[i]++">like : {{ likeCnt[i] }}<button>
		<button @click="increaseLikeCnt(i)">like : {{ likeCnt[i] }}<button>
	</div>
</template>
<script>
export default {
  name : 'App',
  data(){
    return {
      menuNames : [Burger, Pizza, Pasta, Fried Chicken],
	  likeCnt = [0, 0, 0, 0],
    }
  },
  methods : {
  	increaseLikeCnt(i) {
	  this.likeCnt[i]++;
	  alert('Thank you!');
	}
  }
}

</script>

태그 속성에 @를 붙여 이벤트를 생성한다.
ex) @click, @mouseover, @input, @keydown.enter 등등..
내부에 바로 JS 적용이 가능하고, 함수 호출도 가능하다.
함수는 methods 객체 내부에 선언되어 있어야 한다.
이벤트 수식어를 활용할 수 있다.

 

조건문 v-if

<div class="newModal" v-if="modalStatus">
  <h3>모달</h3>
	<p> 모달 페이지 입니다. </p>
</div>
<div>
	<button @click="modalStatus = true">모달 열기 버튼<button>
</div>
<script>
export default {
  name : 'App',
  data(){
    return {
      modalStatus : false,
    },
  }
}

</script>

상태에 따라 보여주고자 하는 html 태그의 UI 상태를 데이터로 저장해둔다.
예제에서는 modalStatus라는 데이터를 false로 선언해두었다.
태그 내에 v-if 속성의 값으로 선언한 데이터를 넣어주면 데이터의 true/false에 따라 UI 표시 여부를 판단한다.

 

import & export

(store.js)

let orange = 15;
export default orange
(App.vue)

<script>
import orange from'./store.js'

export default {
  name : "app",
  data(){
	return {
	  dataFromStore : orange,
	}
  },
}
</script>

 

다른 곳에서도 사용할 데이터를 내보낼 때는 export default + 변수명
export default는 파일 마지막에 딱 한번만 적을 수 있다.
import 변수명 from ‘경로’
경로에서 export한 데이터를 변수명으로 가져와서 사용할 수 있다.
import한 데이터 할당 시 원하는 변수명으로 받을 수 있다.

(store.js)

let orange = 15;
let banana= 4;
export { orange, banana }
(App.vue)

<script>
import { orange, banana } from'./store.js'

export default {
  name : "app",
  data(){
	return {
	  orange : orange,
	  banana : banana,
	}
  },
}
</script>

export 할게 많으면 export{변수명1, 변수명2, ...}를 사용한다.
export는 원하는 만큼 사용 가능하다.
export{변수명1, 변수명2, ...}에 대해서는 할당시 import한 변수명을 그대로 적어야 한다.

 

(store.js)

export default [
  {
	id : 0,
	name : "oragne",
	price : 15
  }, {
	id : 1,
	name : "banana",
	price : 7
  },
];
(App.vue)

<script>
import fruitsData from'./store.js'
	
export default {
	name : "app",
	data(){
		return {
			fruitsData,
		}
	}
}
</script>

export할 데이터가 많을 경우에는 export default 안에 데이터를 넣는 것이 편하다.
import한 변수명을 그대로 사용하고자 할 경우에는 예제처럼 이름만 선언해주어도 된다.(JS ES6 문법)

 

컴포넌트

html 반복을 피하고 재사용성을 극대화하기 위해 단위별로 분리한 것.

 

(ComponentPractice.vue)

<template>
  <h4> 제목 </h4>
  <p> 내용 </p>
</template>

<script>
  export default {
	name: "componentPractice",
}
</script>
(App.vue)

<template>
  <component>
  </component>
  혹은
  <component/>
<template/>    
    
<script>
  import component from './ComponentPractice.vue'
	
  export default{
	data(){
	},
	components : {
	  component,
	},
  }
</script>

.vue 파일의 컴포넌트를 생성한 뒤 import한다.
components 항목 안에 import시 생성한 변수명을 등록한다.
<변수명> 형태로 html을 사용한다.

 

과도한 컴포넌트 사용은 오히려 코드가 복잡해질 수 있다.

 

Props

부모 컴포넌트가 자식 컴포넌트에 데이터를 보내는 문법

 

<template>
  <component :dataObj="data" :dataNumber="2" dataString="abcd" />   
  //data(){}에 선언되어 있는 경우에는 데이터의 변수명을 입력
  //선언되어 있지 않은 경우 데이터의 값
  //선언되어 있지 않은 String 타입일 경우 :없이 사용 가능
</template>
  
<script>
  import component from './Component.vue'
	
  export default{
	data(){
	  return(){
		data : { title : "제목", content : "내용" },
	  }
	},
	  components : {
		component,
	},
  }
</script>

부모 컴포넌트에서 데이터 전송 App.vue의 자식 컴포넌트 태그에 속성으로 : 변수명=데이터
하단 data(){}에 선언되어있는 경우 : 변수명
선언되어 있지 않을 경우 : 데이터의 값(기본형, 배열 등등)
String일 경우 : 앞에 :을 붙이지 않고 변수명=”abcd”의 형태로 가능

 

(ComponentPractice.vue)

<template>
  <h4> {{ dataObj.id }} </h4>
  <p> {{ dataObj.content }} </p>
	<p> {{ dataNumber }}</p>
	<p> {{ dataString}}</p>
</template>

<script>
	export default {
	  name: "componentPractice",
	}, props : {
    dataObj : Object,
		dataNumber : Number,
		dataString : String,
  }
</script>

자식 컴포넌트에서 props 객체 내부에 전달받은 데이터의 이름을 선언하고 자료형을 그 값으로 등록
전달받은 데이터를 사용할 때에는 데이터 바인딩으로 사용
props로 전달받은 데이터는 readOnly.
값을 변경하기 위해서는 customEvent 문법을 사용해야 한다.
데이터를 처음부터 자식 컴포넌트에서 생성하면 안될까?
해당 컴포넌트에서만 사용하고 끝날 데이터라면 자식 컴포넌트에서 생성해도 상관없지만, 다른 컴포넌트에서도 사용할 데이터라면 해당 데이터를 사용하는 컴포넌트 중 최상단 컴포넌트에서 생성하는 것이 좋다.