Day 81: My Vue 컴포넌트
5098 단어 100daysofcodevue
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>
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 일 완료 및 먼지
Reference
이 문제에 관하여(Day 81: My Vue 컴포넌트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mtee/day-82-my-vue-component-40kb텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)