Muscardinus

Class Binding과 거의 비슷하다. :style에 하나의 객체를 넣고, 그 안에 원하는 속성에 대해서 값을 넣으면 된다 Hi!

class를 Vue Instance의 데이터 혹은 다른 값에 따라서 동적으로 바꾸고 싶을 때가 있을 것이다. 그럴 경우, Purple Hi! .purple{ background-color: #767DEA; } 이와 같이 :class를 선언하고 내부에 하나의 객체를 넣으면 된다. 그리고 원하는 class이름과 그에 따른 조건을 넣어주면 된다. 이러면, isPurple가 true일때, class에는 circle와 purple의 class가 적용될 것이다. 하지만, 더 많은 class를 동적으로 바꾸고 싶을 때가 있다. 이럴 때, computed를 사용하는 것이 좋다. let vm = Vue.createApp({ data() { return { isPurple: false, }; }, computed: { c..

watch는 computed와는 다르게 내부에서 비동기 작업 또는 필요 부가적인 작업 실행 등을 할 때 활용 될 수 있다. 또한, 반환을 반드시 할 필요가 없다. const vm = Vue.createApp({ data() { return { firstName: 'John', middleName: '', lastName: 'Doe', url: 'https://google.com', raw_url: 'Google', age: 20, }; }, methods: { increment() { return this.age++; }, decrement() { return this.age--; }, updateLastName(msg, event) { event.preventDefault(); console.log(m..

지금까지 우리는 데이터들을 한개 또는 여러개를 활용하여 값을 나타낼때, methods를 사용하였다. 이 방법도 좋지만, 이럴 경우 항상 다른 method로 인하여도 굳이 재render가 발생할 수 있다. 이를 보완하기 위해서 compute가 사용되고 있다. computed를 사용하면, Vue에서 알아서 해당 값이 또 rendering되야하는지를 판단해준다. 그 판단의 기준은 compute 내부에 있는 data가 변했는가에 따라서이다. 변화가 없으면 값을 caching한다. React를 사용해봤다면, useEffect의 의존배열과 비슷하다고 생각 할 수 있다. const vm = Vue.createApp({ data() { return { firstName: 'John', middleName: '', la..

https://v3.vuejs.org/guide/events.html#event-modifiers Event Handling | Vue.js Event Handling Learn how to handle events in a free Vue School lesson Listening to Events We can use the v-on directive, which we typically shorten to the @ symbol, to listen to DOM events and run some JavaScript when they're triggered. The usage would be v3.vuejs.org 해당 글에 볼 수 있듯이, 우리는 불필요한 dom event들을 신경 안쓰고, Logic에..

어떠한 tag에 대해서 event(click, focus ....)에 따른 method의 실행을 위해서 v-on을 사용할 수 있다. {{ fullName() }} Google {{ age }} First Name Last Name Increment Decrement 또한 v-bind와 같이 단축키로 Increment Decrement 를 사용할 수 있다 그 전에 v-model에 관련하여 설명한 적이 있었다. v-model을 통하여 data의 변화를 추적할 수 있다. 또다른 방법으로는, 위와 같이, value로 해당하는 data를 바라보고, @input을 사용하여 선언한 method에 따라서 lastName 값이 변하게 할 수 있다. methods: { updateLastName(event) { this...

html의 특정 속성에 동적으로 데이터를 넣고 싶을 때가 있을 것이다, 이런 경우 우리는 v-bind를 사용하여 해당 속성에 원하는 데이터를 넣을 수 있다. {{ fullName() }} Google First Name Last Name const vm = Vue.createApp({ data() { return { firstName: 'John', lastName: 'Doe', url: 'https://google.com', }; }, methods: { fullName() { return `${this.firstName} ${this.lastName.toUpperCase()}`; }, }, }).mount('#app'); 또한, 편의를 위해서 v-bind를 생략해도 된다. Google

데이터의 양방향 바인딩을 위해서 우리는 v-model을 사용한다. 양방향 바인딩을 쉽게 표현하자면, html에서의 data 변화가 있으면 js에도 반영이되고 반대로 js에서 data의 변화가 있으면 html에서도 해당하는 data에서 변화가 있는 것이다. const vm = Vue.createApp({ data() { return { firstName: 'John', lastName: 'Doe', }; }, methods: { fullName() { return `${this.firstName} ${this.lastName.toUpperCase()}`; }, }, }).mount('#app'); {{ fullName() }} First Name Last Name html의 input에서 볼 수 있듯이, ..