전체 글
-
vue11(redirect 리다이렉트 )JS/vue.js 2022. 3. 15. 18:25
Redirect : 특정 URL 접속시 다른 URL로 보내는 기능 const routes = [ { path: '/', component: () => import('./components/Bbb'), redirect: '/home', children: [ { path: 'home', component: () => import('./components/Home'), name: "home" }] } 다음과 같이 path 가 '/'인 경우에 redirect: '/home'으로 걸어두면 자동으로 넘어간다.
-
vue10(동적 컴포넌트 component tag / 컴포넌트 갈아끼우기)JS/vue.js 2022. 3. 15. 17:48
화면 이동 / 변경 하는 경우 1.vue-router 사용 2.dynamic component 사용 컴포넌트를 동적으로 변화가 필요한 경우 사용 : 다른 컴포넌트로 전환하면 해당 컴포넌트는 destroy 되고, 새 컴포넌트가 create 된다. .. 다음과 같이 is 를 사용하여 동적으로 컴포넌트 랜더링한다. (destroy되는걸 막으려면 를 사용하면 인스턴스를 캐시로 저장 가능 → 이전상태를 기억ㅇㅇ!) --연습하기-- 동적 컴포넌트를 이용하지 않는 경우에는 Here! 이렇게 작성했던걸 동적 컴포넌트를 이용하면 조금 간단해진다. HERE!
-
vue9(props,emit)JS/vue.js 2022. 3. 14. 18:14
props :모든 컴포넌트는 각 컴포넌트 자체의 스코프(변수의 유효 범위)를 가지고 있어서 다른 컴포넌트의 값을 참조할 수 없기 때문에 → 부모와 자식간의 데이터 전달 하는데 props 가 필요! :부모->자식으로 단방향 데이터 전달! (자식->부모 로 전송하는 경우에는 emit event 사용) 따라서 부모 컴포넌트가 업데이트 될때마다 자식 컴포넌트도 자동으로 업데이트! 연습하기 Parent.vue - 부모 컴포넌트 Child.vue - 자식 컴포넌트 //Parent.vue count : {{ counter }} + - →이말은 1. child라는 자식 컴포넌트를 여기다가! 2.num로 넘겨(v-bind)주는건 3.counter 다! 따라서 Child.vue에서는 props:["num"]로 받아서 co..
-
vue8(router navigation guard 네비게이션 가드)JS/vue.js 2022. 3. 14. 15:24
네비게이션 가드 : 라우터로 url 입력하면 해당 컴포넌트를 보여주는 페이지 전환이 이루어지는데 이를 막는 기능 : 페이지 전환에 조건이 필요한 경우에 사용한다. (ex. 로그인 필요한 페이지) 가드의 종류는 3 1. 전역 가드 : beforeEach() const router = new.VueRouter({ ... }) router.beforeEach((to, from, next) => { ... }) from (가려고 하는 라우터) -> from (지금 라우터) to 로 가려면 next 함수가 호출되어야 한다. beforeEach 가 라우터 변환 대기 상태로 만드는거라 URL 변경을 위해서는 next() 함수 호출이 필요하다. next(); => 바로 화면 전환 next(false); => 네비게이션..
-
에러4(Component name should always be multi-word)JS/vue.js 2022. 3. 14. 11:31
Component name "component" should always be multi-word. Eslint 에러. vue에서는 컴포넌트 이름을 multi-word로 단어와 단어의 조합으로 네이밍하는걸 추천한다. 따라서 에러를 꺼버리고 싶을 때 package.json 파일에서 "eslintConfig": { "rules": { "vue/multi-word-component-names": 0 } } 이렇게 "vue/multi-word-component-names": 0 추가해주면 된다.
-
vue7(DevExtreme-DataGrid이용하기)JS/vue.js 2022. 3. 11. 18:27
dev-grid를 사용하려 하는데 참고할게 공식문서밖에 없다. https://js.devexpress.com/Documentation/Guide/Vue_Components/DevExtreme_Vue_Components/ DevExtreme Vue Components: DevExtreme - JavaScript UI Components for Angular, React, Vue and jQuery by DevExpress 21.2 Thank you! We appreciate your feedback. js.devexpress.com 공식문서 참고하기 data파일을 연결하면 자동으로 table을 만들어준다. 다양한 옵션이 있어서 편하고 쉽게 사용 가능한 라이브러리. 1. 먼저 json형식의 data 파일 만..