Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Vuejs 시작하기

2.370 visualizaciones

Publicado el

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

Publicado en: Software
  • Sé el primero en comentar

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

×