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){ ..
먼저 기존 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...
var Submit = ()=>{ todolist.value.push({ id: Date.now(), sbj:todo.value, isdone : false, }); submit 함수에 isdone이라는 boolean 변수를 만들고 {{i.sbj}} checkbox에 v-model로 바인딩을 해주었다 CSS & Class Binding CSS Binding let todoStyle={ textDecoration:'line-through', color:'gray' } todoStyle이라는 변수를 하나 생성, 체크박스 체크시 완료 표시와, 색상변경에 필요한 값을 넣어둔다, {{i.sbj}} 체크박스에 포함되는 범위인 label로 돌아와 :style (v-bind:style)중 isdone함수가 true일땐..
