이전 포스트에서 만든 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 ..
VUE3가 업데이트 되었습니다!! (뒷북) Vue를 설치하기 위해선 npm이 필요하죠?? NodeJs부터 깔아줍시다 노드 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org LTS버전으로 설치 ㄱㄱ! Vue 설치 Quick Start | Vue.js vuejs.org 1. 프로젝트명 2.TypeScript 사용 유무 3.JSX?? ... 모르는건 NO로 때리고 보자..! 앞서 만든 프로젝트 폴더로 이동하고 따라 입력하면
