Category: Vue3

2024
0
FrontendVue3

Vue3 - Component 간 통신

목차 Vue3 - Component 간 통신 Vue3 - Component Vue3 - Composition API Vue3 - Instance Vue3 - Reactivity Vue3 - 시작하기 Component 간 통신 - PropsVue 에서는 상위 컴포넌트에서 하위 컴포넌트로 통신하기 위한 방법으로 Props 를 제공합니다. Props 를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 내려줍니다. 하위 컴포넌트에서 전달 받은 Props 를 사용하기 위해v-bind 를 이용해 Props 이름=”상위컴포넌트의 데이터이름“ 형식으로 Props 를 매팽해 줍니다. <div id="app"> <app-header v-bind:title="appTitle"></app-header></div><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script> Vue.createApp({ data() { return { appTitle: '프롭스 넘기기' } }, components: { // '컴포넌트 이름': 컴포넌트 내용 'app-header': { template: '<h1>{{title}}</h1>', props: ['title'] } } }).mount('#app')</script> Component 간 통신 - Event하위 컴포넌트에서 상위 컴포넌트와 통신하기 위한 방법으로는 Event 를 제공합니다. <div id="app"> <app-content v-on:refresh="showAlert"></app-content></div><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script> var appContents = { template: ` <p> <button v-on:click="sendEvent">갱신</button> </p> `, methods: { sendEvent() { this.$emit('refresh'); } } } // Root 컴포넌트 Vue.createApp({ methods: { showAlert() { alert('새로고침') } }, components: { // '컴포넌트 이름': 컴포넌트 내용 'app-content': appContents } }).mount('#app')</script>

0
FrontendVue3

Vue3 - Component

목차 Vue3 - Component 간 통신 Vue3 - Component Vue3 - Composition API Vue3 - Instance Vue3 - Reactivity Vue3 - 시작하기 ComponentComponent 란 하나의 화면을 여러개의 블록으로 나눌 수 있는 단위입니다. Component 를 통해 빠르게 화면을 구조화할 수 있고 코드 재사용성이 늘어납니다. Vue 에서는 Component 를 이용한 개발을 지원합니다. 한 페이지에서 하위 컴포넌트 생성components 내 template 을 이용하면 상위 컴포넌트에서 바로 하위 컴포넌트 내용을 정의할 수 있습니다. Vue.createApp({ components: { // '컴포넌트 이름': 컴포넌트 내용 'app-header': { template: '<h1>컴포넌트 이름</h1>' } }}).mount('#app') 정의된 하위 컴포넌트는 컴포넌트 이름을 통해 상위 컴포넌트에서 사용할 수 있습니다. <div id="app"> <app-header></app-header></div>

0
FrontendVue3

Vue3 - Instance

목차 Vue3 - Component 간 통신 Vue3 - Component Vue3 - Composition API Vue3 - Instance Vue3 - Reactivity Vue3 - 시작하기 Vue 3 Instance 와 속성Vue.createApp({ template: , data: , methods: , created: , watch: ,}); methods<div id="app"> <p>{{count}}</p> <button v-on:click="addCount">+</button></div><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script> Vue.createApp({ data() { return { count: 0 } }, methods: { addCount() { this.count++; } } }).mount('#app')</script> Vue Directivev-for<div id="app"> <ul> <li v-for="item in items">{{item}}</li> </ul></div><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script> Vue.createApp({ data() { return { items: ['삼성', '네이버', '인프런'] } } }).mount('#app')</script>

0
FrontendVue3

Vue3 - Composition API

목차 Vue3 - Component 간 통신 Vue3 - Component Vue3 - Composition API Vue3 - Instance Vue3 - Reactivity Vue3 - 시작하기 Composition API 로 리펙토링Composition API 적용 전export default { methods: { logText() { this.pas } } data() { return { username: '', password: '', } }, methods: { submitForm() { // event.preventDefault(); const data = { username: this.username, password: this.password, } axios.post('https://jsonplaceholder.typicode.com/users/', data) .then(response => { console.log(response) }); // console.log('제출됨') } }} Composition API 적용 후export default { setup() { // data var username = ref(''); var password = ref(''); // methods var submitForm = () => { axios.post('https://jsonplaceholder.typicode.com/users/', { username: username.value, password: password.value }).then(response => { console.log(response); }) } return { username, password, submitForm } },}

0
FrontendVue3

Vue3 - Reactivity

목차 Vue3 - Component 간 통신 Vue3 - Component Vue3 - Composition API Vue3 - Instance Vue3 - Reactivity Vue3 - 시작하기 ReactivityProxy 참고 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy set target 객체 property 객체내 속성 value 전달 받는 값 <div id="app"></div><!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> --><script> var data = { message: 10 } function render(sth) { var div = document.querySelector('#app'); div.innerHTML = sth; } var app = new Proxy(data, { get() { console.log('값 접근') }, set(target, prop, value) { console.log('값 갱신') target[prop] = value render(value) } })</script> app.message = 'hello vue';

0
FrontendVue3

Vue3 - 시작하기

목차 Vue3 - Component 간 통신 Vue3 - Component Vue3 - Composition API Vue3 - Instance Vue3 - Reactivity Vue3 - 시작하기 CDN 으로 시작하기<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><div id="app">{{ message }}</div><script> const { createApp } = Vue createApp({ data() { return { message: 'Hello Vue!' } } }).mount('#app')</script>

0
FrontendVue3

Vuex 시작하기

라이브러리 등록# Vue 3 npm install vuex --save# Vue 2npm install vuex@3.6.2 --save Store 생성 Vue 2 에서 Store 생성 const Store = new Vuex.Store({ state: {}, getters: {}, mutations: {}, actions: {}, modules: {},}) Vue 3 에서 Store 생성 import { createStore } from "vuex";export default createStore({ state: {}, getters: {}, mutations: {}, actions: {}, modules: {},}); Store 등록 Vue 2 에서 Store 등록