본문 바로가기

분류 전체보기229

Vue 조건 v-show v-if 조건에 따라서 보여주고 보이지 않고 하는 로직을 넣고 싶은데요. 그때 사용할 수 있는 것이 v-show입니다. toggle 변수에 ref 통해서 true 초기값을 할당하였습니다. true 보여줘에는 v-show를 통해서 toggle 변수가 true이면 보이고 toggle에 느낌표를 붙여서 true가 아니면 조건식이 나오도록 해서 false 보여줘 가 보이도록 했습니다. true 보여줘 false 보여줘 토글 버튼 v-show는 css style요을 통해서 보이고 안 보이고를 구현합니다. 똑같은 것을 v-if로 해보겠습니다. true 보여줘 false 보여줘 토글 버튼 v-if 두 번 사용할 수도 있고 v-else를 사용 할 수도 있습니다. v-if는 조건에 만족하는 것이 표시되어서 개발자 도구에서도 볼 .. 2023. 4. 3.
Vue v-for 할일 목록 만들어 배열에 넣기 지금까지 연습했던 것을 바탕으로 input 창에서 입력하는 것을 바탕으로 배열에 넣어 볼 수 있어요. todo와 todos 변수를 생성하여 각각 타이핑하고 있는 상태 문자는 todo에 저장하고 todos에는 todo에서 작성하던 것을 추가할 때 todos에 추가되도록 onAdd 함수를 만들어서 연결합니다. react에서는 submit 연결할 때 e.preventdefault() 넣어줬어야 했는데요. vue에서는 .prevent 라는 event-modifiers 통해서 편하게 할 수 있어요. TO DO 추가 {{ todos }} 지금은 todos를 그냥 변수로 출력하고 있어서 변수 내용이 나올 겁니다. todos 안에 여러 todo가 들어갈 텐데요. v-for를 통해서 반복해서 보여 줄 수 있습니다. 간단.. 2023. 4. 3.
Vue 데이터 바인딩 input v-model Vue에서 데이터를 바인딩하는 방법입니다. 먼저 input 태그를 이용해서 input value에 바인딩해보겠습니다. ref 함수를 이용해서 name 변수를 사용하겠습니다. 보여주는 template 부분에 input 을 추가하고 v-bind를 사용합니다. 기본 태그에는 모두 사용할 수 있어요. input 태그에는 value와 type 같은 것들이 있는데요. 모두 v-bind:value v-bind:type v-bind:class 처럼 활용 가능 합니다. {{ name }} 버튼 v:bind를 줄여서 콜론 : 만 넣어서 사용 할 수 있습니다. v-on 대신에는 @를 사용 할 수 있어요. {{ name }} 버튼 이렇게 하면 단방향입니다. input 에서 타이핑하는 정보가 name 변수에 저장되는 것은 아닙.. 2023. 4. 3.
Vue onClick 함수 사용하기 Vue에서 함수 작성하는 방법을 알고 있다면 버튼을 클릭하면 특정 함수가 실행 되록할 수도 있을 것입니다. 함수를 먼저 만들어 놓고 v-on:click 사용하여 연결할 수 있어요. {{ name }} 버튼 clickHandler 함수를 먼저 만들어서 함수를 먼저 실행하면 Clicked 찍히도록 만들고 나서 button에 있는 v-on:click 부분에 함수 이름을 적어서 사용할 수 있어요. v-on:click에 사용하는 함수 이름 또한 template에 포함되는 것이니 return에 있어야 합니다. name을 수정애서 {{ name }} 사용한 부분이 바뀌도록 하고 싶어서 수정하는 함수를 작성한다고 해 볼게요. name 변수를 let으로 변경하고 clickHandler에서 수정해 봤지만 변수 내용은 바뀌.. 2023. 4. 3.
Vue Bootstrap cdn 적용 간단하게 Vue 학습하면서 디자인을 편하게 관리하기 위해서 Bootstrap CDN을 적용하면 좋습니다. 나중에는 원하는 것을 찾아서 적용하는 방법을 하기 전에 일단 cdn을 통해서 편하게 적용해 보세요. Vue 프로젝트 폴더 안에 public 폴더 안에 index.html 파일 안에 cdn 주소를 넣으면 됩니다. 주소를 확인하기 위해서 https://www.bootstrapcdn.com 사이트에 접속해 보세요. Quick Start에 아래 있는 html 부분에 있는 화살표를 누르면 코드를 복사할 수 있어요. link rel 부터 있는 부분을 index.html 부분에 붙여 넣기 하세요. 2023. 4. 3.
Vue 함수 Vue에서 함수 활용하는 방법 연습해 봐요. name에 있는 문자를 그냥 template에 표시했었는데요. greeting 함수를 만들어서 출력하는 함수를 만들어 보면서 함수 생성 방법을 연습해 보세요. template 안에서 함수를 사용하려면 return 에 포함시켜 줘야 합니다. {{ greeting(name) }} 함수 생성을 연습해 봤다면 다른 함수를 호출하는 함수를 생성하는 것도 해볼 수 있습니다. 파라미터 없이 다른 함수를 실행해서 결과를 저장해 놓는 변수를 설정해 보세요. {{ greet }} 간단한 함수 작성으로 느낌을 익혀보세요. 2023. 4. 3.
Vue 파일 구조 Vue 구조를 파악하기 위해서 vue create 했을 때 기본 생성된 구조를 참조해도 좋습니다. 복잡해 보이면 단숙하게 만들어 놓고 살펴보는 것도 좋습니다. App.vue 파일이 있을텐데요. 들어있던 내용을 모두 지우고 화면에 표시되는 부분인 template 부분만 남기고 모두 지워보세요. Hello Vue localhost:8080 웹페이지에 Hello Vue 내용이 그대로 보일 것입니다. 이번에는 script 부분을 추가해보세요. name 부분의 오른쪽에 있는 값을 변경할 때마다 바뀌는 것을 알 수 있을 것입니다. 이런 부분을 활용해소 자바스크립트를 이용해서 값을 동적으로 할당 가능해집니다. Hello {{ name }} 시각적인 부분으로 style을 지정해보세요. 글자 색이 바뀌는 것을 알 수 있.. 2023. 4. 3.
vue 3 구성하기 vue는 node 기반입니다. node가 이미 있어야 합니다. node는 버전이 자주 올라가니 nvm과 같은 도구를 같이 활용하시는 것이 좋습니다. vue를 구성하기 전에 nvm이 없다면 nvm 먼저 구성해 보세요. 우분투에서 nvm 설치하기 - Windows에서 nvm 설치하기 가장 먼저 vue를 활용하기 위해서 vue cli가 필요해요. vue cli를 설치하세요. vue cli에 대한 공식문서 참고해보면 좋습니다. npm install -g @vue/cli 설치가 끝나면 vue 개발할 때 사용할 폴더로 이동해서 vue 프로젝트 생성 명령어를 실행합니다. 예제에서는 vue-project 폴더를 만들면서 프로젝트를 생성합니다. vue create vue-project Vue 버전을 선택하는 것이 나오는.. 2023. 4. 3.
반응형

티스토리툴바