Vue - computed로 클래스 조작

Vue - computed로 클래스 조작

Hello World Hello World HTML 코드에서 div 태그에 p태그가 두개가 생성되어 있습니다. 첫번째는 콧수염괄호를 이용해서 isError가 true일 때 warning class를 주입시키고 거짓일 때는 없애는 방식입니다. 두번째는 computed 속성에 정의한 errorTextColor의 결과에 따라 클래스를 주입하거나 제거합니다. errorTextColor는 data속성에 있는 isError가 true 일때 'warning' 텍스트를 리턴하고 false일 때 null을 return 합니다. 아래 예시를 확인해보겠습니다. 위 이미지처럼 Hello World가 두줄이 보입니다. 이제 vue 콘솔에서 데이터를 실시간으로 조작해서 변화되는걸 확인해보겠습니다. vue 콘솔에서 data 속성 ..

  • format_list_bulleted Dev/Vue
  • · 2022. 5. 31.
Vue - watch

Vue - watch

이번에는 watch 속성에 대해서 공부해보았습니다. {{ num }} increase 본문 내용은 increase라는 버튼을 누르게되면 addNum() 이라는 함수를 실행하도록 되어있습니다. 그리고 우리는 {{ num }} 문법을 통해서 즉각적으로 변화되는 num의 데이터를 화면으로 확인 할 수 있게 되구요. 여기서 Vue 인스턴스에 watch라는 속성을 추가했습니다. 내용을 살펴보자면 watch 내부의 num : function() 부분은 data: 내부에 설정된 num이 변경이 감지되면 즉각 함수를 실행하게 됩니다. 즉 위는 상황상 사용자가 increase 버튼을 누르게되면 addNum함수가 실행되면서 num의 값이 1증가하게 되고 num의 변화를 watch가 감지했다면 logText() 함수를 실행..

  • format_list_bulleted Dev/Vue
  • · 2022. 5. 31.
Vue - v-on

Vue - v-on

굉장히 오랜만에 포스팅을 진행해봅니다. 온가족이 코로나에 걸리는 바람에 정말 끙끙 앓고 후유증 때문에 몇주를 고생하다가 정상 컨디션으로 돌아오고 다시 공부를 시작하려고 합니다. 보통 사용자 화면에서 클릭을 한다거나 키보드를 입력할 때 이벤트를 발생시키는 경우가 많습니다. input태그에 문자를 작성한다던지 엔터를 친다던지 버튼을 클릭한다 던지 등등 여러가지 케이스들이 많은데 오늘은 이 이벤트들이 작동할 수 있도록 해보겠습니다. 우선 늘 하던대로 기본 html과 vue인스턴스를 생성해줍니다. 이번엔 내부에 methods : {} 라는걸 생성했고 그 내부에 logText를 만들었습니다. 이제 body 태그 내부에 있는 div#app 내부에 button을 하나 간단하게 생성해보도록 하겠습니다. click me..

  • format_list_bulleted Dev/Vue
  • · 2022. 5. 13.
Vue - 엑시오스(axios)

Vue - 엑시오스(axios)

사용자가 이용하는 홈페이지가 하나 있다고 가정했을 때 사용자가 어떠한 신호를 보냈을 때 그에 맞는 데이터가 잘 전달되어야하고 전달된 데이터는 화면에 적절하게 표시되어야 합니다. 저같은 경우는 MVC모델에 익숙해있기 때문에 사용자가 원하는 페이지에 접근을 시도하게되면 컨트롤러, 모델, DB 등을 이용해서 사용자 화면에 적절하게 데이터를 출력해주었습니다. 물론 Jquery에 ajax라는 아주 훌륭한 기능이 있기 때문에 이 역시 지금도 아주 유용하게 사용하고 있습니다. 그런데 Vue에서는 HTTP 통신 라이브러리를 axios라는 라이브러리를 사용한다고 합니다. 다음은 Vue 공식문서에 aixos에 관한 간략한 설명입니다. Axios는 Promise기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통..

  • format_list_bulleted Dev/Vue
  • · 2022. 4. 25.
Vue - 라우터 링크[router-link]

Vue - 라우터 링크[router-link]

사용자가 페이지를 사용하면서 주소창에 자신이 원하는 경로를 구체적으로 적는 경우는 드물다. 개발자 혹은 웹에 대한 지식이 있는 사람이 아니고서야 아래처럼 페이지에 접근하거나 이동하는 일은 거의 없다고 생각한다. www.mypage.com/member/login http://www.mypage.com/member/login.html www.mypage.com 그렇다면 개발자는 화면에서 사용자들이 페이지 이쪽저쪽을 이동 할 수 있도록 링크를 노출시켜줘야한다. 그럴때 사용하게는 router-link다. ※참고: 에디터는 vs-code를 사용중이며 에디터에서 마우스 우측 버튼을 눌러서 Open with live server를 실행시켜 간단한 테스트를 진행합니다. 해당 메뉴가 없는 분들은 Live Server 플..

  • format_list_bulleted Dev/Vue
  • · 2022. 4. 13.