Vue CLI 설치 Node.js는 기본적으로 설치되어있다는 가정 하에 설치를 진행한다. Node.js 버전은 16.14.1이고, npm 버전은 8.5.0이다. yarn이 아닌 npm을 사용하여 설치를 진행한다. Vue CLI 홈페이지 https://cli.vuejs.org/guide/installation.html Installation | Vue CLI Installation Warning regarding Previous Versions The package name changed from vue-cli to @vue/cli. If you have the previous vue-cli (1.x or 2.x) package installed globally, you need to uninstall i..
computed와 watch 속성 computed {{ num }} {{ doubleNum }} computed 속성 사용 시 데이터에 대한 의존성을 가진다. 그리고 기본적으로 getter 함수를 가지고 있다. vm.doubleNum 값은 vm.num 값에 의존하게 된다. doubleNum에 대한 로직이 실행될 때 기준이 되는 값이 num인 것이다. 따라서 num 값이 변경될 때마다 doubleNum 값도 변경된다. computed 속성 대신 methods 속성을 사용하여 doubleNum 값을 불러올 수도 있다. ..., methods: { doubleNum: function() { return this.num * 2; } } ... 이는 결과 값을 불러오는 데에 있어서는 똑같다. 그러나 의존성이라는 ..
Axios 뷰에서 권고하는 Promise 기반 HTTP 통신 라이브러리이다. CDN 방식 또는 NPM 방식을 통해 사용할 수 있다. 예제 get user {{ users }} https://jsonplaceholder.typicode.com JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2021, serving ~1.7 billion requests each month. jsonplaceholder.typicode.com JSON 데이터를 불러올 때 시험하기 좋은 사이트이다..
뷰 라우터(Vue Router) 뷰 라이브러리를 사용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리이다. 뷰 라우터를 사용하여 뷰로 만든 페이지 간 자유로운 이동이 가능하다. 뷰 라우터 사용을 위해서는 CDN 방식과 NPM 방식으로 사용할 수 있는데, 아래 예제에서는 CDN 방식을 사용한다. 뷰 라우터 구현은 와 태그를 사용한다. 페이지 표시 태그이다. 변경되는 URL에 따라 해당 컴포넌트를 뿌려준다. 페이지 이동 태그이다. 화면 코드에서는 태그로 표시된다. 클릭하면 to에 지정한 URL로 이동한다. 이때 to는 태그의 href 속성과 같은 의미인 것이다. 예제 뷰 라우터 사용을 위해 VueRouter를 생성하여 router 변수에 저장하였다. VueRouter는 페이지의 라우팅 정보로, ..
