Vue (8) 썸네일형 리스트형 #34 [Vue] 보강 : 콧수염, 속성, v-model, 조건문, 반복문, 메뉴달기 Work - 02_Vue - 01_basic - basic 만들기 vue create 작성 - enter - 해서 프로젝트 생성하기 src - Open in Integrated Teminal - npm run serve router - index.js 를 잘 조작하기 HomeView.vue에서 다 지우고 VueInit 자동완성 콧수염표기법으로 작성해도 됨 1. 콧수염 표기법으로 바인딩 : 화면 연결 2. 속성 바인딩 : 태그 연결 3. v-model 바인딩 : 태그 연결 1. 콧수염 표기법으로 바인딩 2. 속성 바인딩 1. App.vue에서 메뉴 추가하기 2. 클릭했을 때 페이지 이동 : router - index.js 아직 미완성 4. url 수정하기 3. views - AttrView.vue 추가 5.. #20 [Vue 3] 종합예제 - 부서/고객/책방/웹툰게시판 만들기, Watcher 메뉴 달기 & 디자인까지 해놓음 부서 게시판 - js 코딩 현재는 하드코딩해서 public에 들어가있음 json에 있는 데이터 받아서 화면출력해보기 1. axios만 깐다고 되는게 아니라 js는 항상 import 해야함 src - utils - HttpCommon.js 생성 2. DeptList.vue의 js부분에 import 해도 되지만 필요할때마다 import 하는게 번거로움 2. utils - HttpCommon.js : 인터넷 주소 정의 : 모든 컴포넌트(.vue)에서 공통으로 사용할 함수 정의 * 설명 * js #1 alert("Hello") alert("Hello") alert("Hello") alert("안녕") js #2 alert("Hello") alert("Hello") alert("H.. #19 [Vue 3] 종합예제 - 부트스트랩 메뉴 만들기, axios 설치 JSP가 Vue 가르치는 과정 백앤드 : JAVA 프론트만 가지고 어떻게 연동되는가 배우기 board는 테이블을 주로 씀 vue로 게시판 만들기 새 프로젝트 생성 1. 파일 생성 2. 주소창에 cmd 치고 엔터 3. vue create board_basic (한글이나 공백은 자제) 4. manually select features 선택 5. 스페이스로 선택 6. 여기부터 처음꺼 선택 7. 마지막 : 지금까지 선택한 옵션을 즐겨찾기로 저장할래? 노 8. 완성 9. 설치 완료 메뉴 만들기 1. App.vue에서 필요없는거 다 없애고 0) js 하는 부분 없으니 script 자동완성 1) import HeaderCom 자동완성 ( HeaderComVue -> HeaderCom 으로 수정) 2) js 부분에 c.. #19 [Vue 2] 종합예제 - 조건문, 반복문, 함수(mouseover, button), Class, 컴퓨티드 함수 화면을 만드는 종합예제 App.vue : 모든 컨퍼넌트가 조립됨 css도 import : @import "css 파일경로" 조건문 문자열 1. exam02 - ConditionView.vue - lang " " 삭제 2. 여기에 예제 디자이너가 만든 css 클래스 작성 : html 코딩 완성 3. components - HeaderCom.vue : 메뉴는 HeaderCom (머리말) 부분에 있음 ConditionView를 실행할 수 있는 link 달기 Basic 메뉴에 링크 달기 url도 /condition, 이름도 Condition 4. 클릭했을 때 컴포넌트 띄워야함! 컴포넌트 연결하는 규칙정의 하러가기 = router - index.js 5. Condition 눌렀을 때 보이면 완성된것! 6. 장바구.. #18 [Vue 2] 종합예제 - 부트스트랩 새 프로젝트 생성 1. 002_cart 파일 생성 2. 주소창 전체 클릭하고 cmd 검색 - enter 3. vue create cart 입력 4. enter 치고 화살표로 이동하여 manually select features 선택 (맨 마지막) 5. spacebar로 선택하고 enter 6. 3.x 버전 선택 7. history 모드 할래 ? Y 8. 여기부터 엔터 9. 마지막 즐겨찾기할래? N 10. 마지막 완료 - 닫기 11. 파일에 설치 완료 * 참고 : 공식사이트 12. 잘 설치됐는지 확인 : Vue의 첫 화면 Hello World src - 오른쪽 마우스 - Open in Integrated Terminal - npm run serve - enter - 주소 ctrl + click 장바구니(카.. #18 [Vue 1] 메소드, 컴퓨티드 함수, 객체배열 반복문, Props, Emit 메소드 #2 소프트 코딩(바인딩 속성 이용) : this 사용(뷰가 모든 재산(data, 함수 등)을 참고할 수 있음 1. H_MethodView.vue 조작 1) html 코딩 쪽에 button 적고, @ 적고 click="clickBtn2" 적기 @ = v-on 2) data 함수 안에 바인딩 속성넣기 : 여기서는 message 가 바인딩 변수(속성) data { return { message: "Hello World" } } 3) clickBtn () { this.message } 로 소프트 코딩하기 clickBtn () { Hello World } 는 하드코딩 메소드 #3 매개변수가 있는 함수 vue는 보통 함수뒤에 ( ) 생략하고 쓰는데 생략했다 = 매개변수가 없다는 뜻 ex) clickBtn .. #17 [Vue 1] 라우트, 바인딩, 속성 바인딩, Form 바인딩, 조건문, 반복문, 메소드 * component를 다른 위치에 끼워넣을 수 있음 => 코딩을 줄일수 있어서 효율적임 * node_modules : 설치파일 다른사람에게 소스 전달해주고 싶으면 node_modules 삭제하고 주기 다시 설치하려면 Open in Intergrated Terminal 에 "npm install" 작성하면 vue의 설치파일 내려받을 수 있음 * vue 실행 종료 : ctrl + c 2번 Vue 실행하는 방법 src - 오른쪽 마우스 - Open in Intergrated Terminal - npm run serve - Enter - 위(컴퓨터 URL)/아래(IP 주소) 입력 또는 Ctrl+링크클릭 라우트 (메뉴작업) : url 과 페이지(컴포넌트)를 연결하는 규칙 정의 router-link = a lin.. #16 [Vue 1] 설치, 조작법, 콧수염 표기법, 컴퍼넌트(머리말/꼬리말) Vue 파일 생성 Vue : HTML 1페이지로 웹 사이트를 개발하는 라이브러리 java script가 기반 SPA(Single Page Application) : HTML 1장으로 만드는 서비스 머리말, 메뉴, 꼬리말 : 고정 본문, 사이드바 : 클릭하면 바뀜. 부분갱신기능 -> 속도가 비약적으로 빨라짐 : SPA 기술 과거 코딩방식보다 일부 변경된 부분만 바꾸어 끼우는 방식이라서 성능이 비약적으로 증가함. 현대 프론트 코딩방식은 SPA 개발로 바뀌고 있으며 비슷한 계열로 React / Angular가 있음 05_Vue cdn 사용법과 vue-cli 를 이용한 사용법 2가지가 있음 01_Helloworld.html Vue 의 조작방법 : 바인딩 기술 - data에 message라는 속성 콧수염 표기법 .. 이전 1 다음
