Computed(연산) Property const app = Vue.createApp({ data() { return { counter: 0, name: '' }; }, methods: { setName(event, lastName) { this.name = event.target.value; }, add(num) { this.counter = this.counter + num; }, reduce(num) { this.counter = this.counter - num; // this.counter--; }, resetInput() { // document.querySelector('input').vlaue = ''; this.name = ''; ..

양방향 바인딩 : v-model Vue Events Events in Action Add 10 Subtract 5 Result: {{ counter }} Reset Input Your Name: {{ name }} const app = Vue.createApp({ data() { return { counter: 0, name: '' }; }, methods: { setName(event, lastName) { this.name = event.target.value; }, add(num) { this.counter = this.counter + num; }, reduce(num) { this.counter = this.counter - num; // this.counter--; }, rese..

Event Modifier Events in Action Add 5 Reduce 5 Result: {{ counter }} Your Name: {{ name }} Sign Up 만약 위 코드의 마지막 p태그 밑에 form 태그를 넣고 input과 button 태그를 넣고 버튼을 누르면 어떻게 될까요? 페이지가 새로고침 됩니다. 그 이유는 브라우저의 기본값이 버튼이 있는 form 양식을 제출하면서 앱을 제공하는 서버에 HTTP 요청을 보냅니다. 여기선 그런 서버없이 로컬 환경인데도 불구하고 여전히 브라우저가 로컬로 요청을 보내기 때문입니다. 일반적으로 Vue같은 프레임워크를 사용할 때는 이번 브라우저 기본값을 방지하고, 수동으로 Vue 앱에서 Javasript로 처리합니다. 거기서 사용자의 입력값을 읽고 ..

Native Event Object 이번엔 기존의 HTML코드에 사용자의 이름을 input으로 입력받아 바인딩된 데이터의 값을 변경해보겠습니다. Your Name: {{ name }} methods: { ... ... setName() { } } 위 코드의 이벤트 리스너인 v-on의 input의 값으로 Vue의 실행 함수명을 넣어주면, 그 함수는 자동으로 인수를 하나 얻게 됩니다. (브라우저에서 제공하는 인수) 그 인수는 발생한 이벤트를 설명하는 객체가 될겁니다. 위 HTML에서 함수명에 ()를여서 실행시키는 것이 아닌 함수명만 넣어서 포인터를 지정해 줬기 때문에 브라우저에서 기본으로 제공하는 이벤트 객체를 하나 받게 됩니다. 이 방법이 왜 유용할까요? 이 기본 이벤트 객체는 이벤트 정보로 가득하기 때문..

Event Binding 이해하기 사용자의 입력 데이터에 따라 반응하는 방법과 Vue를 활용하고 더 활발한 상호작용 & 반응하는 웹 어플리케이션을 위해 Event를 이해해봅시다. Vue Events Events in Action Add Reduce Result: {{ counter }} const app = Vue.createApp({ data() { return { counter: 0, }; }, }); app.mount('#events'); 위 HTML 에서 Add/Reduce button 을 눌렀을때 바인딩된 counter에 1을 더하고, 뺀다고 해보죠. 순수 자바스크립트에서는 document.getElementById 로 버튼의 ID를 이용하거나, document.querySelec..

Vue의 Methods 이해하기 저번에 배운 v-bind나 보간법을 이용해 {{ }} 사이에 데이터 바인딩을 했었습니다. 이때 {{ }} 사이에 데이터가 어떤 조건에 의해 무작위로 바뀌게 출력하도록 해보겠습니다. 이럴때 사용할 수 있는 Vue의 옵션중 하나가 Methods 입니다. Methods를 사용하면 사용자 이벤트가 발생하는 등의 일이 생겼을때 실행할 함수를 지정합니다. methods의 값으로는 Javascript 객체를 전달합니다. 이때, 기존의 data는 그 자체로 함수이자 메서드라면 methods는 메서드 및 함수로 만들어진 객체를 찾습니다. const app = Vue.createApp({ data: function() { return { courseGoal: 'Finish the c..

Vue를 이용한 DOM 상호작용 Vue를 HTML의 어느 부분에 적용할지를 정해서 해당 HTML 태그를 제어할 수 있습니다. Vue Course Goals My Course Goal 위 코드에서 Section 요소 전체를 Vue로 컨트롤 해보겠습니다. (Vue로 HTML 태그를 제어할 경우, 해당 요소의 하위 요소도 컨트롤이 가능합니다) const app = Vue.createApp(); app.mount('#user-goal'); 위 코드에서 Vue 앱을 변수에 선언해주고, 컨트롤 할 HTML 태그의 CSS 선택자인 id를 mount()의 인자로 넣어줍니다. mount() 안에는 문자열이 들어가며 CSS 선택자를 넣으면 해당 HTML 태그와 연결된다는 의미입니다. 보간법 (Interpol..