728x90 분류 전체보기163 [장기효(캡틴판교) - Vue.js 시작하기] 8. computed, watch 속성 출처 : 인프런의 장기효(캡틴판교)님의 강좌 / Vue.js 시작하기 - Age of Vue.js 8. computed, watch 속성 공통점 : 둘다 함수 내부 변수가 변할 경우 메소드가 동작한다. 공식문서에 의하면 computed는 데이터 조작에 watch보다 특화되어 더 간결하게 작성할 수 있다. 무거운 내용은 watch에 구현 (1) watch 사용 : 복잡 var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: f.. 2021. 1. 25. [장기효(캡틴판교) - 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. 이전 1 ··· 19 20 21 22 23 24 25 ··· 41 다음 728x90