Vue Computed/Watch Computed computed 를 통해 data 필드를 감지하고 새로운 필드를 정의해서 사용하는 법을 알아보자. 여기 data안에 firstName과 lsatName이 객체로 저장되어 있다. data() { return { firstName: 'Jane', lastName: 'Johnson', }; }, 이 두 객체를 한번에 렌더링 하고 싶으면 아래와 같이 적는 방법이 있다. Hello {{ firstName }} {{ lastName }} computed에 선언 된 값은 data에 선언 된 값과 완전히 동일한 역할을 한다. computed에 아까와 같은 함수를 선언하고 h1 태그에 적용해보자. Hello {{ firstName }} {{ ..

Vue 이벤트 처리하기 - click/change/key Click 이벤트 Vue 에서 가장 많이 보게 될 click 이벤트 처리법을 먼저 살펴보자. Add 1 The count is {{ count }} 이제 버튼을 누를 때마다 값이 1씩 증가하게 만들어 보자. Vue에서는 이벤트를 추가할때 v-on 속성을 사용한다. 여기서는 클릭 이벤트를 사용하므로 v-on:click="" 속성을 사용하고 큰 따옴표 안에 함수를 넣어주면 된다. (v-on:click=""은 @click=""으로 줄여쓸 수 있다.) Add 1 이벤트에 사용되는 함수는 script 태그안의 methods:{} 안에 넣어주면 된다. 전에 말했듯 메소드의 함수가 data에 접근하기 위해서는 this.을 사용해야 한다. 위처럼 함수를 넣고 클..

Vue 렌더링 리스트 렌더링 select와 option태그, 그리고 배열로 이루어진 객체 데이터를 통해 리스트 렌더링을 하는 방법을 알아보자. 우선 data에 아래와 같이 값을 부여하자. data() { return { options: [ { v: '02', t: '서울' }, { v: '21', t: '부산' }, { v: '064', t: '제주' }, ], }; }, 이제 tempalte 태그 안에 아래 와 같이 적자. {{i}}-{{ city.t }} 위 코드를 실행하면 0-서울, 1-부산, 3-제주의 세 옵션들이 생성 된 것을 볼 수 있다. v-for 속성의 기본 구조는 v-for="(item, index) i..

Vue 데이터 바인딩-attribute/class/style 속성 데이터 바인딩 이미지의 src를 바인딩 해봄으로서 속성 바인딩 방법을 알아보자. 프로젝트의 public 폴더에 img 폴더를 생성한 뒤 파일을 넣고 위와 같이 template안에 img 태그에 속성을 부여해주면 실행 시 이미지를 볼 수 있다. 데이터의 return 값에 src 객체를 넣어서 src속성을 바인딩해보자. 이번에는 input 값이 비었을 때 버튼을 disabled 시키는 방법에 대해 알아보자. Click 로직은 간단하다. 받아온 textValue값이 비었다면 버튼은 활성화 되지 않는다. 만약 v-bind:disabled=true 이면 버튼은 비활성화되고 v-bind:disabled=false 이면 버튼은 활성화된다. 데이터의 r..

Vue 데이터 바인딩-html/input/select HTML 데이터 바인딩 {{htmlString}} 위처럼 적으면 화면에는 붉은색 글자가 출력되는 대신 This is a red String 라고 출력 된다. 태그와 속성을 포함한 데이터 바인딩을 하기 위해서는 아래와 같이 template 태그 안의 코드를 수정해야 한다. 위처럼 vue에서 html을 바인딩하기 위해서는 태그안 v-html이라는 속성에 data 명을 적어줘야한다. Input 데이터 바인딩 Input태그를 넣은 컴포넌트를 하나 만들어보자. input 태그의 value라는 속성에 대해 vue에서는 v-model 속성을 써서 데이터 값을 넣을 수 있다. {{ valueModel }} 위와 같이 적은뒤 input 값을 변경하면 p태그의 값도 함..

Vue 컴포넌트 미리 앞서 es-lint를 사용한다면 컴포넌트 이름을 작성 할 때는 한 단어로 작성해선 안된다. 예를 들어 "ToDo"는 가능 하지만 "Todo"는 오류가 난다. Vue 영역 태그 Vue에서는 html, script, css를 한 페이지 안에 작성할수 있다. (각각 Emmit 기능으로 쉽게 쓸 수 있다. ) template 영역에는 html 코드를 쓸 수 있고, script에는 자바 스크립트를, style영역에는 css를 사용할 수 있다. Vue의 가장 기본적인 스트립트 형태는 아래와 같다. name은 컴포넌트의 이름이며, 둘 이상의 단어로 이루어져야 한다. components는 외부에서 컴포넌트를 임포트 할 때 사용가능하다. 마지막으로 data()는 말그대로 안에 데이터를 저장 할 수 ..

Vue Router에 대해 Vue Router 설치 뷰 프로젝트가 있는 폴더를 열고 vue add router커맨드를 입력하고 히스토리 사용 여부를 선택하자. Vue Router 기초 기본으로 제공되는 Vue 페이지에 들어가면 상단에 'Home | About' 이라는 문구가 보일 것이다. 이제 프로젝터 폴더 안의 src/router/index.js 파일을 열어보자. import Home from '../views/Home.vue'; const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component..

Vue 시작해보기 Vue를 현재 처음으로 배워보는 중이다. Vue를 시작하는 방법부터 차근차근 공부해보려고 한다. (참고로 나는 인프런에서 Vue.js 제대로 배워볼래?강의를 통해 학습 중이다.) 시작하기 전에 vs코드 확장으로 Vetur를 까는 것을 추천한다. https://vuejs.github.io/vetur/ Vue CLI 설치하기 우선 Vue를 사용하기 위해서는 Vue CLI를 설치해야 한다. Vue CLI는 쉽게 Vue 프로젝트를 생성하고 관리할수 있게 해주는 프로그램이다. Vue 프로젝트의 폴더구조, 필요한 파일들, 기본 설정 옵션을 명령어를 사용해 자동으로 만들 수 있게 해준다. https://cli.vuejs.org/ 아래는 Vue CLI를 설치하는 방법이다. 터미널을 열어 설치하면된다...