체인의정석

1단계 Vue Cli 사용 2단계 Vuetify의 기본 템플릿 중 googlekeep 버전을 사용하여 기본구조를 잡았다. 3단계 사이드 바에 있는 요소들을 바인딩 한 후 router-link를 통하여 라우팅 시켰다. {{ item.text }} 다음과 같이 링크를 데이터로 바인딩 시킨 후 파라미터로 넘겨 받아서 해당 링크로 이동시킨다. item-text나 icon 부분도 데이터를 바인딩 시켜서 사이드바를 그려준다. 해당 예제는 googlekeep기본 템플릿에 적용되어 있는 예제이다. items: [ { icon: 'mdi-chart-histogram', text: 'Monitoring', path: 'home'}, { divider: true }, { heading: 'Token Manage' }, { ..

클래스와 스타일 바인딩 데이터 바인딩은 v-bind를 사용하여 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해 사용됩니다. vue는 class와 style에 v-bind를 사용할 때 특별히 향상된 기능을 제공하며 표현식은 문자열 이외에 객체 또는 배열을 이용할 수 있습니다. HTML 클래스 바인딩하기 객체 구문 클래스를 동적으로 토글하기 위해 v-bind:class에 객체를 전달할 수 있습니다. 이런식으로 작성하게 되면 active 클래스의 존재 여부가 데이터 속성 isActive의 참속성에 의해 결정되는 것을 의미합니다. 객체에 필드가 더 있으면 여러 클래스를 토글 할 수 있습니다. 또한 v-bind:class는 일반 class 속성과 공존할 수 있습니다. 따라서 위와 같이 클래스를 여러개 둘 ..

보간법 문자열 데이터 바인딩의 가장 기본 형태는 {{ }} 을 사용하는 텍스트 보간이다. 메시지: {{ msg }}이렇게 될 경우 msg 가 쓰여진 부분은 해당 데이터 객체의 msg 속성 값으로 대체되며 데이터 객체의 msg 속성이 변경될 때 마다 갱신된다. 다시는 변경하지 않습니다: {{ msg }}다음과 같이 v-once 디렉티브를 사용하는 경우 데이터 변경 시 업데이트 되지 않는 일회서 보간을 수행할 수 있지만, 같은 노드의 바인딩에도 영향을 미친다. 원시 HTML {{ }}는 HTML이 아닌 일반 텍스트로 데이터를 해석한다. 실제 HTML을 출력하려면 v-html 디렉티브를 사용해야 한다. Using mustaches: {{ rawHtml }} Using v-html directive: 속성 v-..

Vue 인스턴스 만들기 var vm = new Vue({ // 옵션 }) 모든 vue 앱은 vue 함수로 Vue 인스턴스를 만드는 것부터 시작합니다. // 데이터 객체 var data = { a: 1 } // Vue인스턴스에 데이터 객체를 추가합니다. var vm = new Vue({ data: data }) // 같은 객체를 참조합니다! vm.a === data.a // => true // 속성 설정은 원본 데이터에도 영향을 미칩니다. vm.a = 2 data.a // => 2 // ... 당연하게도 data.a = 3 vm.a // => 3 데이터가 변경되면 화면은 다시 렌더링 되지만 data에 있는 속성들은 인스턴스가 생성될 때 존재한 것들만 반응형이여서 나중에 따로 속성을 추가하더라도 그 속성이 ..

https://kr.vuejs.org/v2/guide/index.html 시작하기 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 뷰는 공식 사이트가 잘 나와있다고 해서 공식 사이트를 보고 연습합니다. 먼저 새로운 프로젝트이니 깃허브에 공간을 하나 만들어주고 read me 와 gitignore를 깔아줍니다. https://github.com/hynki95/vue_basic hynki95/vue_basic 뷰 공식 사이트 예제 공부. Contribute to hynki95/vue_basic development by creating an account on GitHub. github.com 1. vue의 cdn 다음과 같이 2가지 종류의 cdn이 있습니다. nod..