Vue (8) 썸네일형 리스트형 [Vue] v-html을 이용해 element를 주입했더니 CSS가 안먹힌다? https://medium.com/@brockreece/scoped-styles-with-v-html-c0f6d2dc5d8e Scoped styles with v-html Scoped css is awesome and I strongly encourage its use when building reusable components. It stops the css rules of your component bleeding… medium.com style 태그에 scoped 속성이 들어가 생긴 문제로 자세한 내용은 위 블로그를 참고, 해결 방법은 1. scoped를 지운다 2. 스타일을 주려고 하는 선택자 앞에 >>> 를 넣어준다 [Vue - tutorial] Component 아래와 같은 카드를 만든다고 생각해보자 코드는 아래와 같다. Lorem Ipsum s simply dummy text of the printing and typesetting industry. Lorem Ipsum s simply dummy text of the printing and typesetting industry. Lorem Ipsum s simply dummy text of the printing and typesetting industry. card 가 중복으로 사용되고 있음을 확인 할 수 있다. 이 때 vue의 강력한 기능 중 하나인 컴포넌트 를 제공해준다. component를 생성할 땐 Vue.component(tagName, options) 를 이용한다. options에는 props와 .. [Vue - tutorial] 배열 변경 감지 리스트를 출력 할 때 배열을 이용한다 Vue에서 리스트를 추가, 삭제를 할 때 배열을 변경하여 화면을 갱신할 수 있다. 배열을 변경할 때 사용하는 메소드는 다음과 같다 ** 아래 메소드는 모두 원본 배열의 값을 변경한다. push() pop() shift() unshift() splice() sort() resver() [Vue - tutorial] event handling Vue에서 event handling은 v-on 또는 @를 이용해서 event를 바인딩 한다. ** @는 v-on의 축약형 버튼 버튼 event handling을 이용해 카운팅 하는 간단한 코드를 구현해보면 아래와 같다. event는 methods 객체 안에 구현해주면 된다. + - 카운팅 : {{ count }} 상태에 count를 만들어 주고 methods 안에 increase와 decrease를 구현했고 그 안에서는 this를 이용해 상태값 중 하나인 count의 접근해 상태를 변경해주고 있다. 다음으로 엔터키 를 입력 했을 때 값을 화면에 보여주는 코드를 작성해보자. + - 카운팅 : {{ count }} 결과 : {{ todo }} 기존 코드에서 input 부분과 todo 라는 상태 handle.. [Vue - tutorial] attribute binding HTML 속성을 유동적으로 변경하는 방법을 알아보자. 먼저, 예전에 순수 HTML만을 이용해 style을 주는 코드는 아래와 같다. 영역 Vue에서는 style의 값을 변수로 지정해 놓고 그 값을 태그에 바인딩 할 수 있다. **참고, v-bind 와 : 는 동일하다 (속성의 값에 javascript 코드를 사용하고 싶을 때 쓴다) 영역 style의 값은 'background: tomato'와 같이 문자열 또는 객체 형태로 나타낸다. 객체로 나타낼 때 주의할 점은 font-size와 같이 - 로 연결되어 있는 속성은 문자열로 묶어주던가, camel case를 사용해야 한다. style을 여려개 적용시킬 땐 아래 코드와 같이 배열을 이용한다. 영역 style 뿐만 아니라 class의 값도 동적으로 변경할 .. [Vue - tutorial] 리스트 출력하기 리스트 출력은 v-for 을 이용한다. {{ todo.id }} {{ todo.todo }} id 와 todo 를 분리해서 쓰고 싶을 때 vue에서 제공해주는 template를 이용한다. id: {{ todo.id }} {{ todo.todo }} 추가로, 좋은 방법은 아니지면, todos에 값을 추가하는 방법을 살펴보자. 그러기 위해서 먼저, new Vue로 생성된 인스턴스를 메모리에 저장시킨다. let app = new Vue({}) F12를 눌러 콘솔창을 켜고 app.todos.push({ id: 5, todo: '버그 수정하기' }) 를 입력하면 리스트에 추가된 것을 확인 할 수 있다. [Vue - tutorial] Vue devtools https://chrome.google.com/webstore/category/extensions Chrome 웹 스토어 Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요. chrome.google.com 에 들어가서 vue devtools를 검색하고 Chrome에 추가한다. 이제 F12를 눌러 크롬 개발툴을 켜면 Vue 탭이 생성된 것을 확인 할 수 있다. [Vue - tutorial] 데이터 바인딩 (Data binding) 실제 개발에서는 npm 으로 Vue를 다운받고 webpack으로 번들링해서 사용하지만, 지금 하고 있는 튜토리얼은 CDN을 받아서 vue를 사용합니다. https://kr.vuejs.org/v2/guide/installation.html#CDN 설치방법 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 위 페이지에 접속해 CDN을 복사해서 script 태그에 추가해 줍니다. 그리고 Vue 는 div 루트 태그를 만들고 마운트해서 사용합니다. Data binding을 위해 input 태그를 만들어줍니다. 추가 예전에는 input에 있는 값을 가져오기 위해 위와 같이 태그를 id로 접근해 값을 가져고오 add() 라는 함수를 버튼에 추가해줬습니다. vue를 이용하면 .. 이전 1 다음
