초보개발자 개발일지

39일차(2) : Vue.js 예제(3) - Component Step07_component component 정의하고 사용하기 - html 코드에서 보면 라는 요소로 만들어놓음 - 브라우저에서 열어보면 div로 바뀌어 있다. - client side rendering이다. vue가 저렇게 바꾸어놓았다. components:{ } 라는 것도 있다.(computed와 비슷하게) - 요소 이름을 쓰고, 템플릿을 안에 미리 준비해놓는다. - 자주 사용하는 틀을 만들어 놓고 끼워넣을 수 있다. ex) navbar, footer 등 필요한 페이지에 바로바로 집어넣기 가능! - 속성값으로 데이터(값)을 전달받을 수도 있다. - 이 component는 내부에서 사용할 값을 외부에서 공급받을 수 있다. v-bind:g..

39일차(1) : javascript로 작성했던 폼 Vue.js로 수정하기 - 기존에 javascript로 작성했던 회원가입 폼(signup_form)을 Vue.js로 재작성해보기 2022.11.28 - [국비교육] - 36일차(2)/jsp(24) : 회원가입시 유효성 검증(validation) 기능 구현 div id="app" / el : "#app" - 특정 요소(#app)안에서 일어나는 일을 vue로 관리하겠다는 뜻! - form, body, div 등에 Vue에서 사용할 id를 부여한 후, 아래에서 Vue 객체 생성(new vue) 하고, el: "선택자" 로 object 형식으로 작성해주면 된다. - new Vue({}) 안의 {}는 object 형태로 작성하면 된다. { key:value, k..

38일차(2) : Vue.js 예제(2) - 각각의 클래스 추가 방법. vue에서는 어떻게 할까? class 제어 하기 버튼 Vue 버튼 파란색 버튼 큰 버튼 v-bind:class="{}" - 안에 object 형태로 작성한다. - key값이 클래스의 이름일 수도 있고 아닐 수도 있다. : 뒤에 들어가는 value값이 true이면 추가되고, false이면 삭제된다. - true로 해보면 클래스 2개가 추가된 것을 볼 수 있다. {'btn-primary' : isPrimary , 'btn-lg' : isLg } - 그리고 T/F 부분을 동적으로 바뀌게 하고싶다면 저 위치에 동적으로 바뀔 수 있는 값을 넣으면 된다. - 체크박스는 체크 여부에 따라 class가 바뀐다. - object를 사용해서 특이하게 ..

38일차(2) : vue.js 예제 Vue.js : 자바스크립트 라이브러리. jQuery 보다 사용범위가 넓다. - vue js 홈페이지 : 링크 - vue를 부분적으로 사용하는 법을 익힐 예정! - 폼 검증, validation 하는 방법 등을 vue로 수정할 것 vue js 사용하기 오늘의 운세 : {{ fortune }} 내 이름은 : {{ myName }} 눌러보셈 이름 바꾸기 {{msg}} {{item}} - vue와 관련된 외부 자바스크립트를 로딩해서 사용 (js 라이브러리) - - div id="app" 안에서 사용되는 데이터는 여러가지 타입의 데이터(String, Object, Array, ...) 그 데이터는 object 형태로 data:{ } 안의 방에 넣어두면 된다. - 이 'msg'..