꾸생의 DevLog

[Vue.js] 뷰(Vue) 디렉티브와 계산형 속성 예제(feat. methods)

뷰(Vue) 디렉티브 + 계산형 속성 예제 See the Pen [Vue.js] 뷰(Vue) 디렉티브 + 계산형 속성 예제 by junheeleeme (@junheeleeme) on CodePen. //v-on: 을 @ 로 줄여서 사용가능 //@input="nameChanged" 도 가능 //keyup 발생 시 nameChanged 메소드 실행 var App = new Vue({ el: "#app", data : { countryname : "", countries : [ {no : 1, name : "제니", birth_date : "950116", real_name : "김제니"}, {no : 2, name : "지수", birth_date : "940103", real_name : "김지수"}, {..

2020.10.30  

[Vue.js] 뷰(Vue) 계산형 속성(Computed Property)

뷰(Vue) 계산형 속성(Computed Property) See the Pen 뷰(Vue) 계산형 속성 by junheeleeme (@junheeleeme) on CodePen. var app = new Vue({ el : "#simple", data : { num : 0, result : 0 }, computed : { sum : function(){ var nsum = 0; for(var i = Number(this.num) ; i > 0 ; i--){ nsum+= i; } return nsum; } } computed 라고 해서 무언가 특별할 줄 알았는데 methods와 거의 같다. 속성처럼 입력하자마자 계산되어 출력이 되어버린다. return값을 무조건 필요로하며 메소드가 아니므로 methods..

2020.10.29  

[Vue.js] 뷰(Vue) 디렉티브 v-on 이벤트 핸들링

뷰(Vue) 디렉티브 v-on 알아보기 v-on "사용자의 액션에 의해 명령을 실행하는 입력핸들링 디렉티브 입니다." 오늘은 복습할겸 v-if와 v-on을 함께 사용하겠습니다. 우선 버튼을 눌렀을때 data의 visible이 'true'와'false'를 반복하며, 'true'일 경우 앨리먼트 안의 텍스트가 보여지고 'false'일 경우 사라지는 코드를 작성하겠습니다. v-on {{msg}} //v-if="visible" visible = {{visible}} //v-on:click="clickBtn" var firstApp = new Vue({ //JavaScript el: '#app', data :{ msg: '오늘은 v-on을 배우고 있습니다.', visible : true //초기값은 true },..

2020.10.25  

[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  

자바스크립트 날짜, 시간 표현하기

자바스크립트 날짜/시간 표현 자바스크립트와 제이쿼리로 Date객체를 사용해 날짜를 표현하는 방법입니다. See the Pen NWrdYro by junheeleeme (@junheeleeme) on CodePen. //Variables const time_txt = document.querySelector('.time'); //functions init(); function init(){ setInterval(()=>{ cnt_time(); }, 1000); } function cnt_time(){ const time = new Date(); const year = time.getFullYear(); const month = time.getMonth()+1; const date = time.getDate..

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  

[HTML/CSS] 간단한 아코디언 메뉴(Accodian menu)

간단한 아코디언 메뉴(Accodian menu) See the Pen BazpBrr by junheeleeme (@junheeleeme) on CodePen. 정말 간단하고 심플한 아코디언 메뉴 siblings()를 이용하여 하나씩만 열리게해주면 심플 그 자체

2020.10.23   14