본문 바로가기

Tech/Vue.js4

[Vue.js] 컴포넌트 기초 컴포넌트란? 컴포넌트는 하나의 블록을 의미한다. 컴포넌트를 활용하여 화면을 만들면 보다 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다. 화면의 영역을 컴포넌트로 분리함으로써 재사용 편리한 코드가 구조가 되는것이다. 쇼핑몰의 화면을 예를 들어보면, 화면의 header, footer, menu 등을 컴포넌트단위로 분리하여 어느 화면에서나 재사용 할 수 있고, 더 세부적으로 장바구니 버튼 같은 것들을 분리하여 재사용 할 수도 있다. 전역, 지역 컴포넌트 전역 컴포넌트 등록은 Vue.component(tagName, options)를 사용한다. 컴포넌트를 components 인스턴스 옵션으로 등록하여 다른 인스턴스/컴포넌트의 범위에서만 사용할 수있는 지역적인 컴포넌트를 만들 수도 있다. app.html E.. 2020. 7. 29.
[Vue.js] 이벤트 핸들링 v-on 디렉티브 inline 태그인 onclick과 같이 vue.js에서 v-on 디렉티브를 이용하여 이벤트를 캐치할 수 있다. v-on:이벤트 = @이벤트 와 같이 사용할 수 있다. app.html Add 1 위 버튼을 클릭한 횟수는 {{ counter }} 번 입니다. make Alert! app.js let example1 = new Vue({ el: '#example1' , data: { counter: 0 } }) let example2 = new Vue({ el: '#example2' , data: { message: 'hi!' } , methods: { makeAlert: function(e) { alert(this.message) } } }) example1처럼 html태그 안에 data.. 2020. 7. 28.
[Vue.js] 조건문, 반복문, 객체 데이터 추출 조건문 : v-if, v-else-if, v-else로 작성한다. v-if 조건에 해당하는 태그만 렌더링된다. app.html 값을 입력해 주세요. 1이상의 숫자를 입력해 주세요. 짝수입니다. 홀수입니다. app.js let app = new Vue({ el : '#oddneven', data : { number : '' } }) 결과화면 공백인경우, 0인경우, 짝수인경우를 분기하여 렌더링되도록 했다. 반복문 : v-for를 이용하여 배열의 각 원소들에 접근한다. app.html 짝수만 보기 홀수만 보기 {{oddneven}}만 보여용! app.js let app1 = new Vue({ el: '#app1', data: { oddneven : '짝수' , numbers : [1, 2, 3, 4, 5, 6.. 2020. 7. 22.
[Vue.js] Vue 인스턴스 생성. 데이터 입력과 출력 Vue 인스턴스 생성 : el : 태그이름, data : 화면에 보여질 데이터 - el : 뷰 인스턴스화 할 DOM 객체를 넣는다. - data : 연동할 데이터 객체를 넣는다. let model = { message: 'HELLO!' } //Vue 인스턴스 생성(뷰모델, 상태와 연산) let app = new Vue({ el: '#sample', data: model }); 데이터를 출력하는 세가지 방법 1. {{ }} : text를 그대로 출력한다. {{ message }} 2. v-text : 위의 {{ }}와 같다. 3. v-html : html을 파싱하여 출력한다. message에 html코드가 있을 시 파싱되어 출력된다. v-bind & v-model 1. v-bind : 단방향 바인딩. v-.. 2020. 7. 19.

티스토리툴바