프로그래밍/vue 312 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. 01-01. vue 적응기 지금까지 java / jsp / javascript 기반의 프로그래밍을 하다 vue를 접하게 되어 기존 개발방식과 어떻게 다른지 어떤식으로 이해하면 될지에 대해 생각하면서 적어본다. 뭐 대단한 경력을 가진건 아니고 그냥 저걸로 화면 만들고 굴리는 정도의 레벨이라 이정도 레벨이면 나처럼 쉽게 따라 할수 있을정도의 난이도이니, 너무 큰 걱정없이 도전해도 되지 않을까 생각한다. 튜토리얼 하나만 그대로 해봤는데도, 아 ~ 이 친구 가 기존 개발을 하면서 느꼈을 불편함을 그대로 vue를 만들면서 풀어냈는지 주관적인 생각을 해보게 되었다. 나도 첨엔 시작할때 기존 코드에 익숙해 있어 실제 튜토리얼을 따라하기 전까지 너무 막막해서 관둘까 생각하다가 1시간 정도 투자해서 튜토리얼을 따라 해보면서 '오 괜찮다.' 라는 .. 2022. 1. 6. 이전 1 2 3 다음
