본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Section2] 22. 이벤트 및 메서드(methods옵션) Add 현재 HTML코드에서 counter를 업데이트한다. Vue의 제어부분이지만 HTML코드에 속한다. 하지만 이건 좋은 방법이 아니다. HTML코드에 로직을 너무 많이 넣으면 안된다. HTML코드는 '출력'에 집중해야한다. 로직은 JavaScript에 있어야 HTML코드가 간결해진다. 이런 접근 방식과 패턴으로 시작하는게 좋다. counter++는 너무 복잡하지는 않아도 JavaScript코드에 들어가야한다. 그렇다면 이 로직을 어떻게 JavaScript 코드에 넣을까? → 호출할 수 있는 함수로 작성! Add버튼을 클릭할 때 호출할 수 있는 함수와 Reduce버튼을 클릭할 때 호출할 수 있는 함수 필요. function add(){ counter = counter + 1; } //이렇게 작성하면 작..
[Udemy Vue 완벽가이드 Section2] 21. 이벤트 바인딩 이해하기(v-on) 사용자 입력 데이터나 이벤트에도 반응하는 동적 페이지를 만들고 싶다. 이런 이유로 Vue같은 프레임워크를 사용한다. 이런 프레임워크로 높은 수준의 반응형이자 동적인 웹 애플리케이션을 쉽게 만들 수 있다. 더 활발히 상호작용하고 반응하는 웹 애플리케이션을 만들기 위해, 사용자 입력 데이터에 따라 반응하는 방법과 Vue를 활용하는 방법에 대해 알아보자. example: Add버튼을 누르면 counter에 1이 추가 되고, Reduce버튼을 누르면 counter에 1이 줄어들도록 해보자. Vanilla JS로 작성 시, document.getElementById로 버튼에 접근하거나 querySelector를 이용하여 addEventListener메서드로 이벤트 리스너를 추가할 수 있다. document.que..
이벤트 리스너(event listener) : 특정 이벤트가 발생했을 때, 실행되는 함수. 이벤트 핸들러(event handler)라고도 한다. 여기서 이벤트는 웹페이지에서 발생하는 사용자의 행동(마으수 클릭, 키보드 입력 등)이나 웹페이지의 상태 변화(로딩 완료, 타이머 종료 등)를 나타낸다. JavaScript에서는 DOM요소에 이벤트 리스너를 등록할 때는 addEventListener 함수를 사용. DOM객체.addEventListener(이벤트명, 이벤트리스너) const button = document.getElementById('myButton'); //HTML에서 id가 'myButton'인 요소 가져오기 button.addEventListener('click', function(){ // 버튼이 클릭 되었을때 실행되는 함수(이벤트리..
[Udemy Vue 완벽가이드 Section2] 20. 첫 번째 요약 - Vue 앱을 만드는 방법, mount를 이용하여 앱을 HTML 코드와 연결하는 방법 - Vue 앱은 하나의 HTML 요소에만 연결할 수 있으니, id선택자와 같은 고유 CSS 선택자를 사용. const app = Vue.createApp({}); // createApp함수를 이용하여 Vue앱을 만듦. app.mount('#user-goal'); //생성된 Vue앱의 메서드인 mount를 이용하여 HTML코드와 연결. //id선택자와 같은 고유 CSS 선택자를 사용하여 하나의 HTML요소에만 연결. - Vue로 요소를 제어하는 경우, 자식 요소도 자동으로 제어 가능 - But, Vue가 제어하는 HTML 요소 이외의 다른 요소는 제어 불가능 - Vue가 제어하는 HTML 요소에서는 특수 기능을 사용할 ..
[Udemy Vue 완벽가이드 Section2] 19. v-html을 사용하여 원시 HTML콘텐츠 출력하기 보간법(이중 중괄호), v-bind 디렉티브와 같은 데이터 출력과 관련된 중요한 기능은 거의 다 배웠고, 메서드를 호출한 결과를 출력할 수도 있다. 하나 더 배워야 할 디렉티브가 있다. const app = Vue.createApp({ data(){ return { courseGoalA: "Finish the course and learn Vue!", courseGoalB: "Master vue and build amazing apps!", } }, methods: { outputGoal() { const randomNumber = Math.random(); if(randomNumber < 0.5) { return this.courseGoalA; } else { return this.courseGoalB..
[Udemy Vue 완벽가이드 Section2] 18. Vue앱 내에서 데이터 작업하기 (this가 무엇인지) Vue애플리케이션을 만드는 방법(createApp함수)과 데이터를 출력(보간법)하고 속성에 데이터를 바인딩하는 방법(v-bind)을 배웠다. data속성에 데이터를 설정하건, HTML 코드에서 해당 데이터를 참조할 수도 있고, methods를 정의하여 호출할 수도 있다. Vue에서 데이터를 가지고 작업하는 방식에 대해 알아보자. const app = Vue.createApp({ data(){ return { courseGoalA: 'Finish the course and learn Vue!', courseGoalB: 'Master Vue and build amazing apps!', vueLink: 'https://vuejs.org/' } }, methods: { outputGoal(){ const ra..
[Udemy Vue 완벽가이드 Section2] 17. Vue앱의 '메서드' 이해하기 HTML 코드에 Vue가 관리하는 '데이터'를 출력하거나 사용하는데 필요한 주요기능 : 보간법(여닫는 HTML 태그), v-bind(HTML 속성) 이제 애플리케이션을 좀 더 동적으로 만들어 볼 예정이다. methods 옵션 - 호출 및 버튼 클릭과 같은 '사용자 이벤트'가 발생하는 일이 생겼을 때 실행할 수 있는 함수를 정의. - methods에는 JavaScript 객체를 전달한다. (cf: data 옵션과 다른 점 : data는 그 자체로 함수이자 메서드) const app = Vue.createApp({ data(){}, //또는 data: function{} 이렇게 함수 또는 메서드 methods: { // 메서드 및 함수로 만들어진 '객체'. 객체에 정의하는 프로퍼티는 항상 '함수'여야 한다...
[Udemy Vue 완벽가이드 Section2] 16. 'v-bind'디렉티브로 속성 바인딩하기 데이터 출력 시, 항상 보간법만 사용해야 하는건 아니다. # 속성 바인딩에 보간법 사용시 보간법 예시: link를 걸 때, Vue앱을 이용하여 data 프로퍼티에 link값(ex: https://vuejs.org/)을 저장하고, 구문(ex: {{ vueLink }})을 추가하여 저장된 값을 출력해보자. index.html Learn more about Vue app.js const app = Vue.createApp({ data(){ return { vueLink: 'https//vuejs.org/' } } }); app.mount('#user-goal'); data 반환객체에 vueLink 프로퍼티를 추가하고, href="{{ vueLink }}" 이렇게 적어보자. 활성화된 'about Vue'를 클릭..

티스토리툴바