veu.js[webpack]_3

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

<template>
  <h1 @click="increase">{{ count }}</h1>   <!-- h1태그를 클릭할때 마다 숫자 증가 -->
</template>
<script>

export default {
    data(){
      return {
        count : 0   //이숫자가 증가하면 화면의 값도 증가
                    // 반응성(Reactivity)
      }
    },
     methods:{
    increase(){
      this.count += 1   //count라는 데이터에 접근
    }
  }
  }

</script>

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

App.vue의 코드를 이렇게 코딩해주면 페이지의 h1태그를 클릭 할때마다 값이 증가하는걸 확인

조건문과 반복문

<template>
  <h1 @click="increase">
    {{ count }}
  </h1>   <!-- h1태그를 클릭할때 마다 숫자 증가 -->
  <div v-if="count > 4">
    4보다 큽니다!
  </div>
  <ul>
    <Fruit
      v-for="fruit in fruits"
      :key="fruit"
      :name="fruit">   
      <!-- 고유한지 증명해주기 위해 key값 사용 -->
      {{ fruit }}
    </Fruit>
  </ul>
</template>
<script>
import Fruit from '~/components/Fruit'   //추가

export default {
  components: {     //사용이름
     Fruit          //Fruit:Fruit와 같음
  },
    data(){
      return {       // 반응성(Reactivity)
        count : 0,   //이숫자가 증가하면 화면의 값도 증가
        fruits :['Apple','Banana','Cherry']
      }
    },
     methods:{
    increase(){
      this.count += 1   //count라는 데이터에 접근
    }
  }
  }

</script>

<style lang="scss">
 h1{
   font-size:50px;
   color:royalblue;
 }
 ul {
   li{
     font-size:40px;
   }
 }
</style>

app.vue

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

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

<style scoped lang="scss"> //scoped를 작성하면 여기에 작성한 css는 다른 컴포넌트에 영향을 미치지 않음
  h1{
    color:red !important;
  }
</style>

fruit.vue

두개 다른 컴포넌트를 연결해서 사용할 수 있다.

import로 가져오고 li태그 대신에 Fruit 태그를 사용한 모습을 확인 가능하다.