[Vue] 선언적 핸들링과 입력핸들링 | 조건문 | 반복문

3168 단어 vuevue

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

  • 프로젝트 가져와서 설치하기

  • 기존의 프로젝트에 필요한 패키지 설치

    npm install
  • Single File Component (단일 컴포넌트)

    • HTML(Vue)
    • JS(Vue)
    • CSS(SCSS)

반응성(Reactivity) : 데이터를 갱신하면 화면도 같이 갱신된다.




2. 조건문과 반복문

조건문

<div v-if="count > 4">
    4보다 큽니다!
</div>
  • v-if의 v를 디렉티브(Directive) 라고 합니다.

반복문

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

scoped : 다른 컴포넌트에는 영향을 미치지 않음(유효범위)

<style scoped lang="scss">
// scoped : 다른 컴포넌트에는 영향을 미치지 않음(유효범위)
  h1 {
    color: red !important;
  }
</style>

좋은 웹페이지 즐겨찾기