codeGray

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

v-model 은 양방향 바인딩입니다. 사용자가 입력하는 값을 변수에 바로 바인딩 해서 실시간으로 보여줄 수 있습니다. 먼저 v-model을 사용하지 않는 방식을 먼저 보겠습니다. v-model을 사용하지 않을 경우 {{ text }} 일반적으로 이벤트에 사용자가 입력한 값을 받아서 메소드를 호출하여 data에 바인딩 시켜주는 방식입니다. 사용자가 입력할때마다 이벤트를 발생시키는 keyup 이벤트에 updateText라는 메소드를 사용하여 data에 있는 text의 값을 변경 시켜줍니다. 이것을 v-model을 사용하면 간단하게 바꿀 수 있습니다. v-model을 사용하는 경우 {{ text }} 이렇게 v-model에 data에 들어있는 text 변수를 사용하면 사용자의 입력 값이 바로바로 바인딩 됩니다.

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...

v-if , v-for number 1 number 2 number 3 {{ one.id }} {{ one.name }} {{ one.age }} {{ index }} {{ one.id }} {{ one.name }} {{ one.age }} v-if는 조건에 맞으면 화면에 출력하고 아니면 감춰 버리는 기능입니다. 위의 코드에서 data()에 number : 1 이리는 변수를 설정하고 v-if의 조건으로 number === 1 일경우 number 1을 출력하고 number === 2 일경우 number 2를 출력, 그 외의 경우는 number 3을 출력합니다. v-for는 여러개의 리스트를 for 루프를 돌려서 출력합니다. 위의 코드에서 data()에 list 라는 배열을 html에 출력하려고 할 때, ..

v-bind 는 html 테그에 데이터를 바인딩 할 때 사용 합니다. 기존 html처럼 고정 값일때는 이런 식으로 사용해도 됩니다. data에 선언한 값이나, methods에 선언한 메서드를 사용하려면 value 속성 앞에 v-bind: 를 붙이고 메서드나, data에 정의해놓은 변수를 사용하시면 됩니다. v-bind: 를 줄여서 : 로 대체 가능 합니다.

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. ..