Day 81: My Vue 컴포넌트

5098 단어 100daysofcodevue
Vue에서 아무 것도 중요하지 않은 구성 요소를 만들었습니다. 요약 단계:
  • index.js에서 Vue 인스턴스를 생성했습니다.

  • new Vue({
      el: '#app',
      data: {
        days: ['Mon', 'Tue', 'Wed', 'Thur']
      }
    });
    


  • index.js에서 구성 요소를 정의했습니다.

  • Vue.component('card', {})
    


    참고: 한 단어로 구성 요소 이름을 지정하는 것은 좋지 않습니다.
  • index.html에서 템플릿을 정의했습니다.

  • <script type="text/x-template" id="card-template" >
      <div class="card">
        <p id="nextDay"> {{day}} </p>
        <div class="innerCard"></div>
      </div>
    </script>
    


  • CSS 선택기를 사용하여 index.js의 템플릿에 액세스했습니다.

  • Vue.component('card', {
    template:'#card-template'
    })
    


  • index.js에 소품을 만들었습니다.

  •  props: {
        day: { 
          type: String,
          required: true
        }
      }
    


  • index.html의 Vue 인스턴스에 있는 데이터를 통해 반복됩니다.

  •   <div id="app"> 
        <card v-for="day in days" :day="day"> 
        </card>
      </div>
    


    산출


    81 일 완료 및 먼지

    좋은 웹페이지 즐겨찾기