목록vue (10)

당신보다 고작 하루 먼저 시작한 개발자의 오지랖

[VUE] v-for / v for 배열 역순으로 렌더링 하기

서버에서 역순으로 데이터를 리턴해달라고 요청하는게 맞지만 임시방편으로 처리를 하고 싶다던지, 혹은 역순 필터링을 넣고 싶다던지 할때 그냥 v-for 돌릴 배열에 .slice.rever()를 추가해주면 된다.
VUE 2022. 12. 15. 12:09
[VUE] vue 라이브러리, 플러그인 전역으로 편하게 쓰기

boot 폴더에 js 파일을 하나 만들고 import { boot } from "quasar/wrappers"; import lodash from "lodash"; import moment from "moment"; export default boot(({ app }) => { app.config.globalProperties.$_ = lodash; app.config.globalProperties.$moment = moment; }); 이런식으로 전역으로 설정하고, vue 파일에서 this.$_(함수) 이 형태로 사용하면 된다. lodash.js 와 moment.js 는 제일 자주 쓰는 라이브러리. npm install 후에, 위처럼 boot 파일 만들고 전역으로 호출해서 사용하면 된다.
VUE 2022. 10. 7. 13:02
[VUE] watch에서 json 오브젝트 감시하기(특정 혹은 전체)

객체내 값 모두를 감시할 경우 watch: { object: { handler: function (val, oldVal) { console.log(val); }, deep: true, }, }, 객체내 특정 값만 감시할 경우 watch: { "object.child": function (val) { console.log(val); }, },
VUE 2022. 10. 6. 18:15
[VUE] 특정 페이지 이동 전 로그인 여부 검사하기(라우터 Router beforeEach) 네비게이션가드

router의 beforeEach 를 활용하면 된다. const routes = [ { path: "/", component: () => import("layouts/MainLayout.vue"), children: [ { path: "", component: () => import("pages/Index.vue"), meta: { requiresAuth: false }, }, { path: "/auth", component: () => import("pages/Auth.vue"), meta: { requiresAuth: true }, }, ], }, ]; export default routes; route.js 에 로그인이 필요한 페이지는 meta 값에 true를 넣어준다. Router.beforeEa..
VUE 2022. 10. 5. 12:09
[VUE] 특정 element로 부드럽게 스크롤 이동하기

스크롤 이동할 html element에 ref 값을 설정해주고 실행시킬 스크립트에 다음과 같이 scrolIntoView를 호출하면 된다. 매우 간편
VUE 2022. 9. 30. 16:39
[Vue] 카카오 주소 우편번호 api 활용하기

회원가입 화면 등에서 유저의 주소 혹은 우편번호를 입력받아야 하는 상황이 있다. 이럴 때 카카오(다음)에서 제공하는 우편번호 서비스를 이용하면 매우 편리하다. https://postcode.map.daum.net/guide Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net 사실 너무도 예제코드가 쉽고 잘 정리되어 있기에 그냥 보고 따라 하기만 하면 된다. 본인은 iframe을 이용하여 페이지에 끼워 넣는 방식을 이용했다. 1 2 3 4 5 주소 검색 Colored by Color Scripter cs 입력받을 텍스트 인..
VUE 2021. 6. 11. 17:45
[Vue, Quasar] axios.js 활용하여 Api 편하게 호출하기

백엔드와 통신을 편하게 하기 위해서 보통 Ajax와 Axios와 같은 HTTP 비동기 통신 라이브러리를 사용한다. 퀘이사 프레임워크를 설치할 때, axios를 설치할 것이냐고 묻고, 선택을 하게 되면 자동으로 boot파일에 axios를 추가해 준다. 우선, axios를 설치한 후, 스크립트에서 axios를 통해 api를 호출하는 법은 매우 간단하다. 1 this.$axios.get('http://127.0.0.1:8000/api/users/') cs 하지만, 이렇게 사용하면 백엔드 url이 변경될 때마다, 모두 찾아가서 주소 값을 변경해줘야 하는 번거로움이 생긴다. 그래서 axios의 baseUrl 속성을 사용한다. 위 코드처럼 baseUrl을 설정하면된다. 본인은 test서버와 본 서버를 구분해 놓기 ..
QUASAR 2021. 6. 2. 15:20
[Quasar] 퀘이사 에디터(editor)에 이미지 파일 넣기 WYSIWYG

퀘이사 프레임워크에서 제공하는 컴포넌트에는 에디터도 있다. WYSIWYG Editor (“what you see is what you get”). 말 그대로 유저가 입력하는 내용 그대로 html화 시켜서 저장하고 출력할 수 있도록 한다. https://quasar.dev/vue-components/editor#examples Editor (WYSIWYG) | Quasar Framework The QEditor Vue component is a WYSIWYG editor that enables writing and pasting HTML. quasar.dev 퀘이사 에디터에는 이미지 파일을 넣는 기능은 제공하지 않기에 이를 커스텀해서 써야한다. 우선 퀘이사 에디터 컴포넌트를 선언해주고 그 안에 속성 값으로..
QUASAR 2021. 5. 14. 18:58
Prev 1 2 Next