테라시아의 웹개발일기

Component(advanced)     Component는 상위-하위의 개념을 갖는다.     데이터 이동이 자유롭기 때문에 코딩이 쉬운 반면,     오류 발생 시 원인을 찾기가 매우 힘듬     => 규칙을 세우게 됨        데이터의 흐름은 상위 -> 하위 => props        하위에서 상위로 데이터 전송을 하려면? -> 이벤트 사용 ☆ Code Component Advanced

Axios     Vue에서 권장하는 Http 통신 라이브러리     Vue-router와 마찬가지로 설치 또는 CDN을 통해 사용 가능          axios를 활용하여 user-list를 화면에 구현     json 데이터 제공 사이트 : https://jsonplaceholder.typicode.com/users/ ☆ Code Axios Users 데이터 가져오기 {{ users }} --> {{ user.address }} {{ user.name }} ..

1. Vue Router     Vue.js 라이브러리를 사용하여 싱글 페이지 어플리케이션(SPA)     Vue Router를 사용하면 Vue로 만든 페이지 간 자유로운 이동 가능     Vue Router 사용 방법     1) npm install vue-router     2)      Vue Router 구현                  url이 변경됨에 따라 해당 컴포넌트 display         이동표시글자         페이지 이동 태그, 화면에서는 태그의 역할         to는 a 태그의 href의 역할 수행 ☆ Code Router Test Page 로그인하지마 궁금해하지마

☆ Code Celsius vs. Fahrenheit 섭씨 = 화씨

form 요소 활용하기     form 요소와 데이터 간의 연결은 v-model로 양방향 바인딩     text, 는 value 속성, input 이벤트     checkbox, radio는 checked 속성, change 이벤트     select는 value를 속성으로, change 이벤트 ☆ Code Form Component 입력된 메시지 : {{ message }} 입력된 여러 줄의 메시지 {{ message2 }} {{ checked? '클릭함':'해제함' }} 여러분이 좋아하는 아티스트를 모두 고르시오. Pica..

class 속성 변경하기     class 속성의 특징 : 여러 개의 클래스를 중복해서 적용 가능     v-bind:class={ 클래스명: 값, 클래스명2: 값2 } ☆ Code Title One Test String 빨간글자   굵은글자   큰글자   3? true:false }">Test String2 I am a student

methods, computed, watch     methods : 실행할 때마다 실행되는 함수 모음     computed : 변수의 값이 변하지 않으면 다시 실행하지 않고                caching된 값을 그대로 리턴     watch : 특정한 변수의 값이 변경되는지 모니터링 ☆ Code Watch를 통한 무슨 질문이든 받기 Yes/No로 대답할 수 있는 질문을 해보십시오. {{ answer }}

Component     코드 재사용을 위해 각 단위를 독립적으로 구성하는 것     생성 방법         Vue.component('컴포넌트명', 내용)         Vue.component('todo-item', {             template: '오늘의 할 일'         });                                ☆ Code Vue.js Components

v-model : 양식에 대한 입력 과 앱 상태를 양방향으로 바인딩 ☆ Code Vue.js v-model {{ myMessage }} {{ 1 + 3 }} {{ 5 > 3? 'a':'b' }} {{ myMessage + "입니다"}} {{ yourMessage }} {{ yourMessage2 }} {{ yourMessage3 }} Apple

1. Vue.js 기초 문법 (1) {{ }} - Mustache     뷰 인스턴스의 데이터를      html 태그에 연결하는 텍스트 삽입 방식 (2) Directives     Vue에서 제공하는 특수 속성임을 나타내는 v- 접두어로 시작     DOM에 특수한 반응형 동작 실행     1) v-bind                  로 약어 사용이 가능         기본적으로 이 요소의 title 속성을         Vue 인스턴스의 message 속성과 연결     2) v-if         조건값이 true일 때 해당 태그가 유효함     3) v-for         특정한 행동을 반복 수행하고 싶은 경우 사용     4) v-on                  로 약어 사용이 가능  ..