먼저 Vue.js에 대해 전반적으로 살펴보자

우선 Vue.js를 사용하기 위해서는 아래 코드를 html문서에 삽입해주면 끝!

<script src="https://unpkg.com/vue"></script>

Vue.js의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링 하는것!

//HTML
<div id="app">
  {{ message }}
</div>
//JavaScript
var app = new Vue({
  el: '#app',
  data: {
    message: '안녕하세요 Vue!'
  }
})

코드를 하나씩 살펴보면서 이해를 도와보자
{{ }} 는 데이터의 내용이 렌더링 되어 HTML 문서에 표현되기 위해 작성해주며
el은 element의 약자로 HTML 엘리먼트를 선택해주고
data 안에는 HTML문서의 {{ }}안에 작성된 변수(message)를 정의해 이를 HTML에 렌더링 시켜주며
이는 콘솔창에서 app.message = “”로 변경이 가능

이것이 가장 기초적인 Vue.js의 문법이며 앞으로 엄청 많은것들을 익힐 예정임!


자료 참고는 Vue.js 2.0 공식사이트 [https://kr.vuejs.org] 이며
공식 사이트 문서를 토대로 정리를 할 것이고,
혹시 이 글을 보시면서 정보가 부족하다 느끼시는 분들은 공식 사이트에서 해답을 얻으시면 좋을 것 같습니다.

'개발 > Vue.js' 카테고리의 다른 글

5. 클래스와 스타일 바인딩(Class and Style Bindings)  (0) 2017.03.29
4. 계산된 속성과 감시자  (0) 2017.03.28
3. Vue 템플릿 문법  (0) 2017.03.27
2. Vue 인스턴스  (0) 2017.03.23
1. Vue.js 시작하기  (0) 2017.03.23
0. Vue.js 포스팅  (0) 2017.03.23

오늘부터 꾸준히 Vue.js에 대해서 포스팅하면서 공부해 보려고 한다

Angular2, React, Vue 세가지 중 가장 끌렸던게 Vue.js였기 때문에

그냥 읽는 것만으로는 이해에 한계가 있어 직접 남기면서 익혀보려 함.


공식 홈페이지 문서는 다음과 같다  https://kr.vuejs.org/ 

영어를 잘하시는분들이 번역을 전부 해놔서 영어를 못하는 나도 한글로 읽을수 있다!


깃헙의 통계자료인데 보시다시피 'Vue.js 2.0'을 선보이고 나서 사람들의 관심이 대폭 상승했음을 보여주는 자료인 것 같다



사실 그냥 재밌어보여서 시작하는 것..

말을 잘 못해서 길게 쓸 말이 떠오르진 않고 Vue.js 중간에 안놓고 끝까지 할 수 있도록 해야겠다 !

보기쉽게 쓰기보다 공부한 내용을 혼자 정리하는 느낌이라 혹시라도 보시는 분들은 불편하실수도 있을 것 같지만

최대한 깔끔하게 정리해보려 함!

'개발 > Vue.js' 카테고리의 다른 글

5. 클래스와 스타일 바인딩(Class and Style Bindings)  (0) 2017.03.29
4. 계산된 속성과 감시자  (0) 2017.03.28
3. Vue 템플릿 문법  (0) 2017.03.27
2. Vue 인스턴스  (0) 2017.03.23
1. Vue.js 시작하기  (0) 2017.03.23
0. Vue.js 포스팅  (0) 2017.03.23

https://takeu.tistory.com/72

'개발 > 기타' 카테고리의 다른 글

Coin Push 프로젝트  (0) 2018.01.29
티스토리 블로그 폰트 바꾸기  (5) 2017.10.14
[git]Git 간편 사용 설명서  (1) 2017.05.27
Git, Github 10분만에 익히기  (0) 2017.04.25
"데일리후보" 단기 프로젝트 완성  (0) 2017.04.17
HTML,CSS용 VIM(8.0)세팅하기  (0) 2017.02.21

jQuery 효과


작성방법 $("선택자").click(function(){ $("선택자").메소드;});

콜백함수는 앞의 함수가 끝나면 실행


jQuery 효과(effects)


숨기기 hide(speed, callback)

보여주기 show(speed, callback)

토글 toggle()


페이드인 fadeIn(speed,callback)

페이드아웃 fadeOut(speed,callback)

페이드토글 fadeToggle(speed,callback)

페이드투 fadeTo("slow", 0.7) 0.7은 투명도를 나타냄

속도는 "slow","1000" 등으로 표현


슬라이드다운 slideDown(speed,callback)

슬라이드업 slideUp(speed,callback)

슬라이드토글 slideToggle(speed,callback)


애니메이션 animate{( left: '250px', opacity:'0.5' height:'150px' width: '150px'}) 절대값

height: '+=150px' width: '+=150px'  상대값

height: 'toggle' 지정된 값 사용

애니메이션을 연속적으로 처리하는 큐기능


정지 stop(stopAll, goToEnd) 삭제여부지정

stopAll,goToEnd 둘다 기본값은 false


메소드 체인

연속으로 메소드를 쓰는

줄바꿈 가능


jQuery HTML


DOM = Document Object Model

HTML 및 XML 문서에 엑세스하기위한 표준 정의

text() html() val() 로 표현가능

attr(속성값, 변경)  속성값 가져올 때 사용


Element추가

append() html 끝부분에 내용 삽입

prepend() html  앞부분에 내용 삽입

after() 요소 뒤에 내용 삽입

before() 요소 전에 내용 삽입


remove() 선택된 요소 전체 삭제

empty() 선택된 요소의 자식요소 삭제


jQuery CSS

addClass() 다른 요소에 클래스 속성 추가 ex).addClass("important blue")

