Vue.js (18) 썸네일형 리스트형 [Vue.js] class (2) class 예제 2) class 1번 예제랑 동일한 동작을 하는 코드이지만 computed 를 사용하여 그안에 obj() 함수를 선언하여 값을 리턴해준다. 체크박스의 버튼을 클릭하면 obj() 함수 안의 this.isPrimary, this.isLg 도 영향을 받는다. [Vue.js] class (1) class 예제 1) v-bind:class 으로 클래스 속성의 값을 사용 할 수 있다. isPrimary, isLg 가 data에서 boolean 으로 관리되어 체크박스를 체크하면 isPrimary,isLg는 true로 바뀐다. isPrimary, isLg 가 false 일땐 Vue 버튼에 디자인에 변화가 없지만 isPrimary, isLg 가 체크박스 체크로 인하여 true 로 바뀌었을땐 Vue 버튼의 디자인이 적용된다. [Vue.js] model (2) model 예제 2) v-model 사용하여 msg, isChecked, lunch, comment, isRun 의 값들이 관리 될 수 있다. [Vue.js] model (1) model 예제 1) 두개의 input 요소에 첫번째 input 에서는 v-model 을 사용하여 input 에 값을 입력하면 msg 의 값도 바뀌는 코드이고 두번째 input 에서는 onInput 이라는 함수를 호출하여 input 요소의 value 를 msg2의 값으로 바꾸는 코드이다. 첫번째 input 요소에서 값을 입력하면 아래의 p 요소에 적은 값이 실시간으로 반영된다. 두번째 input 요소에서도 값을 입력하면 아래의 p 요소에 적은 값이 반영된다. [Vue.js] Event (5) Event 예제 5) 두개의 form 중에서 첫번째 form은 onSubmit 함수 안에 .preventDefault(); 메소드를 이용하여 폼 제출을 막는 동작을 하는 함수이고 두번째 form은 .prevent 수식어를 이용해서 폼 제출을 막는 동작을 구현하였다. 두개의 form 모두 폼 제출을 막는 동작을 하지만 함수안에서 사용할지, 수식어를 이용할지의 차이점이 있다. 두개의 폼에서 input 값을 입력하고 전송버튼을 눌러도 두 폼 모두 아무런 동작을 하지 않는다. [Vue.js] Event (4) Evnet 예제 4) div id를 app으로 지정하고 app으로 지정한 div 안에 5개의 div 요소를 작성하였다. divClicked () 함수에선 innerText, style 를 변경하는 동작을 하는 함수이다. div를 클릭하게 된다면 div의 텍스트랑 배경색이 변경된다. [Vue.js] Event (3) Event 예제 3) Vue 객체에 x,y 데이터 값을 0으로 설정하고 moved () 함수에 X,Y 좌표가 변경될때 값을 저장하는 함수를 작성한다. 빨간색 박스 안에서 마우스를 움직이면 좌측 상단 x, y 좌표 값이 움직이는 동작에 맞춰서 바뀐다. [Vue.js] Event (2) Event 예제 2) button 에 v-on:click="plus" 함수를 호출하고 또 다른 button 에선 v-on:click 으로 적지 않고 @:click 으로 적어도 동일한 동작을 하기 때문에 @ 으로 적어 주었다. plus 함수에선 count 의 값이 1씩 증가하는 동작을 하는 함수이고 minus에선 count 의 값이 1씩 감소되는 동작을 하는 함수이다 + 버튼을 4번 누른 결과 -버튼을 6번 누른 결과 이전 1 2 3 다음
