Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Vuejs 시작하기

1,931 views

Published on

ABCD 의 4월 정기 세미나 자료입니다.

Published in: Software
  • Be the first to comment

Vuejs 시작하기

  1. 1. Vue.js 시작하기 ABCD / 한성일
  2. 2. Vue 소개 Vue(/vjuː/ ) View
  3. 3. Vue 장점 뷰 레이어에만 초점을 맞춰서 “빠르다. 심플하다. 편하다” https://kr.vuejs.org/v2/guide/comparison.html
  4. 4. 설정 <script src=“https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"> </script> 직접 <script>에 추가 # 최신 안정화 버전 $ npm install vue $ npm install --global vue-cli $ vue init webpack my-project $ cd my-project $ npm install $ npm run dev CLI 프로젝트 생성 (webpack) NPM # vue-cli 설치 # 프로젝트 생성 # 의존성 설치
  5. 5. Hello World var app = new Vue({ el: '#app', data: { message: 'Hello World!' } }) <div id="app"> {{ message }} </div> https://codepen.io/snowkiwi/pen/XRpRjz
  6. 6. Vue 인스턴스 https://kr.vuejs.org/images/lifecycle.png life Cycle https://codepen.io/snowkiwi/pen/mmrvvO var app = new Vue({ // … })
  7. 7. 템플릿 문법 https://codepen.io/snowkiwi/pen/NjRJVm var app2 = new Vue({ el: '#app-2', data: { seen: true, url: "http://abcds.kr", doSomething: function() { alert('doSomething'); } } }) <div id="app-2"> <p v-if="seen">이제 나를 볼 수 있어요</p> <a v-bind:href="url">abcds</a> <br/> <a v-on:click="doSomething">do</a> <br/> <!-- 수식어 --> <form v-on:submit.prevent="onSubmit"></form> </div>
  8. 8. 계산된 속성과 감시자 https://codepen.io/snowkiwi/pen/WjGqdY new Vue({ computed: { reversedMessage: function () { } } methods: { reverseMessage: function () { } } }) computed vs. methods computed : 캐싱 methods : 재 렌더링시 계속 호출
  9. 9. 계산된 속성과 감시자 https://codepen.io/snowkiwi/pen/WjGqdY new Vue({ data: { firstName: 'Foo', lastName: 'Bar', }, watch: { firstName: function (val) { }, lastName: function (val) { } } }) watch : 데이터 변경 감시
  10. 10. 클래스와 스타일 바인딩 https://codepen.io/snowkiwi/pen/EmNxBN new Vue({ el: '#app-3', data: { activeColor: 'red', fontSize: 30, styleObject: { color: 'red', fontSize: '13px' } } }) <div id="app-3"> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">객체구문1</div> <div v-bind:style="styleObject">객체구문2</div> <div v-bind:style="[activeColor, fontSize]">배열구문</div> </div>
  11. 11. 조건부 렌더링 https://codepen.io/snowkiwi/pen/JNbYzE <!-- v-if --> <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> <!-- v-else --> <div v-if="Math.random() > 0.5"> 이제 나를 볼 수 있어요 </div> <div v-else> 이제는 안보입니다 </div> <!-- v-else-if --> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div>
  12. 12. 리스트 렌더링 https://codepen.io/snowkiwi/pen/eWBZWr <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul> var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
  13. 13. 이벤트 핸들링 https://codepen.io/snowkiwi/pen/GmNjoX <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>위 버튼을 클릭한 횟수는 {{ counter }} 번 입니다.</p> </div> new Vue({ el: '#example-1', data: { counter: 0 } })
  14. 14. 폼 입력 바인딩 https://codepen.io/snowkiwi/pen/bWBwOd <div id="example-3"> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <br> <span>체크한 이름: {{ checkedNames }}</span> </div> new Vue({ el: '#example-3', data: { checkedNames: [] } })
  15. 15. 컴포넌트 https://codepen.io/snowkiwi/pen/BRQpPP Vue.component('my-component', { template: ‘<div>사용자정의..</div>’ }) new Vue({ el: '#example' }) <div id="example"> <my-component></my-component> </div> !! 사용자 정의 태그이름 : 모두 소문자이어야 하고 하이픈을 포함해야합니다
  16. 16. 컴포넌트 https://codepen.io/snowkiwi/pen/BRQpPP props는 아래로, events 위로
  17. 17. 컴포넌트 https://codepen.io/snowkiwi/pen/BRQpPP 상위 컴포넌트가 업데이트 될 때마다 하위 컴포넌트의 모든 props가 최신 값으로 갱신 하위 컴포넌트 내부에서 prop을 변형하려고 시도하면 안됨
  18. 18. 변경 내용을 추적하는 방법
  19. 19. 전환 효과 https://codepen.io/snowkiwi/pen/eWgReX
  20. 20. 트렌지션 상태 https://codepen.io/snowkiwi/pen/xdgrWb
  21. 21. 고급 렌더 함수 사용자 지정 디렉티브 믹스인 플러그인 단일 파일 컴포넌트 프로덕션 배포 팁 라우팅 상태 관리 단위 테스팅 서버사이드 렌더링 TypeScript 지원
  22. 22. 참고 #1 https://kr.vuejs.org/v2/guide/ 공식
  23. 23. 참고 #2 #1. 시작하기 : https://codepen.io/snowkiwi/pen/gWwqLP #2. 인스턴스 : https://codepen.io/snowkiwi/pen/mmrvvO #3. 템플릿 문법 : https://codepen.io/snowkiwi/pen/NjRJVm #4. 계산된 속성과 감시자 : https://codepen.io/snowkiwi/pen/WjGqdY #5. 클래스와 스타일 바인딩 : https://codepen.io/snowkiwi/pen/EmNxBN #6. 조건부 렌더링 : https://codepen.io/snowkiwi/pen/JNbYzE #7. 리스트 렌더링 : https://codepen.io/snowkiwi/pen/eWBZWr #8. 이벤트 핸들링 : https://codepen.io/snowkiwi/pen/GmNjoX #9. 폼입력 바인딩 : https://codepen.io/snowkiwi/pen/bWBwOd #10. 컴포넌트 : https://codepen.io/snowkiwi/pen/BRQpPP
  24. 24. 수고하셨습니다. :) abcds.kr

×