VUEJS) 컴포넌트 만들기 component
Component 1. 기존의 방식 js const vm = new Vue({ el: '#app', data: { todos: [ { id: '1', title: '아침 먹기', done: true }, { id: '2', title: '점심 먹기', done: false }, { id: '3', title: '저녁 먹기', done: true }, { id: '4', title: '간식 먹기', done: false }, { id: '5', title: '야식 먹기', done: false } ] } }) data객체 안에 todos라는 배열과 그 속성으로 id(고유 값), title, done을 정의 html {{ todo.title }} li태그 내에 v-for반복문에는 항상 v-bind:key와 ..
VUEJS) v-bind:class, v-on:click, v-model 응용
v-bind:class, v-on:click, v-model 응용 js const vm = new Vue({ el: '#app', data: { toggle: false, message: '' }, methods: { toggleElement () { this.toggle = !this.toggle } } }) toggle 데이터, message 데이터 정의 toggleElement함수 정의 html {{ message }} Toggle div태그 내에 box 클래스를 정의 v-bind:class의 active가 true, false일 때 bind(갱신)된다. div태그 내, 버튼 내의 v-on:click을 통해 toggleElement를 호출한다. input내의 v-model을 통해 message가 양..
