Vue template 문법

쵸리·2022년 2월 13일

vue

Vue

목록 보기

2/2

Vue의 기본 구조

＜template＞

HTML 문법을 적는 공간 디렉티브를 사용하여 데이터 바인딩이 가능하다. v-text, v-bind, v-for, v-if 등등

＜script＞

JS 문법을 적는 공간 파일들을 불러와서 사용할때 와 상위 컴포넌트에서 하위 컴포넌트를 포함할 때 쓰는 import 와 data()와 methods, 반환이 필요할때 computed 등등 사용할 수 있다.

＜style＞

CSS, SCSS 문법을 적는 공간 SCSS 사용시에는 lang="scss"라고 쓰고 또 다른 vue파일과 css가 겹치지 않도록 scoped를 써준다 scoped는 현재 컴포넌트의 엘리먼트에만 적용된다. 즉 scss를 사용하고 현재 컴포넌트에만 css를 적용하려면
＜style lang="scss" scoped> 써주면 된다.

https://vuejs.org/guide/essentials/template-syntax.html

Vue 자주 사용하는 template 문법 정리

보간법 ( Interpolation )

＜script＞안 data()안에 작성한 key를 ＜template＞에 데이터 바인딩을 할 수 있는 가장 기본 형태 "Mustache" ( 머스타치 이중 중괄호 )를 사용한 텍스트 보간 방법
일반 text로 데이터를 해석
<template>
	<h1>Hello {{ animal }} </h1>
</template>
<script>
export default {
	data() {
    	return {
        	animal: "Monkey"
        }
    }
}
디렉티브 ( Directives )

디렉티브는 v- 접두사가 있는 특수 속성이다. 디렉티브 속성 값은 단일 JavaScript 표현식이 된다. ( v-for 는 예외 ) 디렉티브의 역할은 표현식의 값이 변경될 때 사이드이펙트를 반응적으로 DOM에 적용한다.

v-text

보간법과 동일하게 ＜script＞안 data()로 ＜template＞에 데이터 바인딩 할 수 있는 방법
<template>
	<h1 v-text="animal" />
</template>
<script>
export default {
	data() {
    	return {
        	animal: "Hello Monkey"
        }
    }
}
※ {{ }} 와 v-text의 차이점

{{ }}는 엘리먼트안에 다른 text가 있어도 되지만 v-text는 다른 text가 있을 경우 오류가 난다.
<h1 v-text="animal"></h1> O
<h1 v-text="animal">123</h1> X
{{ }}는 닫는 태그를 생략 못하고 v-text는 닫는 태그를 생략할 수 있어 코드가 간결해진다.
<h1>Hello {{ animal }}</h1>
<h1 v-text="animal" />
v-model

form 엘리먼트에서 주로 사용된다. form에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다. 화면에 입력된 값을 저장하여 서버에 보내거나 watch와 같은 고급 속성을 이용하여 추가 로직을 수행할 수 있다. ＜input＞, ＜select＞, ＜textarea＞ 엘리먼트에만 사용할 수 있다.
<template>
	<h2>원숭이는 {{ food }}를 좋아합니다.</h2>
    <h2 v-text="food" />
	<input type="text" v-model="food" />
</template>
<script>
export default {
  data() {
    return {
    	food: "banana"
    }
  }
}
</script>
data()에 데이터 만들고 ＜input＞에 v-model로 데이터 바인딩 하고 input 입력값에 따른 실시간 동기화를 쓸곳에 {{ }}나 v-text로 바인딩 해주면 된다.

v-bind

HTML 태그의 기본 속성과 뷰 데이터 속성을 연결한다.
v-bind 디렉티브를 줄여쓰는 방법 v-bind:src -> :src 로 작성 가능
<template>
	<a :href="naverUrl">naver</a>
</template>
<script>
export default {
  data() {
    return {
    	naverUrl: "https://www.naver.com"
    }
  }
}
</script>
v-bind로 동적으로 클래스 변경하기
<template>
	<input type="text" v-model="food" />
	<h2 :class="{ red: food === 'apple', 'not-good': food === 'rice' }">
         원숭이는 {{ food }}를 좋아합니다.</h2>
</template>
<script>
export default {
  data() {
    return {
    	food: "banana"
    }
  }
}
</script>
<style>
.orange {
	color: orange;
}
.salmon {
	color: salmon;
}
.red {
	color: red;
}
.not-good {
	text-decoration: line-through;
}
</style>
input에 apple을 입력하면 글자색이 빨간색으로 변하고 rice를 입력하면 가운데 선이 생긴다 근데 not-good같이 클래스명에 '-'가 있는건 key를 ''로 해야한다. 안그러면 스크립트가 인식을 못한다.

v-if

지정한 뷰 데이터의 참, 거짓에 따라 HTML 표시 여부를 선택한다.
<template>
  <h2>당신의 나이는 {{ age }} 입니다.</h2>
  <h3 v-if="age > 18">당신은 어른입니다.</h3>
  <h3 v-else-if="age > 13 && age <= 18">당신은 청소년 입니다.</h3>
  <h3 v-else>당신은 어린이 입니다.</h3>
</template>
<script>
export default {
  data() {
    return {
      age: 30
    }
  }
}
</script>
age 값에 따라 h3 3개중에 조건식이 맞는 엘리먼트가 보여진다.

※ v-if,v-else-if,v-else 사이에 그냥 일반 엘리먼트를 쓸경우 오류가 나고 그리고 같은 형제여야 한다는 조건이 있다.

v-show

v-if와 유사하게 데이터의 참, 거짓에 따라 HTML 표시 여부를 선택한다. 단, v-if는 해당 태그를 완전히 삭제하지만 v-show는 css로 display: none; 처리가 된다.
<template>
  <h2 v-if="display">(if)보입니다!!</h2>
  <h2 v-show="display">(show)보입니다!!</h2>
</template>
<script>
export default {
  data() {
    return {
      display: true
    }
  }
}
</script>
true일때는 둘다 보인다.
<template>
  <h2 v-if="display">(if)보입니다!!</h2>
  <h2 v-show="display">(show)보입니다!!</h2>
</template>
<script>
export default {
  data() {
    return {
      display: false
    }
  }
}
</script>
false일 경우 v-if는 아에 엘리먼트조차 생성되지 않았고 v-show같은 경우는 엘리먼트는 생성되었지만 display: none; 처리가 된다.

v-for

지정한 뷰 데이터의 개수만큼 엘리먼트를 반복출력한다.
( List만들때 주로 사용 List의 갯수가 많을 경우 따로 컴포넌트를 빼서 만든다. )
주로 array나 object로 많이 사용한다. ( v-for는 :key를 안적어 줄경우 오류가 난다. :key자리엔 index가 들어간다. )
<template>
  <h2 v-for="(item, idx) in animals" :key="idx">
	{{ item }} 인덱스는 :: {{ idx }}
  </h2>
</template>
<script>
export default {
  data() {
    return {
    	animals: ['monkey', 'rat', 'dog', 'lion', 'monkey']
	}
  }
}
v-for 가장 많이쓰는 상황