Programmers

1) Window.matchMedia() https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia Window.matchMedia() - Web APIs | MDN The Window interface's matchMedia() method returns a new MediaQueryList object that can then be used to determine if the document matches the media query string, as well as to monitor the document to detect when it matches (or stops matching) that media developer.mozilla..

DxScrollView 내에서 사용 :bounceEnabled="false" 스크롤 영역 제한

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 }} 메시지..