Vue.js에서 함수를 만들던 중 다음과 같은 오류를 만났다. 선언 위치가 잘못되었는지 한참 헤매다 찾은 이유는 s하나가 빠져서였다. s를 붙인 후 오류 해결,,,

v-model 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있다 v-model은 내부적으로 서로 다른 속성을 사용하고 서로 다른 입력 요소에 대해 서로 다른 이벤트를 전송. text와 textarea 태그는 value 속성과 input 이벤트를 사용 체크박스들과 라디오버튼들은 checked 속성과 change 이벤트를 사용 select 태그는 value 를 prop로, change를 이벤트로 사용 text 메시지: {{ message }} textarea -> mustache는 불가 여러 줄을 가지는 메시지: {{ message }} 체크박스 -> v-model 바인딩 값 : 체크박스의 boolean // 하나의 체크박스 {{ checked }} // ..

모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작! var test = new Vue({ // 옵션 }) Vue 인스턴스를 생성할 때는 options객체를 전달해야 한다. Vue 앱은 new Vue를 통해 만들어진 루트 Vue 인스턴스로 구성되며, 선택적으로 중첩이 가능하고 재사용 가능한 컴포넌트 트리로 구성된다. 데이터와 메소드 Vue 인스턴스가 생성될 때 data 객체에 있는 모든 속성이 Vue의 반응형 시스템에 추가된다. 각 속성 값이 변경될 때마다 Vue는 반응하여 새로운 값으로 업데이트된다. var test = new Vue({ data: data, // 인스턴스 생성시 존재한 것들만 반응형 // 나중에 필요할 것임을 알고 있으며, //빈값이나 존재하지 않는 상태로 시작하..

보간법 문자열 데이터 바인딩의 가장 기본 형태는 "Mustache"구문(이중 중괄호)을 사용한 텍스트 보간. => {{ 속성명 }} v-once 디렉티브를 사용하여 데이터 변경 시 업데이트되지 않는 일회성 보간을 수행 원시 HTML 이중 중괄호(mustaches)는 html이 아닌 일반 텍스트로 데이터를 해석 => musaches는 v-text와 같음 실제 html을 출력하려면 v-html 디렉티브를 사용 JavaScript표현식 사용 Vue.js는 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원 각 바인딩에 하나의 단일 표현식만 포함될 수 있음 => {{ var a == 1 }} (X) , {{ if (ok) {return msg} }} (X) 디렉티브 (Directives) ..

Vue.js 사용자 인터페이스를 만들기 위해 사용하는 오픈소스 Progressive Framework 특징 Approachable 접근성 Versatile 유연성 Performant 고성능 MVVM Pattern Model : 순수 자바 스크립트 객체 View : 웹페이지의 DOM ViewModel : Vue의 역할 -> 기존에는 자바스크립트로 view에 해당하는 DOM에 접근하거나 수정하기 위해 jQuery와 같은 라이브러리 이용 Vue는 view와 Model을 연결하고 자동으로 바인딩하므로 양방향 통신을 가능하게 함. el : Vue가 적용될 요소 지정. CSS Selector or HTML Element data : Vue에서 사용되는 정보 저장. 객체 또는 함수의 형태 template : 화면에 ..