JS/vue.js
-
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', ..
-
vue0.(vue/라이프사이클)JS/vue.js 2022. 2. 21. 23:13
VUE ▶SPA : Single Page Application ▶화면 전환이 부드러움 / 새로고침없이 모바일 앱같은 느낌 ▶vue 의 경우 html 렌더링이 더 빠름 ! (than React) 라이프사이클 : 인스턴스나 컴포넌트가 생성된 후 보여지고, 사라지기까지의 단계 : 페이지를 구성하는 과정 Vue 1. create(생성: 데이터만 존재) -> 2. mount(template→DOM에 부착) -> 3.update(업데이트: data변화시 rerendering) -> 4.destroy(제거) Hook : beforeCreate(), created(), beforeMount(), mounted(), beforeUpdate(), updated(), beforeUnmount(), unmounted() be..