Vue.js (18) 썸네일형 리스트형 [Vue.js] component (3) component 예제3) Vue.component 으로 정의하여 재사용 가능한 컴포넌트를 전역으로 정의할 수 있다. div의 id 를 다르게 지정해도 my-component 를 사용 할 수 있다. 각 id 마다 다른 greet의 값을 입력하여 사용한다. [Vue.js] component (2) component 예제2) 위 예제에서는 friends-component 에서 friends, friends2 라는 배열의 값을 받아와서 사용한다. 친구 목록에서는 데이터 안에 friends 배열의 값이 나오고 동물 친구 목록에서는 데이터 안에 friends2 배열의 값이 나타난다. [Vue.js] component (1) component 예제1) component 라는 속성을 이용하면 template에 정의한 요소를 불러올 수 있다. 컴포넌트에 my-component라는 컴포넌트를 정의하고 으로 사용한다. 컴포넌트에서 정의한 박스 요소가 생성된것을 볼 수 있다. your-component에서는 요소안에 greet 라는 값을 받아서 your-component v-bind:greet(데이터명)="입력할 값" 으로 사용한다. 두번째 greet에서는 msg라는 값을 사용하여 위에 input 값에 입력한 텍스트가 나타난다. input 에 입력한 데이터가 값이 박스안의 텍스트에 나타난다. [Vue.js] for (2) for 예제2) li 요소에 msgs의 배열안에 v-onlick=clicked 버튼을 누르면 input 요소의 값을 추가하는 기능을 갖고v-on:click=deleteItem 버튼을 누르면 배열에 추가된 아이템이 지워지는 기능을 갖는 코드이다. input 칸에 텍스트를 입력하고 추가 버튼을 누르면 li 요소에 입력한 텍스트가 출력된다. 추가된 li 요소에 X버튼을 누르면 추가된 li요소가 사라진다. [Vue.js] for (1) for 예제1) v-for 속성은 배열이나 오브젝트의 값을 반복문처럼 순서대로 출력하는 기능을 갖고 있다. v-for="item in "배열, 오브젝트" 값을 써서 사용 한다. 위 코드의 웹브라우저 출력 결과이다. [Vue.js] if (1) if 예제1) v-if 속성은 문서 객체를 생성할지 없앨지를 결정한다 ( 추가, 제거) v-show 속성은 문서 객체를 보여줄지 숨길지를 결정한다 box3 는 체크박스를 클릭하면 true, false 값에 따라서 문서객체가 추가/제거 되는 속성의 코드이고box6 는 체크박스를 클릭하면 true, false 값에 따라서 문서객체가 눈에 보일지 말지를 결정하는 코드이다. 체크박스가 해제 상태인경우에는 box3의 div 요소가 아예 나타나지 않지만 box6 같은경우엔 코드로 보면 보이지만 실제 구현된 페이지에서만 나타나지 않는다. 체크박스를 클릭하여 isMake, isShow 값이 true 로 바뀌니 box3 요소의 코드가 나타나고 화면상에도 정상 구현되었고 box6 요소는 style 속성의 display n.. [Vue.js] style (1) style 예제1) 위 코드는 computed 를 이용하여 pStyle 이라는 함수안에 fontColor , fontSize 을 입력하고 input 안에 v-model으로 입력하여 값을 수정함에 따라 폰트 색상, 크기가 변경되도록 하는 코드이다. 기본 디폴트 값으로 폰트 색상은 black , 크기는 16px 으로 설정된 상태이다. 폰트 색상을 yellow, 크기를 25 으로 입력하여 폰트 스타일을 변경하였다. [Vue.js] class (3) class 예제 3) class 예제1과 동일한 동작을 하는 코드이지만 3항 연산자를 활용하여 작성한 코드이다. isInfo, isLg 가 true/false 상태에 따라 btn-info, btn-lg값이 class안에 입력된다. 이전 1 2 3 다음
