728x90 Front-End39 [장기효(캡틴판교) - Vue.js 시작하기] 4. props/ event 출처 : 인프런의 장기효(캡틴판교)님의 강좌 / Vue.js 시작하기 - Age of Vue.js 4. props / event - props는 아래로 전달 (데이터) - event는 위로 전달 (이벤트) (1) props - root(#app) 컴포넌트가 컴포넌트를 포함하고 있다. - root(#app)의 data num과 message가 하위컴포넌트 태그의 v-bind:하위컴포넌트 변수="상위 컴포넌트 변수"를 통해서 하위 컴포넌트에 전달된다. 그리고 하위 컴포넌트에는 props:[ '변수이름' ]을 통해 받는 변수를 정의 해 놓는다. (2) event-emit {{num}} - 1. template에 v-on:click="메소드이름" 으로 클릭시 실행될 메소드 설정 2. methods 속성에서 메소.. 2021. 1. 23. [장기효(캡틴판교) - 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. 이전 1 ··· 6 7 8 9 10 다음 728x90