사용환경 : Vue.js 2, vue-cli, vue-Router 사용 router-link + binding 를 통해 해당 내용을 전달해준다. 여기서 `123453` 이 전달하고자하는 변수가 될 수도 있다. 1. Home.vue // 각각의 id를 가진 리스트를 v-for로 출력. // router-link를 통해 반복문을 통해 출력된 movie 객체의 id값을 전달하고자 한다. 2. Index.js (router) { path: '/movie/:id', name: 'Movie Detail', component: MovieDetail } : 바인딩을 통해 id값을 전달할것이라고 선언한다. 3. MovieDetail.vue 2가지 방법으로 출력이 가능하다. 1. html 요소에 바로 텍스트만 출력 2. ..

FrontEnd/Vue.js 2022. 2. 8. 00:06

이 글은 해당 문서를 참조하였습니다. computed와 watch — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org ■ Computed 속성 사용하기 1. {{ }} 템플릿 내에 복잡한 연산 로직을 수행하고 싶을 때 사용 2. computed와 methods를 구분하여 사용할 수 있다. -> computed는 캐싱을 하지만 methods는 하지 않는다. 3. watch 보다 computed를 사용하는 것이 코드의 반복성 때문에 더 낫다 4. 기본적으로 getter 함수만 가지고 있지만, setter 함수를 만들어 사용할 수 있다. ■ Example 원본 메시지: "{{ message }}" 역순으로 표시한 메시지: "{{ reversedMessage }}" var..

FrontEnd/Vue.js 2022. 2. 5. 21:30

vue 3, vue-cli 4.5.x 의 환경을 사용하고 있습니다. ■ LocalStorage - 로컬 스토리지에 관하여 자세한 내용은 MDN의 링크를 확인해주시기 바랍니다. Window.localStorage - Web API | MDN localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. developer.mozilla.org 사용 방법은 아주 간단합니다. localStorage.setItem() 으로 저장, localStorage.getItem() 으로 호출 입니다. 번외로 localStorage.removeItem() 로 지정하여 삭제가 가능하고, localStorage.clear()로 ..

FrontEnd/Vue.js 2022. 2. 2. 18:32

- Vue-cli 4.5 를 사용하고있습니다. vue.config.js에서 scss, sass를 지정해주려는 가운데, appendData 에 대한 에러가 발생하였을 때 적용하여 해결하였습니다. appendData -> additionalData 로 변경해주었습니다.

FrontEnd/Vue.js 2022. 2. 2. 18:11

VueJS에서 Arrow Function을 사용해야하는 이유 ES6 medium.com [ Vue Instatnce의 위치와 함수의 사용법에 따른 this.function의 값 출력 ] Original Function : 함수 내에서 새로운 Instance를 생성하기 때문에 this.을 찾지 못한다. 그래서 새로운 함수 내의 function 을 호출하면 값을 뱉어내지 않는다. Arrow Function : 선언되던말던간에 기존의 Instance의 위치 그대로 this.를 찾음 그래서 새로운 Arrowfunction 내에서 function을 호출하면 값을 뱉어낸다.

FrontEnd/Vue.js 2022. 2. 2. 17:06

그냥 뭐 그렇다고.... ㅎㅎ ;; 별 내용은 없고 그냥 Vue와 데이터베이스 구현하는데 필요하여 구현해봤다. 물론 어느 블로그 참고.. 뷰티파이는 css-framework와 유사하나 Vue와 직접적으로 연동하여 사용할 수 있다.

FrontEnd/Vue.js 2022. 2. 1. 22:32

Webpack 이란? html, css, javascript 등 많은 파일을 하나의 .js파일로 변환 해주는 도구 코드 관리 용이, 로딩 속도 증가, 버전 관리 용이 등의 장점이 있음. 필요조건 node, npm 구현 내용 수학문제 프로그램 create 에서 build 까지 기술 build 후에는 구동되고 있는 웹서버에 올리고 index.html 파일을 실행하는 것으로 사용이 가능함 전체 구현내용 흐름 프로젝트 폴더 생성, 이동 npm init : package.json 생성 npm i vue : npm module 로 vue 설치 npm webpack webpack-cli -D : npm module로 webpack과 cli 를 developer모드로 설치 npm i vue-loader -D : npm..

FrontEnd/Vue.js 2022. 1. 30. 17:06

Vue.js 프로젝트를 webpack을 이용해 npm run build 를 하였을 때 나타나는 경고 문구 WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/ webpack.config..

FrontEnd/Vue.js 2022. 1. 30. 15:40