일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
- typescript
- react
- 객체
- this
- 함수
- ES6
- 투두리스트
- 뷰
- let
- 자바스크립트
- 스코프
- CSS
- js
- Interface
- 타입스크립트
- redux
- 라우터
- 모던
- null
- 리액트
- 데이터 타입
- VUE
- BIND
- todolist
- function
- 컴포넌트
- var
- const
- Number
- 모던 자바스크립트
- Today
- Total
목록Vue.js (14)
홍준혁
공식 뷰 사이트에서는 하위에서 상위로 데이터를 전달하는 것을 권장하지는 않는다. 왜냐하면 단방향 데이터 흐름에 어긋나는 구현 방법이기 때문이다. 그래도 배워보자 보면 상위에서 하위로 전달하는 데이터 전달 방식과는 조금 다른 모습을 볼 수 있다. 먼저 하위 컴포넌트에서 버튼이 클릭되면 v-on:click이라는 이벤트가 발생하는데 그 이벤트가 발생하면 showLog라는 함수를 실행하게 되어있다. 이때 showLog를 실행하면 emit이 실행이 되는데 그러면 div#app에서 이벤트가 발생한다. 그럼 emit 이벤트가 발생하였을때 실행하는 함수는 printText인데 그렇게 되면 received event가 출력되는 모습을 볼 수 있다. 처리되는 과정을 정리해보면 ... [show]버튼을 클릭하면 클릭이벤트 ..
서로 다른 컴포넌트 간의 데이터 전달하는 방법 중 상위-하위 컴포넌트 데이터 전달이 있다. 이때 상위 컴포넌트는 하위 컴포넌트에세 props라는 속성을 전달하게 되는데, 먼저 props속성을 사용할려면 Vue.component("child-component", { props: ["props"], }); 하위 컴포넌트에 이렇게 선언을 해주어야 한다. 그러면 상위(부모)에게서 전달되는 props를 전달받을 수 있다. 위의 코드를 해석하자면 먼저 상위 컴포넌트에서 v-bind:propsdata이라는 부분은 propsdata 즉 props의 속성 이름인데 이 컴포넌트에 message라는 값을 전달하겠다는 것이다. 그럼 하위 컴포넌트는 new Vue의 data의 message값을 전달받게 되었다 그럼 child-..
watch는 감시자라는 뜻이다. 특정 데이터를 감시하고 있다가 그 데이터가 변경이 일어났을때 watch속성이 자동으로 실행이 된다 아래의 코드를 보고 분석해보도록 하자 {{ message }} Click {{ update }} 위 코드를 하나하나 톺아보도록 하자 message data와 update data를 만들고 Vue인스턴스에 watch속성에 message를 만든다. 그럼 이때 message는 data에 있는 message를 감시하고 있다는 의미가 된다. 이떄 message를 지켜보고 있다가 변화됨을 감지하면 watch에 있는 message가 실행된다. 이때 message는 두가지 인자값을 받게 되는데 바뀐 값과 바뀌기 전의 값을 받게 된다. 그래서 console.log를 통해 그 값을 확인할 수 ..
Vue에서 간단히 연산을 하는 경우 {{ message.split('').reverse('').join('') }} 이렇게 {{ }}안에 많은 로직이 있으면 보기 흉하고 유지 보수하기 힘들어진다. ※ {{}}안에 내용은 자바스크립트코드가 들어갈 수 있다 그래서 나온것이 computed인데 computed를 쓰면 {{ reversedMessage }} 이렇게 함수화시켜서 간단히 표현할 수 있다. 하지만 여기서 의문점이 들것이다. methods에다가 함수를 선언하고 하면 결과는 다르지 않을 텐데 왜 굳이 computed에 정의를 했느냐 인데 이것은 computed속성의 특징때문인데. computed는 "미리 계산된"이라는 뜻이다. 처음에 한번 계산하고 또 한번 쓸 때 전에 계산된 값을 한번 더 사용하게 된다..
noonnu.cc/ 상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누 상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누 noonnu.cc 위 사이트를 보면 입력을 하면 다른 곳에 그 내용이 표시되는 기능이 구현되어 있다. 이번 시간에 폼 입력 바인딩을 배우고 나면 저런 기능을 구현할 수 있는 능력이 생길 것이다. {{ text }} 기능 구현에 앞서, input value에 text값을 넣어주고 밑에 text값을 넣어주고 input에 값이 바뀌면 실시간으로 text값이 바뀌는 방식이다. 이전 시간에 배운 키 이벤트를 사용해보면 쉽게 기능을 구현할 수 있다. keyup이라는 이벤트는 키보드가 누르고 올라갈 때를 의미하는데 이것을 사용해보겠다. {{ text }} 이런 식으로 하면 in..
이번에 배워볼 것은 이벤트를 배워 볼 것이다. 이벤트라는 것은 어떠한 동작이 수행되었을 때 그 동작 자체를 이벤트라고 생각하면 될 것이다. 즉 이벤트가 감지되었을 때 특정 동작을 수행해라.라고 이해하면 될 것이다. ADD SUB 현제 count의 값은 {{ count }} 간단한 이벤트를 사용한 예제이다. v-on:이라는 것을 사용했는데 기존에 HTML에서 onclick을 사용하면 JS코드가 실행이 되는 방식이었는데 Vue는 v-on:click이라는 문법을 사용해서 Vue에서 바인딩을 하는 방식을 사용한다. 그래서 ADD 위 코드를 보면 이 버튼에서 클릭이 감지되었을 시에 count += 1을 실행한다는 것이다. 이때 count의 값은 Vue에 선언되어있는 data에 count값을 의미한다. 하지만 위에..