JS
-
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', ..
-
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..
-
JS기본(promise)JS 2022. 1. 31. 23:48
JS는 한 번에 하나의 테스크만 실행할 수 있는 싱글 스레드 방식으로 동작! 따라서 비동기 작업을 하기 위해 promise 객체를 생성해서 작업해준다. ●콜백 함수 1.가독성이 나쁘고 2.비동기 처리 중 발생한 에러의 처리가 곤란 3.여러 개의 비동기 처리를 한번에 처리하는 데도 한계O ○promise 1.단점 보완 2.비동기 처리 시점을 명확하게 표현 가능 Promise promise는 프로미스를 생성하고 종료될 때까지 3가지 상태(states)(프로미스의 처리 과정)를 가진다. 대기(pending), 이행(fulfilled), 실패(rejected) const promise = new Promise((resolve, reject) => { ~ }); 다음과 같이 new Promise로 promise ..
-
JS숫자추측게임1JS 2022. 1. 14. 02:53
순서! 1.처음 prompt에 최댓값 받기 2.입력값이 random값 보다 크면-> "그거보다 작아" / 작으면 -> "그거보다 커" 라고 prompt에 문구가 나오고 맞출때까지 무한반복 3.그만두고 싶다면 "q"입력 4.총 시도한값도 같이 출력 "{try}했어!" 1.처음 prompt에 최댓값 받고, max 범위 안에서 숫자 랜덤값 정하기 function init() { let maximum = parseInt(prompt("maximum 숫자 입력해봐!")); const targetNum = Math.floor(Math.random() * maximum) + 1; } ++숫자로 제대로 입력하라고 while문으로 반복! while (!maximum) { maximum = parseInt(prompt("..
-
JS (web API's, event)JS 2022. 1. 14. 02:45
챌린지에서 학습한거! web API's를 확인하고 이용하는 과정으로 mouseenter, mouseleave, resize, contextmenu 이벤트를 이용하여 text와 color를 바꾸는 연습을 했다. const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"]; const hh = document.querySelector("h2"); const superEventHandler = { handleMouseEnter: function () { hh.innerHTML = "The mouse is here!"; hh.style.color = colors[0]; }, handleMouseLeave: function () { hh.inner..