[데브코스/TIL] DAY84 - Vue(2)

🎨 디렉티브

1. v-for

배열

• 값만 참조 : v-for="value in array"
• 값 & 인덱스 참조 : v-for="(value, index) in array"
• 배열 처리
  • 필터 : v-for="value in array.filter(...)"
  • 포함 : v-for="value in array.includes('a')"
  • 하던대로!

객체 배열

• 값의 속성 접근 : <li v-for="value in array">{{ value.name }}</li>

객체

• 값과 키 참조 : v-for="(value, key) in obj"

template 태그

• 최상위의 template 태그는 vue의 컴포넌트를 하나로 묶는 역할을 한다. (하나만 존재)
• 최상위의 template 태그 안에 template 태그가 존재할 수 있다.
  • 이때, template 태그 자체는 DOM에 렌더링되지 않는다.
• <template *v-for*="option in product.options"><p>{{ option.name }}</p></template>

2. v-model

• v-model로 폼 요소를 다룸
• 입력한 요소의 값을 가져올 때 사용
• script 태그의 데이터와 template 태그의 HTML 요소가 양방향으로 연결됨
  • 폼을 이용해 값이 변경될 경우, script 태그의 데이터에도 변경된 값이 적용됨

input

<label for="uid">
  <span>아이디</span>
  <input v-model="uid" type="text" id="uid" />
</label>

textarea

<label for="description">
  <span>상세내용</span>
  <textarea v-model="description" id="description" />
</label>

checkbox

<div>
	<label>
	  <span>Seoul</span>
	  <input
		  v-model="cities"
	    type="checkbox"
	    id="seoul" />
	</label>
	<label>
	  <span>Incheon</span>
	  <input
		  v-model="cities"
	    type="checkbox"
	    id="incheon" />
	</label>
	<label>
	  <span>Busan</span>
	  <input
		  v-model="cities"
	    type="checkbox"
	    id="busan" />
	</label>
</div>

radio

<label>
	<input
		v-model="gender"
		type="radio"
		name="gender"
		value="male"
	/>
	male
</label>
<label>
	<input
		v-model="gender"
		type="radio"
		name="gender"
		value="female"
	/>
	female
</label>

range

<label>
  <input
    v-model="range"
    type="range"
    min="0"
    max="100"
  />
</label>

select-option

<label>
	아이템
	<select v-model="selectedItem">
		<option value="item 1">item 1</option>
		<option value="item 2">item 2</option>
		<option value="item 3">item 3</option>
	</select>
</label>

🎨 CSS 적용하기

1. 인라인 스타일

<template>
	<h1 style="color: red; font-weight: bold;">인라인 스타일</h1>
</template>

2. v-bind 디렉티브

<script>
	export default {
		data() {
			return {
				color: 'red',
        weight: 'bold',
			}
		}
	}
</script>
<template>
	<h1 :style="{ color: color, fontWeight: weight }">v-bind 디렉티브</h1>
</template>

3. 내부 스타일

• scoped : 선택 가능한 설정
  • 설정하지 않으면 모든 컴포넌트에 적용
  • 설정하면 해당 컴포넌트에만 적용

<template>
	<h1>내부 스타일</h1>
</template>
<style scoped>
	h1 {
		color: red;
	}
</style>

4. 외부 스타일

• css 파일을 따로 작성하는 방법
  • 보통 뷰에서는 src/assets/css/ 안에 작성함

// index.css
h1 {
	color: red;
}

<style>
	@imort '../src/assets/index.css';
	
	// 혹은 아래와 같이 alias로 사용 가능
	@import '~/index.css';
</style>

alias 적용

// vite.config.js

export default defineConfig({
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '~': fileURLToPath(new URL('./src/assets', import.meta.url)),
    },
  },
});

🎨 CSS 라이브러리 적용하기

1. BootStrap

• 설치 ⇒ npm install bootstrap
• 최상위에 import문 추가
  • import 'bootstrap';
  • import 'bootstrap/dist/css/bootstrap.css';

2. Tailwind CSS

• 평소 하던대로 (프레임워크 가이드에 맞춰서 설정)
• tailwind.config.js에서 파일 확장자에 vue 추가

3. SASS

• 설치 ⇒ npm install --save-dev sass sass-loader
• style 태그에 scss 적용 가능 ⇒ <style lang="scss" scoped>...</style>

4. Styled Components

• Vue Styled Components
• 설치 ⇒ npm install @vue-styled-components/core
• script 태그 추가 ⇒ <script setup> 여기에 스타일 컴포넌트 작성 </script>

📌 출처

수코딩(https://www.sucoding.kr)