JavaScript/Vue.js (4) 썸네일형 리스트형 [Vue.js] 컴포넌트 통신(props, event emit) 디렉티브에 이어서 잘 알아둬야 할 주제를 가져왔다. 바로 컴포넌트 통신 방식인 props와 event emit이다. 먼저 알아볼 props 속성은 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있다. 간단한 예제로 확인해봐야겠다. var childComponent = { template: '{{ message }}', props: ['message'] } new Vue({ el: '#app', components: { 'child': childComponent }, data: { pMessage: 'parent', } }); child 컴포넌트로 메시지를 출력하는 예제이다. 특징은 child 컴포넌트에 props 속성을 정의하였고 상위 컴포넌트인 root 컴포넌트의 pMessage 데이터를 전달받.. [Vue.js] Vue 디렉티브(Directives) Vue의 데이터 바인딩에 대해서 알아보면서 v-bind라는 것도 알게 됐다. 정식 명칭은 디렉티브(Directives) 라고 한다. 번역하자면 지시문이고, HTML 태그 내의 속성으로 선언된다. 단순하게 'v-로 시작되는 속성을 가진 HTML 태그에 지시를 내린다'라고 생각하면 되겠다! 기본적으로 제공하는 디렉티브에 대해서 정리해봐야겠다. v-text v-html v-show v-if / v-else / v-else-if v-for v-on v-bind v-model v-slot v-pre v-cloak v-once v-is 15개나 있어서 간단하게나마 정리해봐야겠다. 1. v-text new Vue({ el: '#app', data: { txt: 'abcd' } }); 엘리먼트의 textContent를.. [Vue.js] 데이터 바인딩(data binding) Vue.js의 가장 기초가 되는 데이터 바인딩부터 정리해보기로 했다. new Vue({ el: '#app' }); 화면의 div 요소와 Vue의 인스턴스를 연결한 내용이다. data를 연결하려면 어떻게 해야 할까? {{ message }} new Vue({ el: '#app', data: { message: 'hi?' } }); Vue 인스턴스에는 data 속성을 추가해주고, 화면에는 Mustache Tag(이중 중괄호 문법)를 활용해서 data를 명시해준다. 가장 기본적인 데이터 바인딩 방법이다. 위 방법이 화면에 표시되는 텍스트 바인딩 방법이고 html 태그 속성도 바인딩이 가능하다. {{ message }} {{ message }} new Vue({ el: '#app', data: { message.. [Vue.js] Vue 시작하기 jQuery만 써보다가 Vue.js를 경험해볼 수 있는 기회가 생겼다. 빠르게 적응하기 위해 온라인 강의를 선택했고 기본적인 내용은 간단히 정리해보기로 했다. jQuery와 Vue의 차이점은 무엇일까? var str = "Hello"; $("#app").text(str); str = "Vue"; $("#app").text(str); 스크립트에서 id가 app인 요소를 찾아서 text를 삽입해주는 jQuery 예제이다. 텍스트가 한 번만 삽입되면 가장 깔끔하고 좋겠지만, 텍스트가 변경될 수도 있고 추가될 수도 있다. 텍스트를 변경하려면 다시 id가 app인 요소를 찾아서 텍스트를 바꿔준다. 똑같은 코드가 중복되고 비용이 높은 DOM 참조를 반복하는 비효율적인 상황이 만들어진다! Vue.js에서는 이런 부분.. 이전 1 다음
