Muscardinus

let vm = Vue.createApp({}); vm.component('hello', { template: `{{ message }}`, data() { return { message: 'Hello world', }; }, }); vm.mount('#app');

Vue에서 data의 변화를 계속 추적할 수 있는 이유는 Proxy 때문이다. 엑셀을 예로 들어보자 A1 혹은 A2의 값을 바꿈에 따라서 A3의 값은 계속 바뀌는 것을 알 수 있다. 이러한 원리는 Vue에서도 비슷하게 적용된다. 이것을 Reactivity라고 한다. 따라서, Vue의 원리를 묻는다면 Proxy를 활용한 Reactivity 특징을 보인다라고 하면 될 거 같다. Proxy 사용법 const data = { name: "Luis" }; const observedData = new Proxy(data, { set(target, key, value) { target[key] = value; } }); observedData.name = "John"; console.log(observedData.n..

Virtual DOM은 JS객체이다. 실제 DOM의 얕은 복사이다. Virtual DOM에서 data의 비교 및 업데이트를 하는 것이, 실제 DOM에서 하는 것 보다 훨씬 효율적이다.

let vm = Vue.createApp({ data() { return { message: 'Hello world!', }; }, beforeCreate() { console.log('beforeCreate() function called!', this.message); }, created() { console.log('created() function called!', this.message); }, beforeMount() { // template은 compile 됐지만, page에 적용은 아직 안됐다. console.log('beforeMount() function called!', this.$el); }, mounted() { console.log('mounted() function called..

배열 혹은 객체 내의 속성을 보이고 싶을 때가 있다. let vm = Vue.createApp({ data() { return { birds: ['Pigeons', 'Eagles', 'Doves', 'Parrots'], people: [ { name: 'John', age: 20 }, { name: 'Rick', age: 18 }, { name: 'Amy', age: 33 } ] } } }).mount('#app'); {{ bird }} - {{ index }} {{ key }}: {{ value }} - Index: {{ index }}

상황에 따라서 보여지고 싶은것과 보여지기 싫은 부분이 있을 것이다. 이를 위해서 Vue에서는 v-if / v-else-if / v-else가 있다. Showing v-if directive content v-else-if v-else 만일 조건문에 한 덩어리의 html을 넣고 싶으면 Bonus content v-else-if template를 사용하자 v-if 말고, v-show도 있다. v-show v-show로 할 경우, html을 확인할때, 조건이 부합하지 않으면 display:none이라는 style이 들어간다. v-show의 경우 template에 사용할 수 없으며, 주로 toggle에 사용된다.

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