선언적 렌더링과 입력 핸들링

단일 파일 컴포넌트 SFC (Single File Component)

Vue라는 확장자로 만들어져 있는 하나의 파일을

'단일의 파일로 만들어져있는 컴포넌트'라는 개념으로 부름

템플릿, 스크립트, 스타일 이 세 태그로 구성해줄 수 있음

템플릿: html(Vue 문법)

스크립트:자바스크립트(Vue 문법)

스타일:CSS(SCSS은 설정 살짝 추가해줘야 함)

: <style lang="scss">

대부분 템플릿이나 스크립트는 필요하기 때문에 냅두고,
스타일 태그는 필요 없으면 지워도 됨

첫번째 예시

<template>
 <h1>{{count}}</h1>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>
<style>
  h1 {
    font-size: 50px;
    color:royalblue;
  }
</style>

두번째 예시

<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
</template>

<script>
export default {
//데이터 정의
  data() { 
    return {
      count: 0
    }
  ,
  },
//이벤트의 핸들러 설정
  methods: {
    increase() {
      this.count += 1
    }
  }
}
</script>

<style>
h1 {
  font-size: 50px;
  color: royalblue;
}
</style>

여기서 중요한 건 데이터를 갱신하면 그것이 연결된 브라우저의 화면도 같이 갱신된다는 것임

→ 반응성 Reactivity

데이터를 갱신하면 화면도 바뀐다!

—참고—

//메소드. 콜론 기호랑 펑션 키워드 생략 가능
export default {
  data: function () {}
}
//위에 녀석이 일케 바뀜
export default {
  data() {}
}

조건문과 반복문

조건문

v- 으로 시작하는 속성 : 디렉티브 Directive

v-if

v-if라는 html 속성으로 조건문 만들 수 있음

<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
  <div>
    4보다 큽니다!
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  ,
  },
  methods: {
    increase() {
      this.count += 1
    }
  }
}
</script>

div 안의 내용이 숫자가 4보다 클 때 화면에 나오도록 해보자

<div v-if="count > 4">

반복문

v-for

반복문을 사용할 때 필요한 것이 배열데이터라는 걸 기억해두셈

<template>
    <ul>
        <li 
            v-for="fruit in fruits" 
            :key="fruit">
            {{ fruit }} 
        </li>
    </ul>
</template>

<script>
    export default {
        data() {
            fruits: ['Apple', 'Banana', 'Cherry']
        }
    }
</script>
/*브라우저에는 일케 나옴
Apple
Banana
Cherry
*/

fruits라는 반복되는 배열 데이터 만듦

배열 안에 아이템 만큼 반복해서 그걸 fruit라는 변수에 할당해서

그 변수를 li태그 내부에서 데이터로서 활용

데이터를 반복할 때는
각각의 데이터가 고유한 지를 증명하기 위해 key라는 속성을 콜론 기호와 함께 제공해줘야함
그래서 아이템이 한번씩 들어가서 각각의 li 태그들이 고유하다는 걸 증명하는 거임

항상 뷰나 리액트, 스벨트, 앵귤러 같은 모던한 프론트엔드 프레임워크들은 데이터를 기반으로 해서 화면이 출력되는 것을 고려해야 함

데이터를 굉장히 잘 다룰 수 있어야지만 화면에 출력되는 내용들도 잘 만들어낼 수가 있음

components를 통해 fruits를 출력해보자

—과정—

컴포넌트 생성 Fruit.vue

<template>
  <li>
    {{ name }}
  </li>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped lang="scss"> 

</style>

만든 컴포넌트를 App.vue에 가져와 연결한 후에 html 부분(템플릿)에서 활용

<template>
  <ul>
    <Fruit  
    v-for="fruit in fruits" 
    :key="fruit"
    :name="fruit">
      {{ fruit }}
    </Fruit>
  </ul>
</template>

<script>
import Fruit from '~/components/Fruit'
export default {
  components: {
    // hello: Fruit 직관적이지 못한 네이밍
    // Fruit: Fruit 속성 이름과 데이터 이름이 같으면 아래처럼 사용 가능
    Fruit
  },
  data() {
    return {
      count: 0,
      fruits: ['Apple', 'Banana', 'Cherry']
    }
  },
</script>

이 방법을 사용해서 컴포넌트를 여러개를 만들어 그것을 App.vue나 컴포넌트끼리 연결해서 웹사이트를 개발할 수 있겠지

—참고—

여기저기 연결된 컴포넌트에다 그냥 스타일을 지정하면 다른 파일 녀석들까지 영향 받으니까 scoped 속성으로 유효범위 지정해주기

<style scoped lang="scss">

어제 eslint 안 되던 건... 오늘 다시 켜니 작동
내일부터 문법이라서
에너지 아낄 겸 조금만 듣고 정리
떨린당 큐큐

https://bit.ly/37BpXiC
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#직장인인강 #직장인자기계발 #패스트캠퍼스 #패스트캠퍼스후기 #패캠챌린지 #한번에끝내는프론트엔드개발초격차패키지Online