전체 글
-
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별로 보여줄 컴포넌트 매핑한 라우..
-
vue4(router childeren-라우터 중첩)JS/vue.js 2022. 3. 10. 16:26
router 중첩 : 상위-하위 컴포넌트 설정해서 고정적인 UI 부분은 상위 컴포넌트에 두고, 변동있는 UI부분은 하위(children) 컴포넌트로 둬서 필요한부분만 렌더링!효율적임 { path: '/notice', component: () => import('./views/notice'), children: [ { path: 'chart', component: () => import('./views/notice/chart'), { path: 'table', component: () => import('./views/notice/table'), ] },
-
vue.3(v-i18n)JS/vue.js 2022. 3. 10. 15:01
i18n : 국제화(다국어) 지원해주는 오픈 소스(It easily integrates some localization features to your Vue.js Application.) →json { 내용 : 해당 언어로 쓰인 내용 } 형식 →언어별로 (ko.json, en.json) 파일 작성 //en.json const messages = { en: { message: { hello: '{msg} world' } } } //app.vue {{ $t('message.hello', { msg: 'hello' }) }} //위치 //입력값 hello world //main.js new Vue({ store, router, i18n, render: h => h(App) }).$mount('#app') ma..
-
vue.2(mixin)JS/vue.js 2022. 3. 10. 10:59
mixin : 컴포넌트에 재사용 가능한 기능을 배포하는 유연한 방법 -> 상속 개념 왜 쓰나 : component를 n개 만들어 사용하는 경우 => 유지/보수가 어렵다는 문제점이 있다 => mixin.js를 만들어서 가져다 쓰면 병합 가능해서 유지/보수가 쉽고 보기도 편함 1. 적용 순서 //mixin.js const hiMixin = { mounted() { console.log("HEllO"); } } //App.vue export default { name: 'App', mixin: [hiMixin], mounted() { console.log("nope") } } 이렇게 mixin 사용 후에 다른 객체를 입력하면 ->"HELLO" ->"nope" 표시된다. ▶중복된 method는 순서에 따라 실행..
-
vue1(ref/디렉티브)JS/vue.js 2022. 3. 8. 14:42
react의 useState개념? html을 변화시킬때 사용 변수선언하고, .value 로 이벤트 걸기 비슷한 개념으로 reactive! => string이나 number가 아닌 object, array의 경우 사용한다. 이 경우에는 .value가 아닌 .id 로 이벤트 걸어주면 된다. 디렉티브는 vue에서 제공하는 특수 속성! v- 접두어가 붙어있으며 사용자가 짐작할 수 있듯 렌더링 된 DOM에 특수한 반응형 동작을 한다. v-on click 이벤트 걸기 -> (Vue 인스턴스에서 메소드르 호출하는 이벤트 리스너 추가 가능) 다음과 같이 입력하면 -> 버튼을 클릭하면 function1이 발생 v-bind 데이터 바인딩 -> ...... const app2 = new Vue({ el: '#app-2', ..