codeGray

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