Muscardinus

지금까지 우리는 데이터들을 한개 또는 여러개를 활용하여 값을 나타낼때, 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를 사용하기 위해서는 일반함수 선언방식을 사용해야한다. (..

Vue.createApp({ data() { return { firstName: 'John', }; }, }).mount('#app'); data라는 함수 안에 object를 반환함으로서 vue-template에서 사용할 수 있다. 사용하기 위해서는 {{ firstName }} 위와 같이 {{ }}를 사용한다. Vue에서 자체적으로 {{ }} 안의 expression을 찾아내서 바꾼다. Vue는 Proxy를 사용하여 데이터를 관리한다. 따라서, 추후에 값을 변화하기 위해서는 vm.$data.firstName = "Bob"; 위와 같이 바꿔야하지만, 우리에게 편의를 주기위해서 $data 없이도 바꿀 수 있게 도와준다. 따라서, 만일 firstName을 2초 후에 바꾸고 싶으면 아래와 같이 작성이 가능하다..

https://v3.vuejs.org/guide/installation.html#vite Installation | Vue.js Installation Vue.js is built by design to be incrementally adoptable. This means that it can be integrated into a project multiple ways depending on the requirements. There are four primary ways of adding Vue.js to a project: Import it as a CDN package on v3.vuejs.org 해당 링크에는 여러가지 방법으로 Vue를 실행시킨다. 그 중 가장 간단한 CDN 방법을 사용하겠다. 해..