프로그래밍(TA, AA) (269) 리스트형 [Vue.js] 공식 가이드 문서 요약 (4) - 상태 관리 Vue 응용 프로그램에서 근본이 되는 것은 data 객체다. Vue 인스턴스는 단순히 그것에 대한 액세스를 프록시 한다. 따라서 여러 인스턴스에서 공유해야하는 상태가 있으면 id로 간단히 공유할 수 있다. const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const vmB = new Vue({ data: sourceOfTruth }) 이제 sourceOfTruth가 변형될때마다 vmA와 vmB가 자동으로 뷰를 갱신한다. 이 인스턴스들 각각의 하위 컴포넌트들은 this.$root.$data를 통해 접근할 수 있으며 언제든지 앱의 일부에서 변경할 수 있다. 이 문제를 해결하기 위해 간단한 store 패턴을 사용할 수 있다. var s.. [Vue.js] 공식 가이드 문서 요약 (3) - 플러그인 Vue.use() 글로벌 메소드를 호출하여 플러그인을 사용한다. // 'MyPlugin.install(Vue)' 호출 Vue.use(MyPlugin) // 선택적으로 옵션 전달 가능 Vue.use(MyPlugin, { someOption: true }) Vue.use는 자동으로 같은 플로그인을 두 번 이상 사용하지 못하기 때문에 같은 플러그인에서 여러 번 호출하면 플러그인이 한 번만 설치된다. vue-router와 같은 Vue.js 공식 플러그인이 제공하는 일부 플러그인은 Vue가 전역 변수로 사용가능한 경우 자동으로 Vue.use()를 호출한다. 그러나 CommonJS와 같은 모듈 환경에서는 항상 Vue.use()를 명시적으로 호출해야 한다. // Browserify 또는 Webpack를 통해 Comm.. [Vue.js] 공식 가이드 문서 요약 (2) - 컴포넌트 컴포넌트는 Vue의 핵심기능 중 하나로 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는데 도움이 된다. Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트이다. Vue 컴포넌트는 Vue 인스턴스이기도 하다. 루트에만 사용하는 옵션을 제외하고 모든 옵션 객체를 사용할 수 있으며 같은 라이프사이클 훅을 사용할 수도 있다. [컴포넌트 사용하기]전역 컴포넌트를 등록하려면, Vue.component(tagName, options)를 사용한다. Vue.component('my-component', { // 옵션 }) 일단 등록되면, 컴포넌트는 인스턴스의 템플릿에서 커스텀 엘리먼트, 로 사용할 수 있다. 루트 Vue 인스턴스를 인스턴스화하기 전에 컴포넌트가 등록되어 있는지 확인한다. // .. [Vue.js] 공식 가이드 문서 요약 (1) [선언적 렌더링]Vue.js의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링 하는것.data와 DOM이 연결되어 모든것이 반응형(reactive)하다. element 속성을 바인딩 하는것도 가능 [디렉티브]v-bind 속성 디렉티브(e.g. )라고 한다. 디렉티브는 Vue에서 제공하는 특수 속성인 v- 접두어가 붙어있으며 렌더링된 DOM에 특수한 반응형 동작을 한다. v-if 속성을 통해서 엘리먼트 토글이 가능하다. v-for 디렉티브는 배열의 데이터를 사용해 목록을 표시한다. v-model 디렉티브는 앱 상태를 양방향으로 바인딩한다. v-on 디렉티브(e.g. ...)를 사용하여 Vue 인스턴스에 메소드를 호출하는 이벤트 리스터를 첨부할 수 있다. DOM을 건드리지 않고 앱의 .. [프로그래밍] Intellij (변수명 / 괄호 색상 구분) 변수별 색상 구분file > setting > editor > color & fonts > java > semantic highlighter 괄호 색상 구분Rainbow Bracket Plugin 이전 1 ··· 21 22 23 24 25 26 27 ··· 54 다음
