jiwoolee.space

해당 게시글은 Vuejs Tutorial을 리뷰한 내용입니다. 더보기 Vuejs Tutorial 리뷰 https://vuejs.org/v2/guide/syntax.html v-if v-if 디렉티브는 조건에 따라 블록을 렌더링할 때 사용함 v-else와 함께 “else 블록”을 추가하는 것도 가능함 ** 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링됨 v-if는 디렉티브기 때문에 하나의 엘리먼트에 추가해야 한다 하나 이상의 엘리먼트를 트랜지션하려면? => 보이지 않는 래퍼 역할을 하는 엘리먼트에 v-if를 사용 => 최종 렌더링 결과에는 엘리먼트가 포함되지 않는다 예시로 template에 v-if를 가지는 조건부 그룹을 만들어보자 v-if로 조건부 그룹 만들기 오늘 점심은 보리밥이었다 아주..

해당 게시글은 Vuejs Tutorial을 리뷰한 내용입니다. 더보기 Vuejs Tutorial 리뷰 https://vuejs.org/v2/guide/syntax.html 지난 게시글에 이어서 3. 인라인 스타일 바인딩 v-bind:style을 사용해서 인라인 스타일을 적용 할 수 있다. :style에 객체나 배열을 넘겨서 사용할 수 있다. 객체 구문 v-bind:style 객체 구문 객체 구문은 종종 객체를 반환하는 계산된 속성과 함께 사용 속성 이름에 아래 케이스를 사용할 수 있는데, 따옴표를 함께 사용해야 한다 CamelCase (합성어의 첫 글자만 대문자 표기) kebab-case (모두 소문자로 표현, 단어와 단어 사이를 대시(-)를 이용) 여러 케이스 종류 더보기 Camel case, Keba..

해당 게시글은 Vuejs Tutorial을 리뷰한 내용입니다. 더보기 Vuejs Tutorial 리뷰 https://vuejs.org/v2/guide/syntax.html Template Syntax — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org 데이터 바인딩은 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해 주로 사용 ⇒ 두 속성은 v-bind로 처리 가능 ⇒ 우리는 표현식으로 최종 문자열을 계산하면 됨 ⇒ 문자열을 연결할 때 오류가 종종왕왕 발생함 ⇒⇒ Vue는 class와 style에 v-bind를 사용할 때 특별히 향상된 기능 제공함 ⇒⇒ 표현식은 문자열 이외에 객체 or 배열 이용 가능 1. Binding HTML cl..

해당 게시글은 Vuejs Tutorial을 리뷰한 내용입니다. 더보기 Vuejs Tutorial 리뷰 https://vuejs.org/v2/guide/syntax.html Template Syntax — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org computed - watch 템플릿 내에 표현식을 넣으면 편리한데, 간단한 연산일 때만 이용하는 것이 좋음 너무 많은 연산을 템플릿 안에서 하면 코드가 너무 길어지고 , 유지보수가 어려움 그러니까, 복잡한 로직을 사용한다면 computed 속성을 사용해야 1. computed 속성 기본예제 예를 들어, 원본 메시지: "{{ message }}" 역순으로 표시한 메시지: "{{ reversed..

해당 게시글은 Vuejs Tutorial을 리뷰한 내용입니다. 더보기 Vuejs Tutorial 리뷰 https://vuejs.org/v2/guide/syntax.html Template Syntax — Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org 1. 보간법 문자열 데이터 바인딩의 기본 형태는 Mustache구문임 = 이중 중괄호 {{ }}를 사용한 텍스트 보간임 이렇게 메시지: {{ msg }} Mustache 태그는 해당 데이터 객체의 msg 속성 값으로 대체됨 데이터 객체의 msg 속성이 변경될 때 마다 갱신됨 매번 갱신되는 게 싫으면 v-once 이용해서 업데이트 안되는 일회성 보간을 할 수 있음 근데 같은 노드의 바인딩에도 영..

ctx.params / ctx.reqeust.body / ctx.response.status / ... ctx 관련하여 http ctx 메소드 확인 ctx.params ctx.params // URL params, :name ctx.request.body ctx.request.body // POST params ctx.query ctx.query //ctx.request.query 대신 ctx.query로 가능 - koa // URL params, ?name=jw ctx.response.status ctx.response.status //숫자 코드로 응답 상태 설정 숫자별 상태 의미 더보기 100 "continue" 101 "switching protocols" 102 "processing" 200 "o..

내가 사용하는 axios의 경우, promise 기반의 javascript 비동기 처리 방식을 사용한다 => 요청 후 .then()으로 결과값을 받아야 처리해야 한다 예를 들면, axios.get('/api/example').then(res => { console.log(res.data) }) // api/example에서 데이터 불러오고 // .then()의 res에 불러온 데이터를 담아 처리 axios는 여러 방법으로 서버와 통신할 수 있다 get get: 서버로부터 데이터를 가져올 때 사용 axios.get('/api/example').then(res => { console.log(res.data) }) // api/example에서 데이터 불러오고 // .then()의 res에 불러온 데이터를 담..

Vuejs 정리를 곧 올리겠지만 지금 사용하는 v-model 먼저 업로드 v-model 속성은 Vuejs로 form 요소를 개발할 때 사용한다 ** form 예시 어떤 내용을 submit하도록 할 건지 v-model을 통해 value를 대응시켜 js에서 동작하도록 할 수 있다 ** post를 해야 한다고 했다. post와 get의 차이점에 대해서는 아래 게시글에서 확인하자 https://jiwoolee-space.tistory.com/50 우선, 공식문서에 따르면 v-model을 사용해서 form input과 textarea element에 양방향 데이터 바인딩을 생성할 수 있다고 한다. v-model을 사용하면 input 유형에 따라 element를 업데이트 하는 올바른 방법을 자동으로 선택할 수 있다..