체인의정석

아래와 같이 표시될 경우 /user/foo 와 /user/bar 같은 url은 모두 같은 경로에 매핑됩니다. 동적 세그먼트는 콜론 : 으로 표시됩니다. 라우트가 일치하면 동적 세그먼트의 값은 모든 컴포넌트에서 this.$route.params로 인식하게 됩니다. foo가 들어오면 this.$route.params은 foo가 되는 것입니다. const User = { template: 'User' } const router = new VueRouter({ routes: [ // 동적 세그먼트는 콜론으로 시작합니다. { path: '/user/:id', component: User } ] }) 따라서 다음과 같이 사용자의 id를 표시할 수 있습니다. const User = { template: 'User {..

막상 프로젝트를 시작하려니 필요한 모듈들이 생각보다 되게 많았다. 여기에 정리해서 하나하나 써가면서 익혀보도록 하겠다. 일단 express+node.js에 익숙한 상황이기 때문에 거기에 맞춰서 이해하면서 정리해 보았다. 1. Vue cli Vue Cli는 간단하게 프로젝트를 만들어 줄 수 있는 프레임워크다. express와 비슷한 개념인것 같다. https://cli.vuejs.org/guide/creating-a-project.html#vue-create Creating a Project | Vue CLI Creating a Project vue create To create a new project, run: WARNING If you are on Windows using Git Bash with m..

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

computed 속성 mustach {{ }} 안에 표현식을 넣으면 편리하지만 이는 간단한 연산에만 한정됩니다. 따라서 복잡한 표현식이 들어가는 경우에는 computed속성을 사용해야 합니다. 원본 메시지: "{{ message }}" 역순으로 표시한 메시지: "{{ reversedMessage }}" var vm = new Vue({ el: '#example', data: { message: '안녕하세요' }, computed: { // 계산된 getter reversedMessage: function () { // `this` 는 vm 인스턴스를 가리킵니다. return this.message.split('').reverse().join('') } } }) 이렇게 되었을때의 요점은 바인딩된 데이터에 ..

보간법 문자열 데이터 바인딩의 가장 기본 형태는 {{ }} 을 사용하는 텍스트 보간이다. 메시지: {{ 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..