codeGray

Vue 공식 문서를 보면 computed 속성은 복잡한 로직을 구현할 경우 사용한다고 나와 있습니다. 공식문서의 예를 보면 아래와 같습니다. {{ message.split('').reverse().join('') }} 이렇게 message 를 거꾸로 나열해서 보여주는 로직이 있습니다. 위의 예제 코드 처럼 html 코드 속 {{ }} 안에서 로직을 구현해도 괜찮지만, 해당 로직이 다른곳에서 더 사용 될 경우 같은 로직을 한 번 더 작성해야 하는 불편함이 있습니다. 이럴 때, computed 속성을 사용합니다. 아래의 코드를 보겠습니다. {{ reverseMsg }} 위의 {{ message.split('').reverse().join('') }} 로직을 computed 속성안에 함수 형태로 작성 하고 h..

Vue Event 는 아래와 같이 사용합니다. 버튼1 버튼2 전송1 전송2 Vue js 의 이벤트는 기존 onClick = "" 과 다르게 v-on:click="" 문법을 씁니다. v-on: 을 줄여서 @ 하나로 대체 가능합니다. 이벤트에 메서드를 사용해서 원하는 로직을 만들 수 있습니다. 추가적으로 submit을 사용 할 경우 페이지가 리로드 되는데 vue 에서는 @submit 에 .prevent를 붙이면 리로드를 막을 수 있습니다. ( 기존에는 e.preventDefault() ) 다른 이벤트들도 많으니 공식 문서를 참조하시면 되겠습니다. https://kr.vuejs.org/v2/guide/events.html 이벤트 핸들링 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr...

Vue js 메소드는 아래와 같이 선언하여 사용 할 수 있습니다. {{ hello() }} methods 라는 객체를 만들어서 그 안에 함수를 정의 하시면 됩니다. methods 안에서 data 변수에 접근하기 위해서는 this 를 붙여주어야 합니다. methods 도 변수와 마찬가지로 {{ methods() }} 안에 바인딩 됩니다.

Vue js Data 선언과 바인딩 Vue js 를 설치하셨으면 app.vue 파일로 가서 필요 없는 부분을 지워준 뒤, 테스트를 진행합니다. Vue js 2 의 데이터는 다음과 같이 선언합니다. {{ data1}} {{ data2 }} {{ data3 }} {{ data4 }} data()함수를 생성하여 데이터를 원하는 타입으로 선언 한 뒤, html 코드에서 {{ data 값 }} 으로 바인딩 할 수 있습니다. 기존 자바스크립트에서는 document.getElementById('id').innerHTML= 'data'; 로 바인딩을 했었는데 그것과 비교하면 아주 간단한 방식입니다. 추가적으로 Vue 에서 html 작성 시 반드시 안에 로 감싸줘야 잘 동작 합니다.

안녕하세요 codeGray 입니다. 요즘 Vue js 공부를 시작 해보려 합니다. 미숙하지만 제 기록용으로 시리즈를 작성해보려 합니다. 개발 툴 평범하게 vscode로 진행 하였습니다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. ..