분류 전체보기53 01-08. 컴포넌트 만들기 앞에서 언급했던 내용으로보면 부모 -> 자식 으로 데이터 전달법을 봤는데 이보다 더 많은 방법이 있겠지만 앞에서 본것만 우선 다시 보자 1. 부모 template 내에 html 태그에 "msg" 선언 및 자식창 전달 2. 자식 script 영역과 props 내에 변수 선언 3. 자식 template 영역에 기술 MyVisitorCount - ToDoForm.vue를 components 하위 폴더에 만들자. - 기본 모습이다 - ToDoForm.vue에 inputbox 와 라벨만들기 - 부모창(App.vue)에서 ToDoForm.vue를 가져와서 사용해보자 > import 하고, components에 언급하고 저장 하면 ... > 오류 남. 내용 보니 사용하지 않으면서 왜 등록 했니? 라고 오류 뱉넹.. .. 2022. 1. 6. 01-07. vue 이벤트 핸들링 1. button onclick 이벤트는 어떻게 이벤트와 연결 시키나 - 버튼을 누르면 +1이 되는걸 만들어보자 (v-on:click="함수") - template에 {{counter}} 선언 - 버튼에 이벤트 핸들러 추가 > v-on:click="counter += 1" - script 영역에 counter 선언 - @click도 잘 된다 @이벤트명이 더 편할듯 하네 - 그래서 intellisense 기능이 있어 한번 눌러봤다 - 익숙한 이벤트 들이 많이 보인다 - 요런것들이 있구나 해서 한번 알아두면 좋을듯 하다 - 2. 버튼에 함수를 정의하고 해당 함수를 script에 기술해보자 @click에다가 AddNumber() 함수로 바꾸고 script 블럭에서는 methods 를 쓰고 그안에 함수들을 기술.. 2022. 1. 6. 01-06. vue click으로 값 전달 1. 클릭 시 변수 전달 - span 을 하나 만들고 v-bind:title="message"추가 - button 하나 만들고 v-on:click 추가 => 기존에 테그안에 들어가는건 v- 로 시작하는듯 하다 - script 의 데이터 영역에 변수 하나 추가 -> span 태그에 있는 message 변수 - script 영역에 methods 추가하고 버튼에 있는 v-on:click 의 함수명 추가 - data 영역에 있는 message 변수 접근은 this.변수명으로 접근가능하다 - 개발자 도구로 소스코드를 보자 > message로 되어 있던 친구들은 전부 message 값으로 다 바뀌어져 있다 . data 영역에 선언하면 로드되자마자 실행되고, html에도 적용되는구만 > button 영역에 oncli.. 2022. 1. 6. 01-05. vue 변수 전달방법 html에 javascript를 가지고 다양한 일들을 한다. 값을 변경한다던지, 이벤트를 연동한다던지등등의 일을 한다 우선은 vue도 동일하게 어떻게 하는지 한번 확인해 보자 1. html 태그내 변수 전달은 {{변수명}} 으로 한다 - 블록내 data() 영역에 변수선언 - template 영역에 변수 입력 2. object 내 변수전달은 v-model이다 .( 또 다른 방법이 있겠지만 .. 우선) - 위 내용으로 봤을땐 유사하지 않을까? - input은 v-model을 사용해 변수와 연결한다 3. if else 는 v-if - span에 v-if를 사용하면 Dom 객체에서 사라짐 - 브라우저 개발자 모드에서 네트워크를 봐도 해당 태그가 안보이네? 신기하구먼. 이건 나중에 알아보자 4. for - lo.. 2022. 1. 6. 이전 1 ··· 9 10 11 12 13 14 다음
