본문 바로가기

전체 글

 (364)
Kossie Coder 09. v-if와 v-show 1/ v-if 1 2 3 Yes No Toggle 1 2 3 Hi No Increase {{ number }} 2/ v-show Yes Toggle v-if와 v-show의 차이점 v-if는 값이 false일 경우에는 아예 랜더링 x. But, v-show는 값이 false여도 랜더링o. 대신, display:none이다.
Kossie Coder 08. 클래스 & 스타일 바인딩 Hello Hello Hello Click 1. 클래스 바인딩하기 1/ 객체 구문 이 경우, active 클래스의 존재여부는 isActive의 true/false값에 의해 결정된다. class가 여러개면 여러 클래스를 ,와 함께 적을 수 있다. data: { isActive: true, hasError: false } 아래와 같이 랜더링된다.
Kossie Coder 07. Watch 속성 감시하고 싶은 data를 쓰면 된다. 데이터를 쓰고, 함수처럼 만들어주면 된다. {{ message }} Click {{ updated }} Click버튼 클릭 전의 화면은 다음과 같다. Click버튼 클릭 후 화면은 다음과 같다. 그리고, watch속성에 의해 console창에는 '헬로우 코지코더'가 뜬다.
Kossie Coder 06. Computed 속성 - 아래와 같이 {{}}안에 간단한 연산은 괜찮다. 하지만 연산이 커지면 간단 명료하지않고 복잡하며, 한눈에 잘 들어오지 않는다. (사실 안에 저렇게 로직이 들어가는건 좋은 코드가 아니라고 한다!) {{number+1}} {{ message.split('').reverse().join('') }} 그래서 아래와 같이, computed 속성에 함수를 만들어 return을 해서 넣어주자. 똑같은 결과값이 나온다. {{ reversedMessage }} 그리고 computed를 사용하면 중복제거 효과도 있다. {{ reversedMessage }} {{ reversedMessage }} {{ reversedMessage }} 만약 methods를 이용한다면? {{ reversedMessage() }} {{ r..
Kossie Coder 05. 데이터 양방향 바인딩(Data Two Way Binding : v-model) {{ text }} Submit 1/ v-on:keyup="updateText"로 실시간으로 {{ text }}부분에 input에 적은 내용이 나오도록 할 수 있다. keyup : 키보드를 치고 뗄때, 이벤트가 일어난다. 여기서는 input창에 key를 up할때마다 data의 text에 event.target.value, 즉 Input입력창의 내용을 넣어주는 이벤트가 일어난다. 만약 @keyup을 적용하지 않으면, 아래 input창에 적은게 {{text}}에 update가 되지 않는다. 즉, 양방향 데이터 바인딩이 되지 않는다. 2/ 하지만 더 간단한 방법인, 양방향 데이터 바인딩인 v-model을 이용하자! 훨씬 간단하다.
Kossie Coder 04. 이벤트(Events) {{year}} 더하기 빼기 Submit 1/ v-on:을 @로 치환 가능. 2/ 이벤트수식어 사용 시, .prevent 이렇게 적으면 된다. submit.prevent로 적으면, Submit 후에도 페이지가 다시 reload되지 않는다. 3/ form태그는 submit시, 페이지가 다시 reload된다. (reload를 막기위해서는 .submit.prevent로 이벤트 수식어 적기.) 페이지가 다시 reload되지 않으면, year와 input에 적은 것들이 submit후에도 변경되지 않는다. 4/ @click 뒤에 함수는 methods라도 ()를 적지 않는다..!
Kossie Coder 03. 데이터 바인딩(Data Binding) 바인딩 : 식별자와 값을 연결하는 과정. ex: 변수 선언 : 변수 이름(식별자)과 확보된 메모리 공간의 주소를 바인딩하는 것. 코지 코더 채널 데이터 바인딩 하는 방법 1/ 텍스트에는 {{}} 이렇게 간단하게 데이터 바인딩을 할 수 있다. (식별자 {{}}와 값을 바인딩) 2/ html 태그의 속성에도 데이터 바인딩을 할 수 있다. --> v-bind: 를 앞에 붙여주면 된다. 여기서 v-bind는 생략가능. 3/ html 태그 속성에 바인딩 시, data뿐만 아니라 methods도 바인딩 가능하다.
Kossie Coder 02. 뷰 데이터(data)와 메소드(methods) {{person.name}} {{person.age}} {{nextYear()}} {{nextYear_('안녕하세요')}} 1/ data - 속성 값에 '데이터'를 넣을 수 있다. - html안에는 this없이 바로 가져올 수 있다. - methods안에는 this.person.이렇게 this를 붙이고 가져와야한다. 2/ methods - 속성 값에 '함수'를 넣을 수 있다. - 매개변수(parameter)를 받을 수 있다. - html안에는 ()를 뒤에 붙여줘야한다.

티스토리툴바