728x90 Front-End/Vue12 [장기효(캡틴판교) - Vue.js 시작하기] 3. 컴포넌트 출처 : 인프런의 장기효(캡틴판교)님의 강좌 / Vue.js 시작하기 - Age of Vue.js 3. 컴포넌트 - 전역 컴포넌트 : Vue.component() 함수로 등록 > 플로그인, 라이브러리 등에 사용 - 지역 컴포넌트 : Vue 인스턴스를 생성하면서 components 속성에 넣어서 생성. > components 속 template로 치환된다. - id=app2 인 div에서는 컴포넌트 등록을 안했기 때문에 를 사용할 수 없다. 전역 컴포넌트로 등록한 만 사용가능하다. 2021. 1. 23. [장기효(캡틴판교) - Vue.js 시작하기] 2. 인스턴스 출처 : 인프런의 장기효(캡틴판교)님의 강좌 / Vue.js 시작하기 - Age of Vue.js 2. 인스턴스 - Vue 객체가 인스턴스이다. - el(element) 속성을 통해 와 연결했다. - data 속성을 통해 message 라는 변수에 'hi'라는 문자열을 머금도록 했다. - Vue 인스턴스는 태그와 JS를 연결하는 역할을 한다. 그리고 편의성을 제공한다. - new Vue로 선언하는 경우 대개 body 다음 최상위태그(여기서는 div)를 등록할 때 쓴다. root 컴포넌트로 자동지정된다. 2021. 1. 23. [장기효(캡틴판교) - Vue.js 시작하기] 1. Vue.js 특징 출처 : 인프런의 장기효(캡틴판교)님의 강좌 / Vue.js 시작하기 - Age of Vue.js 1. Reactivity : 변수의 값이 변하면 연동된 변수들의 값이 실시간으로 모두 변한다. (1) java script로 Reactivity 구현 : viewModel 에 접근할때마다 get, set 메소드의 실행을 통해 연관된 값들을 같이 변경시켜 준다. (2) Vue.js - 완전히 같지는 않지만 간결하다. 그냥 이렇게 생겼구나 정도로 확인 2021. 1. 23. [장기효(캡틴판교) - Vue.js 시작하기] 0. 개발 환경설정 출처 : 인프런의 장기효(캡틴판교)님의 강좌 / Vue.js 시작하기 - Age of Vue.js - Chrome - Visual Studio Code - Node.js - Vue.js Devtools 을 설치한다. Visual Studio Code 의 유용한 plug-in 목록이다. 전부 설치한다. - Vetur - Night Owl - Material Icon Theme - Live Server - ESLint - Prettier - Auto Close Tag - Atom Keymap Visual Studio Code( 이하 VSCode ) 에서 소스를 열고, 배경을 우클릭한 후에 Open with live Server를 누르면 화면으로 볼 수 있다. 브라우저에서 F12를 누른후에 Vue 탭에 들어가.. 2021. 1. 23. 이전 1 2 3 다음 728x90