🌸 Frontend/💚 Vue.js

[Vue.js]4.data, click, methods 사용하기

지난 포스팅에 이어서 이번에는 vue에서 data, event 등을 다루는 법을 알아보겠습니다. 1. data 다루기 Home.vue에서 export default 내부에 data() { return }를 추가해주고 return 뒤에 원하는 데이터를 { key : value } 형태로 넣어주면 됩니다. 그리고 그 데이터를 사용하기 위해서는 부분에서 {{ key }} 와 같이 중괄호 두개를 이용하여 추가해주면 얘는 key의 value에 해당하는 부분이 화면에 나타나게 됩니다. About.vue About {{ name }} 2. input html에서 value에 해당하는 것을 vue에서는 v-model로 사용할 수 있습니다. data 부분에 input 데이터를 추가하고 v-model 뒤에 ""을 이용하여..

[Vue.js]3.BootstrapVue 사용하기

vuedptj bootstrap을 사용하기 위해서는 일반 bootstrap이 아니라 vue전용 bootstrap을 사용해주어야 합니다. terminal 또는 cmd를 열어주세요 bootstrapVue설치 npm i vue bootstrap vue-bootstrap 설치된 부트스트랩을 적용하기 위해서는 main.js에 아래 코드를 추가해주어야합니다. import { BootstrapVue, IconsPlugin } from "bootstrap-vue"; // Make BootstrapVue available throughout your project Vue.use(BootstrapVue); // Optionally install the BootstrapVue icon components plugin Vue..

[Vue.js]2.vue-router 사용하기

이번 글에서는 vue-router를 통해 라우팅기능을 구현해보겠습니다. vue-router설치 먼저, vue-router를 설치해야합니다. npm i vue-router --save 설치 후 App.vue 파일의 template 부분에 router-view 부분을 추가해주세요 이 부분이 path에 의해 바뀌는 view가 보여질 위치입니다. App.vue 이제 여기에 보여질 view페이지를 추가해줘야겠죠?? src폴더 안에 views라는 폴더를 만든 뒤, 그 안에 Home.vue, About.vue 파일을 만들어보겠습니다. Home.vue Welcome! About.vue About Page vue 파일은 기본적으로 html에 해당하는 template 부분과, script 부분으로 이루어진 구조를 가집니다..

[Vue.js]1.Vue개발환경 세팅

먼저, npm사용을 위해 node.js 설치를 진행해주세요.window, mac 환경 둘다 아래링크에서 Lts버전 다운로드 해주시면 되고, mac은 homebrew이용해서 다운 추천드립니다.링크이용하여 다운 시 환경변수 설정이 필요합니다! 자세한건 구글에...nodejs.org/ko/ 에디터로는 vscode 사용하였습니다. 원하는 위치에 폴더를 생성해주시고그 폴더를 에디터에서 열어주세요. 윈도우는 window + R 로 실행을 열고 cmd를 검색하여 열어주시고맥은 터미널을 열어주세요cd [폴더명] 으로 아까 만든 폴더 위치로 이동해주세요 1. vue cli 설치npm install -g @vue/cli 2. vue 폴더 생성vue create [폴더명]ex) vue create test 추가적으로 필요한..