Programmers

Vue인스턴스, 반응형이 동작되는 과정을 설명 html {{ msgA }} {{ msgB }} Change! script내부의 data에 정의되지 않은 데이터는 반응형으로 만들어 질 수 없다. {{ msgA }}는 정의 되어 있어서 반응형이 가능하지만, {{ msgB }}는 반응형이 불가하다. 실행화면 ↓ 버튼클릭을 통해서 msgB를 출력하는 것은 가능하지만 반응형은 불가능하다.

Component 1. 기존의 방식 js const vm = new Vue({ el: '#app', data: { todos: [ { id: '1', title: '아침 먹기', done: true }, { id: '2', title: '점심 먹기', done: false }, { id: '3', title: '저녁 먹기', done: true }, { id: '4', title: '간식 먹기', done: false }, { id: '5', title: '야식 먹기', done: false } ] } }) data객체 안에 todos라는 배열과 그 속성으로 id(고유 값), title, done을 정의 html {{ todo.title }} li태그 내에 v-for반복문에는 항상 v-bind:key와 ..

v-bind:class, v-on:click, v-model 응용 js const vm = new Vue({ el: '#app', data: { toggle: false, message: '' }, methods: { toggleElement () { this.toggle = !this.toggle } } }) toggle 데이터, message 데이터 정의 toggleElement함수 정의 html {{ message }} Toggle div태그 내에 box 클래스를 정의 v-bind:class의 active가 true, false일 때 bind(갱신)된다. div태그 내, 버튼 내의 v-on:click을 통해 toggleElement를 호출한다. input내의 v-model을 통해 message가 양..

v-model 사용법 js const vm = new Vue({ el: '#app', data: { message: "안녕하세요! VueJS!!" } }) html {{ message }} v-model은 양방향으로 input박스에서 message 실제데이터를 갱신하면 p태그의 출력도 수정된다. 실행결과

v-on:click 사용법 js에서 html로 단방향으로 바인딩된다. js const vm = new Vue({ el: '#app', data: { message: "안녕하세요! VueJS!" }, methods: { reverseMessage: function() { this.message = this.message.split('').reverse().join('') } } }) methods안에 함수를 정의한다. this는 맨 위의 vm을 가리키고 this.message는 vm이 가지는 data의 message를 가리킨다. reverseMessage는 split('')을 통해 문자 단위로 쪼개고 reverse를 통해 뒤집고 join('')을 통해 다시 합친다. html {{ message }} 메시지..

v-for 사용법 js const vm = new Vue({ el: '#app', data: { items: [ { id:'1', message: 'Hello World' }, { id:'2', message: 'Good Job' }, { id:'3', message: 'My first Vue' } ] } }) itmes라는 데이터 배열에는 동일한 형식의 3개의 객체가 들어간다. 고유한 (id) 값이 있어야 한다. html {{ item.message }} v-for을 통해서 items를 모두 돌며 item에 객체를 저장하고 그 값들을 사용한다. v-for에는 v-bind:key가 필수적으로 사용된다. 여기서는 없어도 실행은 되지만, 실무에서는 오류가 발생할 수 있기 때문에 꼭 고유 값을 설정해주어야 한..

속성 - autoplay: 준비되면 바로 재생 - controls: 제어 메뉴를 표시 - loop: 재생이 끝나면 다시 처음부터 재생 - preload: 페이지가 로드될 때 파일을 로드할지의 지정, 값: none, metadata(기본값), auto - src: 콘텐츠 url - muted: 음소거 여부 예제 속성 - autoplay: 준비되면 바로 재생 ☞ 요즘은 대부분의 브라우저에서 muted 속성을 같이 사용해야 작동한다. - controls: 제어 메뉴를 표시 - crossorigin: 가져오기가 cors를 사용하여 수행되어야 하는지 여부, 동일한 출처인지 확인하는 속성, 잘 사용 안 함 - loop: 재생이 끝나면 다시 처음부터 재생 - muted: 음소거 여부 - poster: 동영상 썸 내일..

IMG : 이미지를 삽입 IMG 속성 src: 필수, 이미지 url alt: 필수, 이미지가 안 들어왔을 때 대체 텍스트 width: 이미지의 가로나비 height: 이미지의 세로 너비 ※width, height는 크기를 조절하는 용도라면 둘 중 하나만 입력하는 것이 바람직하다. width, height 예제 1 px로 사이즈를 지정하지 않았다. 숫자만 넣었다. width, height 예제 2 - index.html - main.css img { width: 666px; } css를 이용해서도 이미지의 사이즈를 조절할 수 있다. srcset: 브라우저에게 제시할 이미지 url과 원본 크기의 목록을 정의 값 w, x sizes: 미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의 srcset..