JAVASCRIPT/Vue.js3 [Vue.js 기본 문법] v-for, 컴포넌트 생성, props 등록.전달 [목차] v-for 사용법을 알아본다 컴포넌트화 하는 법을 알아본다 props를 사용하여 부모 -> 자식 흐름으로 데이터 바인딩하는 방법을 알아본다 props에 v-for를 함께 써서 응용해본다. v-for 반복문 food: ['chicken', 'pizza', 'ramen', 'dumplings'], food라는 data가 있다고 가정하자, 이를 로 목록화시켜서 보여주고 싶다면? = > for문!! 반복문!! Vue.js에서는 for문을 v-for라고 부른다. v-for 사용법 데이터를 만들어준다 태그에 v-for를 넣어준다. {{별명}} for문 사용시 v-bind:key=""를 꼭 넣어준다. (안 쓰면 에러 남) 이유: In 2.2.0+, when using v-for wi.. 2020. 4. 16. [Vue.js 기본 문법] v-if, v-on:click 이벤트 핸들링 v-if, v-on:click 이벤트 리스너 사용법! v-if 를 사용하여 -> 버튼 클릭 시 속성 숨기기 원하는 태그에 v-if를 넣는다. true / false 데이터를 넣어줄 변수를 생성하여 data()에 넣어준다 나는 flag라는 데이터 생성 v-if="flag" 를 넣어준다. button 클릭 시 v-if의 true / false 를 바꿔줄 것이기에 v-on:click을 button 태그에 써준다. button 클릭 시 함수를 실행하게 v-on:click="함수이름" 라고 써준다. 함수를 정의 해준다. 함수 안에서 flag를 true / false로 바꿔주면 됨. Hello world, this is {{name}}. 이름 숨기기 v-on:click를 사용하여 -> 버튼 클릭 시 컨텐츠 정렬하기.. 2020. 4. 14. [Vue.js 기본 문법] (데이터 바인딩) v-bind (데이터 바인딩) v-bind 데이터 바인딩 1. 내용 데이터 바인딩 data()에 데이터를 적어두고, 원하는 부분에 이중 대괄호로 불러오기! Hello world, this is {{name}}. 2. 속성 데이터 바인딩 data()에 속성 적어두고, 원하는 부분에 v-bind:style="" 로 불러오기! font size 3. 데이터를 js파일로 빼서 데이터 바인딩 데이터를 적어둔 파일을 import 한다. & 이름을 정해준다. data()에 정한 이름을 불러온다. 원하는 부분에 이중 대괄호로 불러온다. {{Oneroom[0].title}} {{Oneroom[0].capt.. 2020. 4. 14. Prev. 1 Next.
