먼저 vue3에서 라우터를 사용하기 위해서는 vue-router를 설치해야한다 Installation | Vue Router Installation Direct Download / CDN https://unpkg.com/vue-router@4 Unpkg.com provides npm-based CDN links. The above link will always point to the latest release on npm. You can also use a specific version/tag via URLs like https://unpkg.com/vue-router@4.0. router.vuejs.org npm install vue-router@4 --vue3에서는 @4버전을 사용해야한다. 설치가 완..
만들어본 Todolist에서 검색기능을 활용하여 검색 글자를 쓸때마다 계속해서 네트워크를 통하여 데이터를 주고받는 모습이다. 즉각적인 반응을 원하는게 아니라면 setTimeout을 통해 딜레이를 줄 수 있다. let timeout = null; watch(search, () => { clearTimeout(timeout); timeout = setTimeout(() => { getTodolist(); }, 1000); }); 여기서 들어간 timeout변수와 clearTimeout은 setTimeout만 사용할 경우, 하나씩 칠때마다 1초간 딜레이만 주어, 결국에 동일한 양의 네트워크 송수신량을 보여주지만, 다음 입력(함수의 사용)이 감지될경우 기존의 timeout을 리셋시키면서 마지막으로 입력된 set..
ref @pointerup @pointerdown @pointermove Click:{{ clicked }} X:{{ xPoint }} Y:{{ yPoint }}
Vue 어플리케이션을 쉽게 생성하게 도와주는 프레임워크 Nuxt js Nuxt 공식사이트 The Intuitive Vue Framework Build your next Vue.js application with confidence using Nuxt. An open source framework making web development simple and powerful. nuxtjs.org 설치 방법 npx npx create-nuxt-app yarn yarn create nuxt-app npm npm init nuxt-app 명령어 실행후 나오는 체크리스트 ✨ Generating Nuxt.js project in hello ? Project name: (hello) 엔터 ? Programming la..
부트 스트랩에 있는 Pagination을 활용하여 Todolist에 출력되는 리스트를 조절할 예정이다 먼저 부트스트랩! Pagination Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages. getbootstrap.com Previous 1 2 3 Next 부모 컴포넌트 App.vue 안에 getTodolist 함수를 변형할 예정인데.. let getTodolist = async (page) => { currentpage.value = page; try { let res = await axios.get( //"http://localhost:30..
따로 오라클 디비가 없는 관계로 json-server를 통한 fake db를 구축할 예정이다 Json-Server 설치 및 사용법 (더보기↓) 더보기 npm i json-server --save 설치가 다 되었다면 터미널에 실행 명령을 친다 json-server --watch db.json { "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ], "profile": { "name": "typicode" } } 이렇게 적혀있다. 3000/post , 3000/comments ... id, title,author 칼럼..
먼저 검색창을 만들기 위해 부모 컴포넌트 맨 위에 input을 추가해준다 v-model로 만든 변수명과 검색기능을 작동시킬 함수를 선언한다 let search = ref(""); let filterTodolist = computed(() => { if (search.value) { return todolist.value.filter((tmp) => { return tmp.sbj.includes(search.value); }); } else { return todolist.value; } }); sarch는 ref" "로 searchTodolist는 computed함수를 사용하였는데... ref값을 즉각적으로 변경하여 다시 출력할때..사용?한다..? 캐시를 두번사용하지 않는다는 특징이 있다 정도..?(co..
Props는 부모 컴포넌트에서 자식 컴포넌트의 값을 변경해도 괜찮지만, 자식에서 부모의 값을 변경하는것은 하지말라고 한다. //TodoList.vue 기존의 코드에서 v-model을 통하여 todolist.isdone값의 수정을 하였으나, todolist[]는 부모컴포넌트인 App.vue에 있다. 따라서 v-model 대신 index값을 부모컴포넌트로 전달하여, 부모컴포넌트 안에서 수정을 하려고 한다. {{i.sbj}} 삭제 //TodoList.vue (자식) :value (v-bind:value) 로 todolist.isdone을 지정하여주고 @change(v-on:change)로 체크박스에 변화가 있을떄 toggleTodo함수를 index를 매개변수로 호출한다 setup(props,context){ ..
