Programmers

TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT 조건 width 또는 height가 고정 사용해 영역을 감출 것 -> overflow: hidden; 아래줄로 내려가는 것을 막기위해 -> white-space: nowrap

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가 필수적으로 사용된다. 여기서는 없어도 실행은 되지만, 실무에서는 오류가 발생할 수 있기 때문에 꼭 고유 값을 설정해주어야 한..

https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxScrollView/Configuration/#showScrollbar Documentation 21.1: DevExtreme - JavaScript Scroll View Configuration An object defining configuration properties for the ScrollView UI component. A Boolean value specifying whether to enable or disable the bounce-back effect. Default Value: true, false (desktop) If the property is set to..