[Vue.js + Node.js] 게시판 만들기
2022. 12. 31. 15:20
Vue.js
링크 [Node.js + Vue.js] 게시판 만들기 1. 설계 & 결과 [Node.js + Vue.js] 게시판 만들기 2. Vue.js를 사용한 Front Server 구현 [Node.js + Vue.js] 게시판 만들기 3. Node.js를 사용한 Back Server 구현 [Node.js + Vue.js] 게시판 만들기 4. 검색 기능 추가 [Node.js + Vue.js] 게시판 만들기 5. 이미지 업로드 기능 추가
[Vue.js] 페이지 동적라우팅
2021. 12. 8. 22:12
Vue.js
동적라우팅 이란? 일정한 패턴의 주소를 하나의 컴포넌트에 연결하는 방식 동적라우팅이 필요한 이유 전혀 다른 2개의 페이지를 만들때는, 2개의 페이지를 각각 만들면 됨 하지만 비슷한 페이지 2개를 만들때, 굳이 따로 만들 필요가 없음 이때, 동적라우팅을 사용하면 페이지 하나로 조금 다른 2개 이상의 페이지를 만들어 낼 수 있음 전에 Vue 페이지 라우팅 여기서는 거의 같은 page 2개를 따로 만들었었는데, 하나의 page만 만들어 2개의 page를 출력하는 예제 params속성, query속성을 참고하면 좋을듯 예제 App.vue 1페이지로 2페이지로 main.js import Vue from 'vue' import App from './App.vue' import vuetify from './plugi..
[Vue.js] url에 붙은 # 제거
2021. 11. 29. 22:27
Vue.js
VueRouter을 이용한 페이지 이동방법에서 아래와 같이 url에 #이 붙은것을 확인할 수 있음 #을 빼면 더 깔끔할 것 같아서 # 제거 방법을 적어봄 # 제거 방법 다음과 같이 main.js에서 router 생성하는 부분에 mode: 'history'를 추가해 주면 됨 const router = new VueRouter({ mode: 'history', // 추가된 부분 routes }); 결과 다음과 같이 url에 #이 없어진 것을 확인할 수 있음
[Vue.js] VueRouter을 이용한 페이지 이동
2021. 11. 29. 22:06
Vue.js
Vue-Cli와 Vuetify가 설치된 상황 페이지 이동 방법 'npm i vue-router@3.5.3' 을 통해 vue-router 모듈 3.5.3 버전 설치 src 폴더 안에 'pages'라는 폴더를 생성하고 'page-1.vue', 'page-2.vue' 생성 src 폴더 안에 있던 'main.js'에 다음과 같은 내용들을 추가 import VueRouter from 'vue-router' Vue.use(VueRouter); import Page1 from './pages/page-1.vue' import Page2 from './pages/page-2.vue' const routes =[ { path:'/1', component: Page1, },{ path:'/2', component: Pag..
[Vue.js] Vuetify 설치방법 및 실행방법
2021. 11. 29. 18:41
Vue.js
Vuetify 란? Vue 기반의 UI 프레임워크 Vuetify를 사용하면 화면구성을 더 쉽게 할 수 있는 장점이 있지만, 자유도가 떨어진다는 단점이 있음. 설치방법 전에 Vue Cli를 설치했는데, Vue Cli가 설치 완료된 상태에서 Vuetify를 설치하는 과정 cmd창에서 전에 vue-cli를 설치한 프로젝트 경로로 이동 'npm i vuetify'를 통해 vuetify 설치 'vue add vuetify'를 통해 vue cli에 vuetify를 설치 다음과 같이 옵션 선택 화면이 나오는데 recommended를 선택함 조금 기다리면 다음과 같이 vuetify가 설치된 것을 확인할 수 있음 실행방법 프로젝트 경로로 이동 'npm run serve' 입력 다음과 같이 실행된 것을 확인할 수 있음 위..
[Vue.js] Vue Cli 설치방법 및 실행방법
2021. 11. 25. 20:31
Vue.js
Vue Cli 란? Vue 개발환경을 설정해주는 도구 설치방법 cmd를 실행시킨 후 'npm i -g @vue/cli' 입력 -> vue cli 설치 'vue --version' 또는 'vue -V' 입력 -> 버전이 나오면 설치 된 것임 cmd에서 vue 프로젝트를 생성하고 싶은 폴더로 이동 'vue create 프로젝트명' 입력 ( 프로젝트명 : vue_cli_example ) 아래 사진과 같이 버전선택 화면이 뜨는데 여기서 버전을 선택해야 됨 원하는 버전 선택하면 되는데 일단 Vue 2로 진행 (Use NPM) 버전 선택 후 조금만 기다리면 프로젝트 생성 완료 실행방법 방금 생성한 프로젝트로 이동 후 'npm run serve' 입력 다음과 같이 실행된 것을 확인할 수 있음 위에 나와있는 주소인 '..
[Vue.js] v-for(index), 배열
2021. 8. 22. 16:21
Vue.js
학생들의 이름, 점수를 입력받고 출력해주는 예시를 통해 v-for, 배열 개념 정리 v-for, 배열 사용 예제 입력 {{i}} HTML의 li 태그에 v-for을 사용 inputlist의 객체들을 i로 받아오고 i를 출력해주는 방식 Script 부분에서는 form 제출시, inputlist라는 배열에 입력값인 input을 넣어줌 v-for의 index 사용하기 객체를 받아올 때, 몇번째 객체인지 알고싶으면 index 사용 {{index}}번째 숫자 = {{i}} 배열에 객체 넣기 다음과 같은 방법으로 배열에 객체를 삽입할 수 있음 this.inputlist.push({ name: this.name, score: this.name2, }); 학생들의 이름, 점수를 입력받아 출력해주는 예제 이름입력 : 점..