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-for, v-bind
v-for 사용법 js const vm = new Vue({ el: '#app', data: { items: [ { id:'1', message: 'Hello World' }, { id:'2', message: 'Good Job' }, { id:'3', message: 'My first Vue' } ] } }) itmes라는 데이터 배열에는 동일한 형식의 3개의 객체가 들어간다. 고유한 (id) 값이 있어야 한다. html {{ item.message }} v-for을 통해서 items를 모두 돌며 item에 객체를 저장하고 그 값들을 사용한다. v-for에는 v-bind:key가 필수적으로 사용된다. 여기서는 없어도 실행은 되지만, 실무에서는 오류가 발생할 수 있기 때문에 꼭 고유 값을 설정해주어야 한..
VUEJS) https://codepen.io/
codepen https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 코드펜을 이용하면 환경설정을 하지 않고도 충분히 공부를 할 수 있다. 이 외에도 JSFiddle, JS Bin 등이 있다. 빨간색 설정버튼을 눌러서 Add External Scripts/Pens의 검색창에 Vue라고 치면 Vue버전들이 나온다. 2.xxx 버전을 사용하는 것을 권장한다. v-bind를 활용한 예제 html {{ ..