728x90 Front-End/Vue12 [장기효(캡틴판교) - Vue.js 시작하기] 7. 템플릿 문법 출처 : 인프런의 장기효(캡틴판교)님의 강좌 / Vue.js 시작하기 - Age of Vue.js 7. 템플릿 문법 - v-bind:id="xxx" > xxx에 해당하는 변수를 data 안에있는 변수의 값으로 대입 - v-if="xxx" > xxx 의 값이 true 이면 나타나고 아니면 보이지 않음 - v-else > if와 짝으로 v-if="xxx" 에서 xxx가 false면 보이고 아니면 사라진다. - v-show="xxx" > xxx의 값이 true면 보임. 차이점은 false일 때 개발자 도구에서 display:none 속성으로 HTML이 노출된다. - computed 속성 : 다음 글에서 설명 {{ num }} {{ doubleNum }} Loading... test user has been l.. 2021. 1. 25. [장기효(캡틴판교) - Vue.js 시작하기] 6. axios 출처 : 인프런의 장기효(캡틴판교)님의 강좌 / Vue.js 시작하기 - Age of Vue.js 6. axios - javascript의 ajax같은 비동기 통신을 위한 라이브러리다. github에서 확인가능하며 뷰에서 공식적으로 권장하는 오픈 소스이다. 아래는 예제이다. get user {{ users }} 2021. 1. 24. [장기효(캡틴판교) - Vue.js 시작하기] 5. router 출처 : 인프런의 장기효(캡틴판교)님의 강좌 / Vue.js 시작하기 - Age of Vue.js 5. router 1) VueRouter 인스턴스 생성 2) 컴포넌트의 router 속성을 통해 router와 컴포넌트 연결 3) router의 속성을 정의(path와 component) - path는 url 뒤에 path 경로를 더 쓰면 해당 component가 보인다. - component는 보여준 component 4) 는 a태그와 비슷한데, url/경로 주소로 보낸다 는 라우터 컴포넌트가 보여질 영역이다. Login Main 2021. 1. 24. [장기효(캡틴판교) - 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. 이전 1 2 3 다음 728x90