Programmers

브라우저를 구분하는 코드 - 엔진을 통해서 브라우저를 구분하는 듯 함 - ios크롬을 실행하더라도 '사파리'라는 것을 확인함 var userAgent=navigator.userAgent.toLowerCase(); var browser; if(userAgent.indexOf('edge')>-1){ browser='익스플로러 엣지'; }else if(userAgent.indexOf('whale')>-1){ browser='네이버 웨일'; }else if(userAgent.indexOf('chrome')>-1){ browser='크롬'; }else if(userAgent.indexOf('firefox')>-1){ browser='파이어폭스'; }else if(userAgent.indexOf('safari/')..

1) 배열의 마지막 요소 값을 구하는 방법 인덱스 값에 배열길이의 마지막 인 -1 을 찾으면 된다. 속성 값 값 의미 기본값 border-width 선의 두께(너비) medium border-style 선의 종류 none border-color 선의 색상 black 사용법 arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0] console.log(arr[arr.length-1]) 출력결과

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