vscode34 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. 01-03. vue 설치 Visual Studio Code 를 사용해서 개발환경을 만들어보자 1. vue 설치하고 ( npm, yarn 등으로 설치 ) 첫 create 하면 오류.. 대문자가 포함되면 안된다고 함 - Warning : name can no longer contain capital letters 2. vue create hellovue 해서 프로젝트 만들어보자 - Vue3 선택하고 엔터 ( 뭔지모르겠지만 최신버전을 해보자. 딴거없고 나는 항상 최신버전을 좋아함.. ) 3. 선택하고 엔터 치면 멋진 터미널 ui가 펼쳐지면서 주루룩 프로젝트가 만들어진다. - 하단에 보면 해당프로젝트는 어디에 있고, 어떻게 실행하는지 나온다 - 여기서 실행한다는 개념이 좀 헷갈렸는데 자체적으로 웹 서버가 있고, 해당 서버를 수행한다 라.. 2022. 1. 6. 이전 1 ··· 5 6 7 8 9 다음
