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..

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

어떠한 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에서 볼 수 있듯이, ..

인터넷이 느릴경우 우리는 불가피하게 expression을 들어내는 경우가 있다. 이럴 경우, 인터넷이 느린 지역에서 서비스에 접근했을때 expression만 보이는 불행한 사태가 벌어질 수 있다. 이를 방지하기 위해서, 우리는 v-cloak라는 directive를 사용할 수 있다. {{ fullName() }} v-cloak라는 directive를 vue template에 넣고, [v-cloak] { display: none; } 해당, 속성에 대해서 display:none을 넣을 경우, vue instance가 실행되기 전까지, 안보였다가 실행이 완료되면 원하는 데이터가 보이게 할 수 있다.

Vue template 안에서 복잡한 계산을 하는것은 장려되지 않는다. 그렇다면, data를 가공해서 보여지기 위해서는 어떻게 해야할 것인가? 이를 위해서 vue에서는 method라는 기능을 제공한다. const vm = Vue.createApp({ data() { return { firstName: 'John', lastName: 'Doe', }; }, methods: { fullName() { return `${this.firstName} ${this.lastName.toUpperCase()}`; }, }, }).mount('#app'); arrow function에 익숙한 사람들은 충동적으로 arrow function을 사용하겠지만, this를 사용하기 위해서는 일반함수 선언방식을 사용해야한다. (..