★ Vue 인스턴스 개요 const vm = Vue.createApp과 같이 메서드로 만든 객체들을 자주 사용한다. 이처럼 Vue.creatApp 메서드를 호출하여, 만들어진 객체를 애플리케이션 인스턴스라고 부른다. 여기서 사용된, name, data 옵션이 바로, 옵션 객체 이다. var vm = Vue.createApp({ name : "App", data() { return { name : "" }; } }).mount('#app') 1. data 옵션 컴포넌트가 관리하고 추적해야 할 데이터를 등록할 때 사용한다. 관리와 추적의 의미는 변경을 탐지하고 추적하여, 화면을 갱신하겠다는 의미. 컴포넌트 인스턴스에서 $로 시작하는 이름은 인스턴스 내부에서 특수한 용도로 사용된다는 의미. 따라서 $,_로 시..
★ 보간법 mount하고 있는 9행 id가 app인 div요소 {{ }} : 콧수염 모양을 닮았다해서, 콧수염 표현식이라고도 부르며, 보간법이라고 불릅니다. {{message}} ★ 기본 디렉티브 1. v-text, v-html 디렉티브 Vue 디렉티브는 템플릿 안에 사용하는 v-로 시작하는 속성이며, 이것을 이용해 HTML 요소와 관련된 작업을 지정할 수 있습니다. v-text : {{message}} 와 같은 동일한 기능을 수행한다. 즉, inner Text 속성에 연결됨. 태그 문자열을 HTML 인코딩하여 나타나기 때문에 화면에는 태그 문자열이 그대로 나타남. v-html : innerHTML 속성을 변경하는 것. innerHTML 속성에 연결됨. 태그 문자열을 파싱하여 화면에 나타냄 2. v-bi..
★ 새로운 객체 리터럴 객체의 속성을 작성할 때 변수명과 동일하다면 생략 가능. var name = "홍길동"; var age = 20; var email = "gdhong@test.com"; var obj = { name, age, email }; console.log(obj); 새로운 메서드 표기법 ES6가 제공하는 새로운 객체 리터럴 -> function 키워드를 사용하지 않고 바로 { } 구현부가 따라옴. 이 함수는 화살표 함수가 아니기 때문에, 함수가 중첩되었을 때 바깥쪽 함수의 this가 이 함수의 this로 자동으로 전달되지 않는다. let p1 = { name : "아이패드", price : 200000, quantity : 2, order : function() { if(!this.amo..
★ 호스이팅 변수의 선언을 스코프의 최상단으로 옮기는 행위 var console.log(A1); var A1 = "hello"; var는 if문이나 for문의 중괄호 {}, 에 의한 블록 수준의 유효 범위를 제공하지 않는다. 호이스팅 단계에서 이미 변수가 생성되어 있다면, 변수를 생성하지 않고 건너뛴다. var A1 = 100; console.log(A1); var A1 = 'hello'; console.log(A1); 동일한 이름의 변수가 생성되어 오류가 발생할 것 같지만 오류 X ★ ES6 1. let 이러한 문제를 해결하기 위해 let 키워드를 지원 let msg = "GLOBAL"; function outer() { let msg = "OUTER"; console.log(msg); if(true)..
6. 이벤트 연결 v-on : 해당 디렉티브를 사용해 이벤트 메소드와 연결할 수 있다. 1씩증가 {{ count }} 한번만 클릭 가능 {{ text }} 10씩증가 {{ tenCount }} 1씩 증가, 한번 클릭, 10씩 증가 7. 조건문 v-if, v-else-if, v-else v-if 를 사용해서 프로퍼티를 이용해 조건을 주어 HTML을 표현할 수 있다. one two three one check two check three check 조건문에 따른 실행 결과 8. 반복문 v-for : 배열로 이루어진 프로퍼티를 반복적으로 표현할 때 사용한다. {{ item }} {{ key }} : {{ value }} {{ item.a}} : {{ item.b }} : {{ item.c }} add dele..
Vue 인스턴스 Vue 인스턴스에서 제공되는 옵션을 붙여 개발 할 수 있다. el : id를 찾는 함수 data : 값을 넣을 데이터 {{ myText }} 2. 데이터 표시 {{데이터}} v-text : 프로퍼티 html에 표현할 때는 {{ 프로퍼티 이름}} 형식으로 표현 v-html : HTML로 표현 {{ myText }} v-text와 {{myText}는 프로퍼티 텍스트를 그대로 출력하지만, v-html은 HTML로 표현된다. 3. 데이터 종류 Vue에서 데이터 타입은 숫자형, 문자형, Boolean이 있다. 데이터 종류 {{ myPrice * 1.08 }} {{ "안녕하세요~" + myName + "님"}} {{ myName.substr(0,1) }} 배열 오브젝트 배열,오브젝트 {{ myArr..
★ 프로젝트 생성 터미널에서 다음 명령어 실행 vue create oing-vue-project 3 버전 선택 설치 완료 ★ Vue 프로젝트 실행 cd oing-vue-project npm run server 프로젝트 실행 -> npm run serve --port 8081 기본적인 Project 구성
★ VSCode 설치 자신의 환경에 맞는 버전과 운영체제에 맞게 다운로드 https://code.visualstudio.com/docs/?dv=win64user Documentation for Visual Studio Code Find out how to set-up and get the most from Visual Studio Code. Optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com ★ Node.js 설치(npm..
