본문 바로가기

frontend5

Vue.js 강의 - codesandbox 로 Vue SFC 환경 맛보기 codesandbox 로 Vue SFC 환경 맛보기 https://codesandbox.io CodeSandbox: Online IDE for Rapid Web Development CodeSandbox is an online code editor and prototyping tool that makes creating and sharing web apps faster codesandbox.io Create a Sandbox, it's free Vue main.js render - https://kr.vuejs.org/v2/guide/render-function.html // very short - es6 arrow function render: h => h (App) // short render: fu.. 2020. 5. 13.
Vue.js 강의 - v-for 와 컴포넌트 v-for 와 컴포넌트 https://kr.vuejs.org/v2/guide/list.html#v-for-와-컴포넌트 v-for를 컴포넌트에 직접 사용할 수 있습니다. Vue.component('todo-item', { props: ['text', 'isComplete'], template: '{{ text }}, {{ isComplete }}' }) new Vue({ el: '#app', data: { todos: [ { id: 1, text: 'Learn Vue', isComplete: false }, { id: 2, text: 'Take out the trash', isComplete: false }, { id: 3, text: 'Mow the law', isComplete: false } ] } .. 2020. 5. 13.
Vue.js 강의 - Component Basic Component Basic https://kr.vuejs.org/v2/guide/components.html 컴포넌트는 무엇인가요? 컴포넌트는 Vue의 가장 강력한 기능 중 하나입니다. 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트입니다. 컴포넌트 사용하기 # 전역 등록 Vue.component('my-component', { // 옵션 template: '사용자 정의 컴포넌트 입니다!' }) // 루트 인스턴스 생성 new Vue({ el: '#app' }) # 지역 등록 컴포넌트를 components 인스턴스 옵션으로 등록함으로써 상위 템플릿에서만 사용할 수 있는 컴포넌트를 .. 2020. 5. 12.
Vue.js 강의 - 반복문 - 리스트 렌더링 반복문 - 리스트 렌더링 https://kr.vuejs.org/v2/guide/list.html v-for로 엘리먼트에 배열 매핑하기 v-for 디렉티브를 사용하여 배열을 기반으로 리스트를 렌더링 할 수 있습니다. v-for 디렉티브는 item in items 형태로 특별한 문법이 필요합니다. 여기서 items는 원본 데이터 배열이고 item은 반복되는 배열 엘리먼트의 별칭 입니다. #기본 사용방법 {{ item.message }} var vm = new Vue({ el: '#app', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) v-for 블록 안에는 부모 범위 속성에 대한 모든 권한이 있습니다. v-for는 또한 현재 항목의 인덱스에.. 2020. 5. 11.
Vue.js 강의 - 폼 입력 바인딩 폼 입력 바인딩 https://kr.vuejs.org/v2/guide/forms.html 기본 사용법 v-model 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있습니다. # input 메시지: {{ message }} new Vue({ el: '#app', data: { message: '안녕하세요!' } }) # textarea 여러 줄을 가지는 메시지: {{ message }} # checkbox v-model은 모든 form 엘리먼트의 초기 value와 checked 그리고 selected 속성을 무시합니다. 항상 Vue 인스턴스 데이터를 원본 소스로 취급합니다. 컴포넌트의 data 옵션 안에 있는 JavaScript에서 초기값을 선언해야합니다... 2020. 5. 11.