꾸생의 DevLog

[Vue.js] 뷰(Vue) 디렉티브 v-for 알아보기

뷰(Vue) 디렉티브 v-for v-for "데이터의 반복을 처리해주는 디렉티브" 사용예시 {{n}} var App = new Vue({ /* JavaScript */ el : "#app", data : { num : [1,2,3,4,5,6,7,8,9] } }) 결과 1 2 3 4 5 6 7 8 9 조금 난이도를 높여서 v-for와 v-if를 사용하여 데이터를 바인딩 해보겠습니다. v-for 이름 나이 {{x.name}} {{x.age}} var App = new Vue({ /* javascript */ el : "#app", data : { people : [{ name : '김소혜', age : 21 }, { name : '진세연', age : 26 }, { name : '이채영', age : 20 ..

2020.10.24  

[Vue.js] 뷰(Vue) 디렉티브 v-if & v-show 알아보기

Vue.js v-if & v-show 디렉티브(directive) Vue.js 엘리먼트의 특별한 속성! v-if(v-else-if, v-else) & v-show 키 값이 true일때만 해당 엘리먼트를 나타나게 하는 디렉티브로 v-if와 v-show 둘다 결과는 같아 보이지만 v-show의 경우 값을 불러온 후 display: none 속성이 적용되므로 v-if의 경우가 더 효율적이다. visible_true : true v-if : {{msg}} v-show : {{msg}} visible_false : false v-if : {{msg}} v-show : {{msg}} var firstApp = new Vue({ el : "#app", data : { msg: "안녕하세요. 뷰를 학습중입니다.", v..

2020.10.24  

[Vue] Vue.js 시작하기

Vue.js 시작하기 Vue.js는 싱글 페이지 어플리케이션을 개발을 위한 프레임워크 Vue.js는 가볍고 빠르며 낮은 학습 곡선을 가지고 있다는데, 예를들어 Angular는 TypeScript를 선행해야한다고 한다. - 최신버전 Vue CDN Vue.js의 간단한 템플릿 구문을 사용해서 DOM에서 데이터를 선언적으로 렌더링이 가능함. 1. 단방향 데이터 바인딩 {{ msg }} var msg = { // Model : 출력에 사용할 데이터 msg : '안녕하세요 Vue!' } var model = new Vue({// Vue-Model : 출력위치와 데이터를 매칭 el: '#simple', data: msg }); /*-----------------------------------------------..

2020.10.23