일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- greedy
- leetcode
- github
- Algorithm
- 변수
- Python
- 컴포넌트
- dynamic programming
- 프로그래머스
- computed
- math
- HTML
- array
- SasS
- hash table
- 파이썬
- JS
- JavaScript
- JavaSceipt
- vue.js
- 자료구조
- CSS
- scss
- string
- 알고리즘
- sorting
- 백준
- java
- 코딩테스트
- 자료형
- Today
- Total
목록vue.js (18)
Posis
이번 포스트에서는 Vue.js에 조건부 렌더링, v-if와 v-show에 대해서 알아보겠습니다. v-if v-if 디렉티브는 조건에 따라 블록을 렌더링 할 때 사용합니다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링 됩니다. Click Hello Vue.js!! isShow는 true이고 Click 버튼을 클릭하면 true와 false가 매번 바뀌는 예제입니다. 첫 화면에는 isShow가 true이기 때문에 DOM에 나왔고 클릭 후에는 h1태그가 으로 변환됩니다. v-else v-if에서 조건이 맞지 않는다면 v-else가 있는 태그가 DOM에 표시됩니다. Click Hello Vue.js!! Goodbye Vue.js!! // 생략 isShow가 true일 때 'Hello Vue.js!..
이번 포스팅에서는 간단하게 v-bind와 v-on의 약어를 소개하겠습니다. v-bind v-bind는 데이터를 바인딩시킬 때 사용합니다. Hello Vue.js!! 위와 같이 fontColor의 데이터를 바인딩할 때 사용합니다. 하지만 매번 v-bind를 작성하면 개발 속도가 늦춰질 수 있기 때문에 다음과 같은 약어를 제공합니다. Hello Vue.js!! // 생략 속성 앞에 콜론(:)만 붙여주면 사용가능합니다. v-bind는 다양한 곳에 사용할 수 있습니다. class, href 등등 v-on v-on은 메소드내에 이벤트를 바인딩 시길 때 사용합니다. {{ msg }} 이번에는 add라는 메서드를 바인딩했습니다. 이도 위와 같이 약어를 사용해 보겠습니다. {{ msg }} // 생략 속성 앞에 골뱅이..
클래스와 스타일 바인딩 데이터 바인딩의 일반적인 요구사항은 엘리먼트의 클래스 목록과 인라인 스타일을 조작하는 것입니다. 클래스와 스타일 모두 속성이므로, v-bind를 사용하여 처리할 수 있습니다. 사용방법 Hello Vue.js!(isActive = {{ isActive }}) Hello Vue.js!(isActive = {{ isActive }}) class를 사용해 style을 넣을 때 보통은 class = 'style'의 형식으로 작성합니다. Vue.js에서는 v-bind:class(약어 -> :class)를 활용해서 객체를 전달하여 클래스를 동적으로 전환할 수 있습니다. 위 코드는 active 클래스는 isActive의 진실성에 의해 결정되는 구문입니다. isActive의 값이 처음에는 fals..
이번 포스팅에서는 computed에 대해서 알아보겠습니다. computed 연결된 data의 값이 변경되었을 때, 복잡한 계산식을 계산해서 값을 캐싱해서 return 해주는 속성입니다. 캐싱 값을 계산하여 잠시 동안 저장해두는 것을 의미합니다. {{ msg }} 문자열 뒤집기 {{ reverseString }} 위 예제 코드는 'Hello Vue.js!!' 문자열을 뒤집어주는 코드입니다. 함수를 살펴보면 reverseString()은 msg의 문자열을 뒤집어주는 역할, changeMsg()는 isDone의 boolean값을 바꿔주기만 한다. 예제 코드를 실행하면 나오는 첫 화면입니다. 여기서 문자열 뒤집기 버튼을 클릭하면 'Hello Vue.js!!'가 뒤집어진 문자열이 화면에 나타나게 됩니다. 이때 콘..
라이프사이클이란? 모바일 앱을 비롯하여 일반적으로 애플리케이션이 가지는 생명주기를 말합니다. beforeCreate 인스턴스가 초기화된 직후, 데이터 관찰 및 이벤트/감시자(watcher) 설정 전에 동기적으로 호출됩니다. 즉 data 속성과 methods 속성이 아직 인스턴스에 정의되어 있지 않기 때문에 화면 요소에 접근할 수 없는 상태입니다. created beforeCreate 라이프 사이클 단계 다음에 실행됩니다. 인스턴스가 생성된 후 동기적으로 호출됩니다. 이 단계에서 인스턴스는 data, computed, methods 등 정의되기 때문에 정의된 값에 접근하여 로직을 실행할 수 있습니다. 단, 화면 요소에 부착되기 전이기 때문에 DOM 요소에는 접근할 수 없습니다. beforeMount cra..
Vue.js는 무엇일까? Vue.js는 프런트엔드 개발자들이 사용하는 프레임워크 중 한 개입니다. 프런트엔드 대표적인 프레임워크 React, Vue, Angular가 있습니다. Vue.js는 AngularJS를 사용하여 구글에서 작업하던 Evan You에 의해 개발되었습니다. Evan You는 Angular를 이해하기 위해서 방대한 프레임워크 구조를 이해해야 하는 것에 큰 부담을 느끼고 '좋았던 부분을 뽑아낸 다음 추가적인 모든 개념을 동반하지 않고 무언가를 가볍게 만들어보면 어떨까?'라는 생각으로 새롭게 만들어낸 프레임워크가 Vue.js입니다. 그렇게 Vue.js는 2014년 2월에 처음으로 공식 배포되었습니다. 2017년에는 JQuery와 Angular 1.x를 앞지르고 최근에는 Vue.js는 리액트..