먼저 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..
부트 스트랩에 있는 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){ ..
먼저 기존 App.vue에 있던 ul을 components 안에 todoList.vue 를 새로 생성하고 옮겨준다 {{i.sbj}} 삭제 //components/TodoList.vue 부모 컴포넌트에 경로를 import해주고, 컴포넌트역시 등록해준다 import TodoList from './components/TodoList.vue'; //현재 등록된 컴포넌트는 TodoForm과 TodoList 자식 컴포넌트가 두개 있음을 뜻함 components:{ TodoForm,TodoList }, App.vue의 본문에서 컴포넌트 사용을 하는데 이때 :todolist는 자식컴포넌트로 보낼때의 이름 뒤의 todolist는 부모 컴포넌트에서 사용중인 함수 또는 변수(여기서는 배열 변수이다) 자식 컴포넌트인 Todo..
추가 //TodoFrom.vue 내용이 어려우니 전체 코드와 분석을 해보련다.. 주석으로 설명 대체.. TodoList {{i.sbj}} 삭제 오늘은 갓백수의 삶을 꿈꾸시나용..? //app.vue 바뀐점 var todoAddapp = (todo)=>{ todolist.value.push(todo) } return { todoAddapp,todolist,todoStyle,deleteitem, }; } 기존의 submit을 todoAddapp으로 바꿨다 받아오는 값은 자식 컴포넌트의 todo(let todo=ref(" ")) 함수의 이름이 바뀌었으니 return 역시 Submit->todoAddapp으로 변경
components 안에 TodoForm.vue 생성 컴포넌트 안에는 기본적으로 ,, //TodoForm.vue 컴포넌트를 불러오고자 하는 App.vue로 돌아와서 import TodoForm from './components/TodoForm.vue'; export default { components:{ TodoForm }, import와 화면으로 보내기 위한 export default를 통해 보낼 컴포넌트를 선택한다 TodoList //
{{i.sbj}} 삭제 v-for에서 todolist 배열의 값을 i로 가져올때 index를 생성하여 번호를 붙인다 아래 버튼에서 @click(v-on:click) deleteTodo함수를 호출할때 index를 매개변수로 보내고 var deleteitem=(index)=>{ console.log(index) } 콘솔로그로 먼저 index의 값이 잘 증가하나 확인한다 각 li안에 잘 적용이 된 모습을 볼 수 있다 자바스크립트의 splice 함수는 원본 배열에 새로운 요소를 추가하거나 기존요소를 삭제 또는 교체하여 원본 배열을 변경 하고 제거된 배열을 반환한다 arr.splce(start,deleteCount,[add1],[add2]...) var deleteitem=(index)=>{ // console...
