본문 바로가기

vue7

Skeleton UI 제작 전에 만들었던 리스트 목록을 활용해서 css로만 skeleton ui를 만들었다. https://hjcode.tistory.com/63 vue.js axios 예제 https://reqres.in/ Reqres - A hosted REST-API ready to respond to your AJAX requests Native JavaScript If you've already got your own application entities, ie. "products", you can send them in the endpoint URL, like so: var xhr = new XMLHttpRequest(); xhr. hjcode.tistory.com 리스트 가져오는게 너무 금방이라 보이지도 않아서 3초후.. 2023. 2. 10.
Vue watch의 속성 immediate watch는 속성의 값이 변할때마다 실행되지만, 변경과 관계없이 처음 실행해야 하는 경우가 있다. watch: { myData(value) { } }, 페이지가 처음 로드될때 watch로 바라보는 값이 기본값으로 설정된다. 이때는 속성이 변경이 되지 않아 watch는 실행이 되지않는다. immediate: true로 설정하고 핸들러 함수를 아래처럼 옮긴다. watch: { myData: { immediate: true, handler(value) { // ... } } }, deep const array = [1, 2, 3, 4]; array.push(5); array.push(6); array.push(7); // array = [1, 2, 3, 4, 5, 6, 7] 위와 같이 배열을.. 2022. 11. 7.
Vue 환경변수 Vue에서 환경변수를 사용하기 위해서는 프로젝트 루트경로에 .env 파일을 생성해야한다. .env 파일은 키 = 값 형태로 정의할 수 있고 반드시 앞에 VUE_APP_을 붙여줘야한다. 개발 모드와 배포 모드를 구분하여 환경을 구성해야 한다. VUE_APP_API_URL=http://localhost:8888 .env 파일은 .env.development와 .env.production 파일에 없는 공통 값을 지정하기 위해 사용한다. .env.development는 npm run serve를 별다른 옵션없이 사용하면 development 환경으로 인식하기 때문에 이 환경변수를 사용한다. .env.production 파일은 배포 모드에서만 동작한다. 환경변수를 테스트할때는 npm run serve를 다시 실행.. 2021. 9. 7.
vue.js axios 예제 https://reqres.in/ Reqres - A hosted REST-API ready to respond to your AJAX requests Native JavaScript If you've already got your own application entities, ie. "products", you can send them in the endpoint URL, like so: var xhr = new XMLHttpRequest(); xhr.open("GET", "https://reqres.in/api/products/3", true); xhr.onload = function(){ conso reqres.in API는 위에 사이트에서 가져왔습니다. https://reqres.in/api/us.. 2020. 1. 13.
vuex, router로 영화 앱 만들기 예제 // index.js export default new Vuex.Store({ state: { movies: { dunkirk: { id: 'dunkirk', title: 'Dunkirk', subtitle: 'Dunkirk', description: `Miraculous evacuation of Allied soldiers from Belgium, Britain, Canada, and France, who were cut off and surrounded by the German army from the beaches and harbor of Dunkirk, France, during the Battle of France in World War II.`, largeImgSrc: `url('https:/.. 2020. 1. 6.
slot 으로 재사용하기 slot은 vue의 좋은 기능중 하나로 컴포넌트를 재사용하기 굉장히 좋습니다. Vue 공식사이트의 모달 컴포넌트를 가져온 코드입니다. https://kr.vuejs.org/v2/examples/modal.html 모달 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org default header default body slot에 name을 정의하고 상위 컴포넌트에서 재사용하고 내용을 재정의 할 수 있습니다. 경고!! 내용을 입력하세요. 2019. 11. 22.