Vuex란? Vuex는 Vue.js 응용 프로그램을 위한 상태 관리 패턴 + 라이브러리이다. Vue 어플리케이션의 모든 구성 요소에 대한 중앙 집중식 저장소의 역할을 하며, 상태가 예측 가능한 방식으로만 변형될 수 있도록 보장하는 규칙을 가지고 있다. Vuex를 왜 사용하는가? Vue는 컴포넌트 사이에 단방향 통신만을 지원하기 때문이다. Vuex를 꼭 사용할 필요는 없다. 오히려 한두군데서밖에 사용하지 않는 state를 꾸역꾸역 store에 저장하는 것이 더 안 좋을 수도 있음. Vuex의 중심 컨셉 (state, getters, mutations, actions) Vue Component에서 변화가 일어난다면 dispatch 함수를 통해 Actions에 저장된 메소드를 호출한다. Actions의 메소드..
텍스트 보간 Mustache 구문을 사용한 텍스트 보간. {{msg}} * Mustache 구문은 데이터를 일반 텍스트로 해석하기 때문에 만약 HTML로 출력하고 싶다면 v-html 디렉티브를 사용해야 한다. 여기에 msg가 출력된다 여기에 msg가 출력된다 Vue.js는 모든 데이터 바인딩 내에서 자바스크립트 표현식의 모든 기능을 지원한다. 가능 불가능 {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} {{ var a=1 }} {{ if(ok) {return 'YES'} }} (조건문은 작동하지 않음) 디렉티브 디렉티브는 v-접두사가 있는 특수 속성이다. 디렉티브 속성 값은 단일 자바스크립트 표현식이 된..
Vue Instance 생성 속성 속성 설명 el Vue가 적용될 요소 지정. CSS Selector or HTML Element data Vue에서 사용되는 정보 저장. 객체 또는 함수의 형태. (함수 형태를 더 권장함) emplate 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 함꼐 화면에 그릴 수 있다. methods 화면 로직 제어와 관계된 method를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가. created 뷰 인스턴스가 생성되자 마자 실행할 로직을 정의. Vue Instance 유효범위 Vuew Instance를 생성하면 HTML의 특정 범위(el) 안에서만 옵션 속성들이 적..
Vue.js란? 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 Progressive Framework. 특징 Approachable (접근성) Versatile (유연성) Performant (고성능) MVVM Pattern Model(자바스크립트 객체) + View(웹페이지의 DOM) + ViewModel(Vue) 기존에는 자바스크립트로 view(DOM)에 접근하거나 수정하기 위해 jQuery와 같은 라이브러리를 이용하였다. 예시 텍스트 클릭 $('button').click(function () { $('#p1').text('대체 텍스트'); }); Vue는 view와 Model을 연결하고 자동으로 바인딩하여 양방향 통신을 가능하게 하였다. {{msg}} 클릭 new Vue({ el: "#app"..
