JS/vue.js
-
vue14(computed,watch)JS/vue.js 2022. 3. 18. 15:51
const vm = new Vue({ el: '#example', data: { message: 'hello' }, computed: { reversedMessage: function() { return this.message.split('').reverse().join('') } } } → computed 속성인 reversedMessage 선언 console.log(vm.reversedMessage) //"olleh" vm.message = "Nope!" console.log(vm.reversedMessage) //"!epoN" → vm.reversedMessage 값은 항상 vm.message 값에 의존!!!! → vm.message가 바뀔 때 vm.reversedMessage 에 의존하는 바인딩을..
-
vue13(vuex)JS/vue.js 2022. 3. 16. 17:59
vuex : 상태 관리 라이브러리 state(상태) : 특정 데이터를 여러 컴포넌트가 공유하고 있을 때 그 데이터를 '상태'라고 한다. 상태 관리 : 애플리케이션에서 사용하는 모든 데이터를 중앙에서 관리 → 효율적으로 데이터 관리 (↔props, emit event, eventbus 활용) - vuex를 쓰는 방법↓ 1. State : 변수 정의 프로젝트 내의 모든 곳에서 참조 및 사용 가능 state를 통해 각 컴포넌트에서 동일한 값 사용 가능 2. Mutations : state 변경하는 로직 (state 변경은 mutation을 통해야만 함! only!) 동기적 로직 : 정의한 로직들이 순차적으로 일어나야 각 컴포넌트의 반영 여부를 제대로 추적할 수 있기 때문에! 함수 형태로 작성 인자를 받아 vu..
-
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); => 네비게이션..