Vue9 [Vue] JSON 데이터 다루기 JSON - JavaScript Object Notation의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환형식 - JavaScript에서 객체를 만들 때 사용하는 표기법과 매우 유사하다. - 태그로 표현하지 않고 중괄호{}같은 형식으로 하고 값을 ,로 구분하여 나열하기에 표현이 간단하다. JavaScript에서 JSON데이터 사용 - JavaScript의 FileReader메소드를 사용하면 로컬 파일을 읽어드려 사용할 수 있다. - JSON.parse 메소드를 사용하면 JSON데이터로 변경이 가능하다. JSON을 읽어 들이는 예제 ( JavaScript ) Vue에서 JSON파일 읽어들이기 - JavaScript에서 구현할 때와 대부분 같지만 reader.onload는 th.. 2022. 12. 29. [Vue] ToDoList 실행 결과 실행 코드 ToDo List 추가 {{remaining}} / {{todoList.length}} ( 기한 넘김 : {{overDate}} ) 🎉 할일을 모두 완료하였습니다 🎉 {{item.text}} (D-day : {{item.DueDate}}) ⚠️ 기한 넘김 하루 연장 체크항목 모두 삭제 할일 순으로 정렬 완료일로 정렬 2022. 12. 28. [Vue] 조건문 v-if - 조건에 따라 HTML을 표시하고 싶거나 지우고 싶을 때 사용하는 디렉티브 - 표시/비표시를 바꾸기만 할지 표시내용을 변경할지에 따라 사용하는 방법이 다르다. - 조건이1 true일때 표시 - 조건1이 false고 조건2가 true일때 표시 - 어느 조건에도 해당되지 않으면 표시 v-if/v-else 사용 예제 표시 체크박스 ON 체크박스 OFF v-show - true/false값을 사용하여 HTML태그를 보이지 않게할 수 있다. - v-if는 false일 경우 HTML태그를 삭제하는것에 반해 v-show는 false일경우 CSS style display속성을 none으로하여 HTML태그는 존재하되 사용자에게 보이지 않도록하는것이다. - true/false값이 변경되면 v-if는 표시할 때마.. 2022. 12. 23. [Vue] 이벤트 연결 v-on - 버튼을 클릭하거나 키를 입력 하여 이벤트가 발생 할 때 Vue 메소드를 실행시키는 이벤트 핸들러 - v-on은 자주 사용되는 디렉티브이므로 v-on 대신 @을 사용할 수있다. - HTML : or - JS : new Vue({ el:"#ID명", data:{프로퍼티명:값}, methods:{메소드명 : function( ){실행내용} }}) 더보기 ※ Vue 옵션 - el 옵션 : 어떤 HTML요소에 연결할지 - data 옵션 : 어떤 데이터를 연결할지 - methods옵션 : 어떤 함수를 연결할지 버튼을 클릭했을 때 - 버튼 클릭시 Vue 인스턴스의 메소드를 실행하는 처리를 만들 수 있다. - 메소드를 실행한 후 버튼의 상태를 비활성화가 되도록 할 수 있다. - 클릭하면 값을 변경하는 예제.. 2022. 12. 22. [Vue] 사용자 입력 연결 v-model - 사용자의 입력을 Vue 인스턴스의 데이터에 연결 - Vue인스턴스의 데이터가 웹 페이지에 표시되고 웹 페이지에서 입력한 값이 Vue인스턴스의 데이터에 반영되므로 양방향 바인딩 이라고도 한다. - input태그 - text - input태그의 텍스트를 Vue인스턴스 데이터와 연결하면 사용자가 텍스트를 입력하고 있는 중에도 데이터는 갱신된다. - 입력한 문자열을 표시하는 예제 나는 {{ myName }} 입니다. input태그 - radio - input 태그의 라디오 버튼값을 Vue 인스턴스의 데이터로 연결할 수 있다. - v-model에 동일한 프로퍼티명을 지정하면 하나의 그룹으로 묶인다. - value값을 통해 어떤것이 선택되었는지 전달된다. - img태그의 src속성의 값과 radi.. 2022. 12. 22. [Vue] 속성 지정 v-bind - 요소의 속성을 데이터로 지정 - - 의 형식으로 v-bind를 생략하여 사용할 수도 있다. 이미지 지정 - img 태그의 src속성의 파일명을 data:에 값으로 지정할 수 있다. - 이미지를 지정하는 예제 직접지정 v-bind로 지정 v-bind생략 링크 지정 - a 태그의 링크를 data:의 프로퍼티로 URL을 지정할 수 있다. - '배열로 준비된 링크들을 자동으로 나열하기' 등의 용도로 사용할 수 있다. - 링크를 지정하는 예제 링크를 직접지정 링크를 v-bind로 지정 정렬 지정 - 블록이나 셀에서의 align을 data:의 값으로 지정할 수 있다. - align 지정 예제 우측정렬 직접 지정 우측정렬을 v-bind 로 지정 인라인 스타일 지정 - style을 데이터로 지정 : -.. 2022. 12. 21. [Vue] 데이터의 종류 기본적인 데이터 종류 : 숫자형, 문자형, 불린 - JavaScript와 같이 입력된 값에 따라 테이터형을 자동으로 결정 - 숫자값이 입력되면 숫자형 - 문자열이 입력되면 문자형 Javascript 를 이용하여 표시하는 예제 {{ myPrice * 1.08 }} {{ "안녕하세요~ "+ myName + "님" }} {{ myName.substr(0,1) }} 배열 - HTML : {{ 배열명 }} or {{ 배열명[인덱스] }} - JS : new Vue({ el : "#ID명", data : { 배열명 : [값1, 값2, 값3,,,] } }) 배열로 값을 표시하는 예제 {{ myArray }} {{ myArray[0] }} 오브젝트형 (객체형) - 키와 밸류의 한 쌍으로 이루어진 데이터 타입 (여러 속.. 2022. 12. 21. [Vue] 인스턴스 Vue 인스턴스 작성 - new Vue({Vue 인스턴스 내용}) or var 변수명 = new Vue({Vue 인스턴스 내용}) - HTML : - JS : new Vue ({ el:"#ID명", data : {프로퍼티명 :값...} }) {{ 데이터(프로퍼티명) }} - 데이터를 있는 그대로 표시 ※ 데이터 바인딩 : Vue 인스턴스의 데이터가 웹 페이지상의 표시와 결합하는것 데이터를 있는 그대로 표시하는 예제 {{ myText }} v-text - 디렉티브를 사용한 방식 ※ 디렉티브 : HTML요소에 대해 Vue가 어떤 일을 하는지 지정하는 명령어로써 앞에 "v-"가 붙어있다. 데이터를 v-text로 표시하는 예제(el이 2개이상일 경우) v-html - 텍스트 내용을 HTML로 표시 HTML로 표.. 2022. 12. 21. [Vue] Vue.js Vue.js 프레임워크 - 자바스크립트 프레임워크 - ECMAScript 5 기능을 사용하기 때문에 Internet Explorer 8(IE8)이전 버전을 지원하지 않는다. (2.x ver 기준) - Angular Js나, React는 대규모 어플리케이션을 개발할때 사용되며, Vue.js는 가벼운 소규모 어플리케이션을 만드는것을 목표로 만들어 졌다. 프레임워크 - 복잡한내용을 간단히 미리 규격화/모듈화 해둔 도구 - 기존 자바 스크립트에서 사용할 수 없던 문법이나, 입력방식들을 사용할 수 있게 되고, 타 플러그인을 통해 UI컴포넌트 스타일, 추가 기능들을 불러쓴다는 것도 가능해진다. SPA(Single Page Application) - 한 페이지 내에서 모든 콘텐츠를 보여주는 웹사이트 Vue.js 장점.. 2022. 12. 21. 이전 1 다음
