프로그래밍44 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. 01-04. vue 개발환경 맛보기 앞에 샘플을 한번 바꿔보자 1. 우선 서버를 가동 시키고 2. 브라우저를 열어서 App running at : 으로 나온 주소로 접속해보자 3. App.vue에 HelloWorld 의 msg 부분을 한번 바꿔보자. 4. 저장하면 자동으로 브라우저가 새로고침 되면서 나온다 개발환경은 참 좋은듯 하다 2022. 1. 6. 이전 1 ··· 7 8 9 10 11 다음
