본문 바로가기
반응형

분류 전체보기163

[ VueJS 입문 ] VueJS 함수 저장소 / VueJS Methods 함수 저장소, methods - https://jsfiddle.net/sunghun/th2m9ws7/1/ Vue의 정보를 저장하는 곳이 data라면 함수를 저장하는 곳은 methods 이다. 예제에 보면 methods에 howAreYou() 라는 함수를 선언하였다. 간단하게 "기분이 어때?"라는 문자열을 return한 함수이다. 해당 코드를 Run버튼을 눌러 실행해보면 {{ howAreYou() }} 자리에 해당 문자열이 나타나는 것을 볼 수 있다. Vue 내에서 Vue를 지칭하는 단어, this - https://jsfiddle.net/sunghun/th2m9ws7/2/ Data 안의 정보를 가져와 바로 사용하는데 있어 필요한 마법의 단어는 this 이다. 예제를 보면 sayHello()라는 함수에 t.. 2019. 9. 21.
[ VueJS 입문 ] VueJS의 정보 저장소 data / VueJS data Vue선언 - https://jsfiddle.net/sunghun/th2m9ws7/ VueJS의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링하는 것. 쉽게 면에 렌더링 되는 HTML 코드들을 컨트롤 하는 것. New Vue({ })는 이러한 역할을 할 Vue를 선언하고 정의해주는 역할. Vue의 정보 저장소 data Vue는 여러 속성(property)들을 가지는데 그 중 data는 Vue에서 사용할 정보들을 저장하는 곳으로 object 형태로 정보들을 가지고 있다. 우리는 title이란 변수를 만들어 "안녕 VueJS!"라는 값을 넣어주었다. 그럼 이 Vue는 "안녕 VueJS!" 라는 값을 들고 title 값이 어디로 가야할지 찾는다. 그 값의 위치는 여기 {{ Mustac.. 2019. 9. 20.
[ VueJS 입문 ] 시작하기 앞서 새로운 자바스크립트(Javascript)의 프레임워크인 Vue를 최근 공부하기 시작하며, 공부한 내용을 기록으로 남기고자 한다. 다음 내용들은 '맨땅에 개발하기' 의 'Hoza Cho' 님의 좋은 강의 내용을 토대로 공부하고 있으며, 강의 내용을 따라한 예제나 일부 설명부분들을 그대로 또는 일부 조금 수정해보았다. ( 참고사이트 - 맨땅에 VueJS ) 새로운 프레임워크를 잘 적응하여 프론트개발에 있어 더 다양한 결과가 나오길 기대해본다. 2019. 9. 20.
우리 아빠 언제 오려나 라떼가 조용해서 찾아보니 베란다에 앉아서 밖을 쳐다보고 있네요~ 남편이 주차하는 쪽인데 가끔 주차해놓고 1층에서 라떼를 부르곤 했는데 그걸 들었는지 저러고 아빠 기다리나 봐요 ㅎㅎ 빨리 와요~ 아빠! 2019. 9. 3.
[ jquery 기초 ] jquery 셀렉터 - 속성(Attribute) | 개체의 속성값을 이용하여 선택해보자 - Attribute Selector 각각 요소들은 속성을 가질 수 있습니다. 미리 정해진 이름이나 필요에 의해 만들어진 이름, CSS 셀렉터와 필터의 조합을 통해 요소에 접근 할 수 있습니다. 더 상세한 내용은 공식사이트에서도 확인하실 수 있습니다. Selector Example Selects [attribute] $("[attr]") attr 속성(attribute)값을 가지는 Selector 요소와 일치 [attribute=value] $("[attr='value']") attr 속성의 값이 value 와 동일한 값이 Selector 요소와 일치 [attribute!=value] $("[attr!='value']") attr 속성의 값이 value 와 같지 않.. 2019. 8. 19.
[ jquery 기초 ] jquery 셀렉터 - 기본 | 팩토리함수 '$()' 함수는 괄호안에 CSS선택자를 정의해 반환합니다. 하나의 함수로 여러가지의 종류의 객체를 생성할 수 있는 팩토리함수 입니다. 'jQuery()' 함수는 동일한 기능을 하며 타 언어에서 $의 중복을 피하기 위해 지원합니다. | jQuery 셀렉터 기본적으로 jQuery의 선택자는 CSS의 태그 선택자와 비슷합니다. 앞서 CSS 선택자를 하신 분들이라면 더욱 쉽게 이해하실수 있을꺼라 생각됩니다. 더 상세한 셀렉터의 사용 방법은 공식사이트에서도 확인하실 수 있습니다. Selector Example Selects * $("*") All elements #id $("#lastname") The element with id="lastname" .class $(".intro") All ele.. 2019. 8. 18.
[ jquery 기초 ] jquery란? | 기본 이해 jquery는 2006년 "John Resic"에 의해 디자인된 자바스크립트 라이브러리이다. 자바스크립트의 코드를 단순하고 간결한 상태로 개발이 가능하며, 동일한 코드의 반복과 복잡하고 많은 코드로 개발되던 기존의 작업에 비해 여러 가지 효과나 이벤트를 간단한 함수의 호출만으로 쉽고 빠르게 개발이 가능하도록 도와줍니다. | jquery의 특징 1) CSS 셀렉터 - html 문서의 구조를 명료하면서도 읽기 쉬운 형태로 표현 및 사용 가능 2) 플러그인 아키텍처 - 중복되는 기능과 코드가 엉키는 등의 오류를 피하고 산출물의 공유가 가능하며, 이미 많이 개발되어 공유되어 있는 플러그인들을 쉽고 빠르게 이용 가능 3) 메서드 체인 - 여러 개의 동장(기능)을 한 줄에 나열하여 임시 변수의 사용을.. 2019. 8. 17.
양도 맛도 가격까지, 인천 짜장면 맛집 - 복생원 최근 짜장면이 너무 먹고 싶었는데친구의 추천으로 알게된맛도 양도 가격도 너무나도 착한한 중국집을 소개받고 다녀왔습니다. 중국집의 이름은#복생원#옥련동복생원 주소 : 인천 연수구 비류대로 156 (옥련동 116-47)연락처 : 032-834-3455영업시간 : 매일 11:00 ~ 21:00주차 2~3대 가능 도착을 해서 본 매장의 모습입니다입간판에도 뙇! 짜장면 1,500원!?맙소사, 친구한테 듣고 가긴했지만 정말 가격 너무 착한거 아닙니까?이외에 짬뽕 2,500원, 탕수육 5,000원몰랐는데 방송에도 여러번 나왔던 집이더라고요. 매장안에 들어갔는데 깜짝 놀랐네요;;어마무시한 인파가 안에 서서도 계시고,앉아서 식사하시는 분들도 계시고~ 가격이 저렴하다보니남녀노소 부담없이 식사하러 오시는분들이많은것 같더라고.. 2019. 2. 20.
[ CSS 응용 ] DIV 중앙정렬 방법 총정리 | 개요 사이트를 디자인 하다보면 여러가지 정렬방식들이 기초적인 text-align속성과 position속성으로 정렬을 할 수 있다고 설명을 해드린적이 있습니다. 그렇다면 이번엔 조금 더 들어가 Div객체를 화면에 중앙에 정렬할 수 있는 부분을 살펴 보겠습니다. 여러가지의 방법들을 모두 정리하면 좋겠지만 많이 쓰여지는 방법을 정리해보도록 하겠습니다. | 예제 1. position:absolute와 margin값을 이용한 중앙정렬 이 내용의 장점이라함은 모든 브라우저상에서 표현이 가능합니다. 단, 고정적인 width값과 height값이 있어야지만 가능한 상태입니다. (IE7 이상) HTML부분 box 위와 같이 "container"라는 div 안에서 "div_box"라는 div를 중앙정렬 하기 위해 먼저 .. 2018. 11. 14.
반응형

티스토리툴바