고지은고

어제의 포스팅에 이은 Vue.js의 class, 그리고 반복문 v-for에 대해 정리하겠다 Vue 프레임워크를 이용해서 class를 동적으로 쉽게 만드는 방법이 존재한다. 위의 코드는 버튼 7이라는 이름의 버튼을 갖고 있으며, 따로 부트스트랩 요소를 추가해주지 않는 상태이다. 바로 옆의 input창의 value값을 모델로 지정해놨으며, 만약 무언가를 작성하고 옆의 add 클릭 이벤트가 등록되어있는 추가 버튼을 클릭하면 부트스트랩 요소가 적용된다 (밑의 예시에서 보여주겠지만, btn과 btn-primary라는 부트스트랩 요소를 이용했다) 여기서 우리가 데이터로 받는 건 arr과 inputClass이며, 디폴트 값으로 arr의 경우 입력되는 대로 값을 하나씩 받을 예정이라 빈 배열 [ ]로 지정해놨다. 그리..

저번 포스팅에 이어서 마저 Vue 시작하기 포스팅을 해보겠다! 자바스크립트에서 input 요소의 value를 vue에서 v-model을 통해 지정할 수 있다 위의 코드에선 input의 value를 msg라는 모델명으로 사용했다 그리고 input에서 작성한 내용(msg)이 바로 밑의 p요소의 innerText로 그대로 나오게끔 하기 위해 {{msg}}와 두 가지 방법을 사용했다. input 창에 v-model!!!이라고 작성해보니 기존의 {{}}와 v-text 두 가지 방법 모두 제대로 작동한다 위의 예시와 마찬가지로 v-model을 이용하여 value값을 제어한다 checkbox의 경우, 체크가 되어있으면 true 안되어있으면 false를 반환하는데 ture, false가 아닌 다른 값을 지정해줄 수 있..

학원에서 배웠지만 사용을 안 하다 보니 그새 머릿속에서 지워지고 있었다 기억을 되살리자는 의미로 블로그에 정리를 해보겠다 본격적으로 Vue.js 시작하기 Vue 공식문서를 참고해가면서 공부하면 좋다 참고 예시가 아주 잘 나와있기 때문 :) vue 공식 페이지의 '시작하기'를 클릭해서 천천히 읽어보기를 추천한다 일단 HTML 코드 복사하여 사용하고자 하는 파일에 붙여 넣는다 https://kr.vuejs.org/v2/guide/ 시작하기 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 안에 vue를 작성한다 app이라는 새로운 vue 생성자를 만들고, 여기에 연결 요소를 추가하려면 el: "#아이디 이름"을 작성하여 컨트롤이 가능하다 밑의 data에 원하는 데이터..