Vue

항상 새로운 프레임워크를 사용하기 전에는 꼭 Node.js 신 버전을 설치해 주길.. npm install -g @vue/cli를 터미널에 입력해서 설치해 주세요 vue/cli는 vue에서 사용 가능한 라이브러리를 모두 사용할 수 있습니다 설치가 끝났다면, 터미

Vue에서 가장 기본적인 Data Binding에 대해서 다뤄보겠습니다.기존에 java script에서는 html에 데이터 바인딩 하기위해서는document.getElementById().innerHTML = ?? 이렇게 작성을 했는데Vue 에서는 script 부분에

반복문에 들어가기에 앞서서 기본적인 Array 문법에 대해서 알고 갔으면 한다Array = \[] 자료형은 대괄호 안에 데이터를 넣어놓는 건데let 숫자 = 10,20,30 이 있다는 가정하에 데이터를 뽑아서 사용하기 위해서는숫자0 = 10 , 숫자1 = 20, 숫자2

허위매물을 신고하는 버튼을 만들어 보겠습니다 !신고 버튼을 누를 때 신고 수의 숫자가 실시간으로 바뀌어야 하는 중요한 데이터이기 때문에 Array 형식의 변수를 만들어서 데이터 바인딩을 해야 합니다클릭할 때마다 신고 수가 +1 되게 만들어 주기 위해서는@click=""

시작하기 전에 원룸 이미지를 첨부하고 시작해 보겠습니다. 문법은 html 할 때랑 마찬가지로 ``사용하시면 됩니다 모달창 생성 이미지를 잘 삽입했다면 원룸 이름을 클릭할 때 해당 원룸의 상세 페이지를 만들어 보겠습니다. **이렇게 상세 페이지는 항상 덮어 씌워서 사

외부 서버에서 실시간 데이터를 받아오거나,많은 양의 데이터를 JS 파일로 저장일 했을 경우 가져오는 법 / 보내는 법에 대해서 알아보겠습니다export default => 파일을 외부로 보내고 싶을 때 사용그리고 import 해서 불러와서 사용하고 싶다면 꼭 변수로 d

App.vue 파일안에 코드를 작성하다 보면 너무 길어지는 경향이 있다. 그때 사용하는것이 바로 Component 라는 것이다. 쇼핑 같은걸 하다보면 이라는 배너 같은 걸 한번 씩 보게되는데 눈에 잘 띄게 만들어보자

props => 부모 요소의 데이터를 자식 요소가 받아서 사용할 수 있게 전달해 주는 것이다일반적으로 부모에게 받아서 자식이 사용하는 경우 Props는 이렇게 사용한다.하지만<p> {{ data }} <p><button @click="data=20">버

애플 코딩 vue 강의 공부 내용input창에서 값을 입력할 때마다 $event.target.value에 값이 저장되게 됩니다. 하지만 코드가 길어지기 때문에 vue에서 지원하는 문법으로 v-model을 사용해 보겠습니다input에 입력한 데이터를 state 부분에

코딩 애플 강의 내용기존의 Modal창은 css 효과를 주지 않아 이렇게 딱딱하게 작동합니다transition이라는 css 효과를 주어 부드럽게 또는 나타나는 위치를 바꾸어 보겠습니다이러한 방법이 있지만, 저는 trainsition 태그를 사용해 보겠습니다.이제는 창

Vue 시작하면서 Bootstrap를 사용하기 위해서는 홈페이지에서 가져오거나 install을 사용하여 설치해 주어야 한다.설치하기에 앞서 터미널상에서 vue create 프로젝트명으로 새로운 파일을 만들어 주세요만드시고 터미널에서 설치하실 거면npm install b

라우터 셋팅 방법은 터미널에 입력해주시면 됩니다. 혹은 yarn add 쓰셔도 됩니다.npm run serve를 하고 있던건 끄고 입력하시길 바랍니다. 안그러면 에러납니다src폴더 안에 아무데나 router.js 파일을 만들고 따로 이해 하실 필요는 없고 그냥 복사해서