JS
-
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 파일 만..
-
vue6(vue-router)JS/vue.js 2022. 3. 11. 15:22
VUE는 SPA! 여러 화면을 하나의 페이지 안에서 제공해준다. 따라서 화면마다 고유한 식별자를 기반으로 화면을 렌더링 해야함 vue-router라는 라이브러리를 사용해서 URI를 고유식별자로 사용해줌 router 예제 : home, about, contacts 세개의 라우터를 만들어서 연결 1.src/components 폴더에 Notice, About 컴포넌트 만들기 2.App.vue에 router-link, router-view 작성 (&&자리에 라우터 객체에서 매핑한 컴포넌트가 들어옴) //App.vue 공지 ABOUT && 3.Main.js에서 1) 컴포넌트,router Import 해주기 2) VueRouter 쓸게여 3) Router 인스턴스 생성 → path별로 보여줄 컴포넌트 매핑한 라우..