vue.js6 01-02. 기본 구조 설치법은 구글신께 도움을 요청하면 자비로우신 결과를 후두둑 쏟아주시니 그건 재끼고 시작하자. 1. Visual Studio Code로 한번열어보자 - 대충 한번 봐 보자. 지금까지의 경험과 통빡으로 뭘하는 놈인지 이름만 보고 알아맞춰보자 > node_modules . 회색이니깐 안봐도 되는 놈이겠군.. 패쓰.. (node.js관련 내용이라고 한다. 나도 어렴풋이 알아서 그냥 패쓰) > 다음은 public 폴더 . 음 느낌오네.. 이것들은 기존 static한 파일들이겠군 .. (이미지, js, font, 아이콘들 담아놓는곳) > 다음은 src 폴더 . assets - 음 이것도 담겨있는게 이미지인데 어따쓸까.. 나중에 알아보자 . components - 아 요놈은 실제작업할 html이겠군.. > App.v.. 2022. 1. 6. 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. 이전 1 2 다음
