vue.js 무료 강좌9 [Hoon] Vuejs 강의 - Markdown Editor 개발 Vue Example - Markdown Editor 개발 vue.js Example 원본 -> https://github.com/vuejs/vue/tree/dev/examples/markdown [ 설치 ] 또는: JSFiddle - https://jsfiddle.net/ JSFiddle 에 바로 적용해 분석해 보기 [html] [css] html, body, #editor { margin: 0; height: 100%; font-family: 'Helvetica Neue', Arial, sans-serif; color: #333; } textarea, #editor div { display: inline-block; width: 49%; height: 100%; vertical-align: top; .. 2020. 5. 29. [Hoon] Vuejs 강의 - 이벤트 핸들링 이벤트 핸들링 https://kr.vuejs.org/v2/guide/events.html 이벤트 청취 v-on 디렉티브를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있습니다. Add 1 클릭한 횟수는 {{ counter }} 번 new Vue({ el: '#app', data: { counter: 0 } }) 메소드 이벤트 핸들러 Greet var vm = new Vue({ el: '#app', data: { name: 'Vue.js' }, methods: { greet: function (event) { alert('Hello ' + this.name + '!') // `event` 는 네이티브 DOM 이벤트입니다 if (event) { alert(event.targe.. 2020. 5. 11. [Hoon] Vuejs 강의 - computed 와 watch computed 와 watch https://kr.vuejs.org/v2/guide/computed.html 이번 시간에는 Vue 의 강력한 속성인 computed 와 watch 에 대해서 알아보도록 하겠습니다. 앞에서 Vue 가 angularjs 비해서 훨씬 빠르고, react 보다 조금 더 빠르다고 비교를 했었는데요. 이 computed 와 watch 를 잘 활용해야지만 그러한 결과를 만들 수 있습니다. 1. computed 속성 앞에서 본 템플릿 내에 표현식을 넣는 방식은 편리하지만, 간단한 연산일 때만 이용하는 것이 좋습니다. 너무 많은 연산을 템플릿 안에서 하면 코드가 비대해지고 유지보수가 어렵습니다. 그래서 Vue 는 computed 라는 속성을 제공합니다. {{ message.split(''.. 2020. 5. 8. [Hoon] Vuejs 강의 - 조건부 렌더링 조건부 렌더링 https://kr.vuejs.org/v2/guide/conditional.html v-if Vue에서는 v-if 디렉티브를 사용 Yes new Vue({ el:'#app', data: { ok: true } }) v-else Yes No #template 에 v-if을 갖는 조건부 그룹 만들기 v-if는 디렉티브기 때문에 하나의 엘리먼트에 추가해야합니다 Title Paragraph 1 Paragraph 2 #v-else v-else 디렉티브를 사용하여 v-if에 “else 블록” 이제 나를 볼 수 있어요 이제는 안보입니다 v-else 엘리먼트는 v-if 엘리먼트 또는 v-else-if 엘리먼트 바로 뒤에 있어야 합니다. 그렇지 않으면 인식할 수 없습니다. #v-else-if v-else-.. 2020. 5. 8. [Hoon] Vuejs 강의 - 클래스와 스타일 바인딩 클래스와 스타일 바인딩 https://kr.vuejs.org/v2/guide/class-and-style.html Vue는 class와 style에 v-bind를 사용할 때 특별히 향상된 기능을 제공합니다. 표현식은 문자열 이외에 객체 또는 배열을 이용할 수 있습니다. HTML 클래스 바인딩하기 # 객체 구문 클래스를 동적으로 토글하기 위해 v-bind:class에 객체를 전달할 수 있습니다. 1 new Vue({ el:'#app', data: { isActive: true } }) 객체에 필드가 더 있으면 여러 클래스를 토글 할 수 있습니다. 또한v-bind:class 디렉티브는 일반 class 속성과 공존할 수 있습니다. 2 new Vue({ el:'#app', data: { isActive: tru.. 2020. 5. 7. [Hoon] Vuejs 강의 - Vue Lifecycle Hooks Vue Lifecycle Hooks https://kr.vuejs.org/v2/guide/instance.html#인스턴스-라이프사이클-훅 https://vuejs.org/images/lifecycle.png 각 Vue 인스턴스는 생성될 때 일련의 초기화 단계를 거칩니다. 데이터 관찰 설정이 필요한 경우 템플릿을 컴파일하는 경우 인스턴스 DOM 에 마운트 하는 경우 데이터가 변경되어 DOM 을 업데이트하는 경우 그 과정에서 사용자 정의 로직을 실행할 수있는 라이프사이클 훅 도 호출 https://kr.vuejs.org/v2/guide/instance.html#라이프사이클-다이어그램 beforeCreate created {{ a }} new Vue({ el: '#app', data: { a: 1 }, be.. 2020. 5. 6. [Hoon] Vuejs 강의 - Vue Instance Vue Instance https://kr.vuejs.org/v2/guide/instance.html 모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작합니댜. new Vue 가 바로 Vue Instance 입니다. var vm = new Vue({ // 옵션 }) 엄격히 MVVM 패턴과 관련이 없지만 Vue의 디자인은 부분적으로 그것에 영감을 받았습니다. Vue 인스턴스를 참조하기 위해 종종 변수 vm(ViewModel의 약자)을 사용합니다. https://ko.wikipedia.org/wiki/모델-뷰-뷰모델 Vue Instance 는 MVVM(model–view–viewmodel, MVVM) 패턴 의 ViewModel 역활 이다. 속성과 메소드 https://kr.vuejs.o.. 2020. 5. 6. [Hoon] Vuejs 강의 - 조건문과 반복문 조건문과 반복문 https://kr.vuejs.org/v2/guide/index.html#조건문과-반복문 엘리먼트가 표시되는지에 대한 여부를 제어 이제 나를 볼 수 있어요 new Vue({ el: '#app', data: { seen: true } }) {{ todo.text }} new Vue({ el: '#app', data: { todos: [ { text: 'JavaScript 배우기' }, { text: 'Vue 배우기' }, { text: '무언가 멋진 것을 만들기' } ] } }) 버튼을 하나 추가하고, Todo 를 추가하는 메소드를 만들어서 확인해 봅시다. { text: 'New item' }를 추가힙니다. Todo 목록에 새 항목이 동적으로 추가 된것을 볼 수 있습니다. {{ todo.t.. 2020. 4. 13. [Hoon] Vuejs 강의 - SFC (Single File Components) 는 무엇인가? SFC (Single File Components) 는 무엇인가? Single File Components , SFC - .vue 확장자를 가진 싱글 파일 컴포넌트 싱글 파일 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 페이지내 Vue 선언 방식의 disadvantages(약점) ● Global definitions - 모든 컴포넌트에 대한 고유한 이름 필요 ● String templates - 구문 강조가 약함, 여러 줄로 된 HTML에 보기 안좋은 슬래시 ● No CSS support - CSS is conspicuously left out CSS 를 지원하지 않는 것이 아니라 CSS 가 눈에 띄게 모듈화 되지 않음 ● No build step .. 2020. 4. 13. 이전 1 다음