removeClass() 다른 요소에 클래스 속성 제거 ex).removeClass("blue important")

toggleClass() 클래스 속성 추가/제거 전환


css("background-color") 배경 색 반환

css("propertyname", "value") css속성 설정

css({"propertyname": "value", "propertyname": "value"}) 여러개의 css속성 설정

width() 폭 반환 / height() 높이 반환, 변경은 ()안에 변경값 입력

innerWidth() 패딩 포함 폭 반환 / innerHeight() 패딩 포함 높이 반환

outerWidth() 패딩,테두리 포함 폭 반환 / outerHeight() 패딩,테두리 포함 높이 반환(true)입력해야함


jQuery Traversing


parent() 선택 요소의 직접적인 부모 요소 반환 ex)$("span").parent

parents() 루트 요소까지 선택된 요소의 모든 상위 요소 반환 ex)$("span").parents("ul") span의 부모요소중 ul 반환

parentsUntil() 주어진 두 인자 사이의 모든 상위 요소 반환 ex)$("span").parentsUntil("div")


children() 선택 요소의 자식 요소 반환

find() find안의 요소 반환 ( "*" 입력시 모든 자식 요소 반환)


siblings() 형제 요소 반환 ex)$("h2").siblings("p") h2의 형제 요소중 <p>반환

next() 선택 요소 다음 형제 요소 반환 (<=>prev())

nextAll() 선택 요소 다음 형제 모두 반환 (<=>prevAll())

nextUntil() 선택요소 사이의 요소 모두 반환 (<=>prevUntil())


first() 첫 번째 요소 선택

last() 마지막 요소 선택

eq(1) 인덱스 번호 선택

not(".intro") intro 제외하고 선택


jQuery AJAX 

load() 

syntax: $(selector).load(URL,data,callback);


다른 프레임워크와 혼용시 $대신 jQuery작성

$.noConflict() 작성 뒤 사용

변수에 담을 수 있음 ex)var jq= $.noConflict()





https://takeu.tistory.com/28

https://takeu.tistory.com/32

+ Recent posts