먼저 기존 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...
이전 포스트에서 만든 todolist 객체에 테스트용 더미 데이터를 넣는다 let todolist = ref([ {id:1,sbj:'정보1'}, {id:2,sbj:'정보2'}, {id:3,sbj:'정보3'}, ]); 출력하고자 하는 위치에 테스트를 해본다 {{todolist[0].sbj}} {{todolist[1].sbj}} 이대로는 정적인 정보밖에 출력이 안되는 for문을 사용해보자 Vue3 (3만 되는지는 모르겠다 2는 안해봐서..) 에는 v-for 이 가능하다 이떄 v-bind:key 값이 필요한데 key는 중복되는지 아닌지를 식별하기 위함이다. sql로 치면 PK값 같은 느낌일지도? {{i.sbj}} 아무튼 ul 안에 for문과 key값을 적용해주면 li안에서는 객체 하나하나 i에 저장된다고 보면..
TodoList 추가 기본 설정 bootstrap 을 사용하여 이쁘게 만들었다 todolist 배열에 넣기 위해서 이전 포스트에서 공부한 v-model을 활용하여 push 를 사용할것 var arr = ['a', 'b', 'c']; arr = ['a', 'b', 'c', 'd'] arr.push('d'); (push 예시) var Submit = ()=>{ todolist.value.push({ id: Date.now(), sbj:todo.value }); 를 사용하면 v-model로 받아온 todo 값을 객체내 sbj로 넣을 수 있다 하지만 이대로는 금방금방 리프레쉬 되는데 이를 방지하기위해 var Submit = (e)=>{ e.preventDefault(); todolist.value.push({ ..
let updateName =(e)=>{//event 객체를 받아올때 console.log(e.target.value) } updateName이라는 함수를 생성하여 input박스에 v-on:input의 함수로 사용하였다 함수에 콘솔로 이벤트 객체의 타겟 밸류를 로그로 확인이 가능한데 이렇게 무언가 칠때마다 로그가 갱신되는것으르 볼 수 있다 그렇다면 이전 포스트에서 못다한 인풋상자와 텍스트박스의 값을 동일하게 연계시킬 수 있다 let updateName =(e)=>{//evebt 객체를 받아올때 name.value=e.target.value; } 콘솔로만 찍던 값을 name.value (ref값을 바꿀때는 .value가 필수이다)로 저장해주면 완성이다 하지만 단순히 Vue에는 이 기능을 자체적으로 지원하는..
데이터 바인딩은 v-bind:ㅇㅇ (이때 ㅇㅇ에는 id, name, value 등과 같은 엘리먼트가 들어간다) 로 사용이 가능하다 {{name}} 버튼 위 코드에서는 input 안의 value값이 name과 연계되는건데 와 같이 name변수에 따라 value값이 바뀌는것을 볼 수 있다 V-bind:type 예제 {{name}} 버튼 type = number로 ref변수를 지정해주고 input안에 type ="text" 를 type="type"으로 변경한뒤 실행해보면 이렇게 넘버 input 형식으로 바뀌는것을 볼 수 있다. var updateName = ()=>{ name.value= "빡상" type.value="text" } 클릭시 type.value를 text로 바꾸고 클릭해보면 number -> t..
{{name}} 버튼 이 코드로는 name변수에 BbakSsang이 저장되어있고, 버튼이 클릭되면 빡상 으로 바뀌어야 하지만 클릭을 한다고 화면에 출력이 바뀌지 않는다 하지만 콘솔로 확인해보면 name이 바뀐모습을 확인 할 수 있다. Vue 에서 화면까지 변환을 하려면 Ref 또는 Reactive를 사용해야한다. Ref 사용법 ref 를 vue로부터 가져온다 let name= ref('BbakSsang'); var updateName = ()=>{ name.value= "빡상" console.log(name) } 변수를 ref()로 묶어주고, 업데이트 하고자 하는 부분에서 변수.value로 사용해야한다. Reactive 사용법 reactive는 배열 또는 객체에 사용하기 좋은 방식인것 같다 import ..
