Vue 따라해보기

개발환경세팅

• codesandbox.io/dashboard

   

  1. new Sandbox 클릭

  

   

  2. Vue 템플릿 생성

   

  

  

   

  ---

   

• VSCode

  $npm install -g @vue/cli ... # or $yarn global add @vue/cli ... # after install # 특정 폴더로 이동하여 $vue create project-name

  

  

  yarn serve 혹은 npm serve 를 통해 실행시킨다.

  

  

해당 글은 VSCode 형식으로 작성됨

---

HTML태그 사이에 Data 전달하기

src/App.vue 싱글컴포넌트 형태로 사용  <template>   <div id="app">     <img alt="Vue logo" src="./assets/logo.png" /> 			<!-- 머스태치 -->     <h1>{{ title }}</h1> 			<!-- Directive --> 		<h1 v-text="title" />   </div> </template>  <script> export default {   name: "App", //data는 함수로 초기화한다   data() {     return {       title: "Hi, My name is Vue!",     };   }, }; </script>

 

---

 

메서드 사용하기

<template>   <div id="app">     <img alt="Vue logo" src="./assets/logo.png" />     <h1>{{ title }}</h1> 			<!-- Directive -->     <button v-on:click="hi">인사</button> 			<1-- Directive 약어 -->     <button @click="whoru">넌 누구니?</button>   </div> </template>  <script> export default {   name: "App", // 컴포넌트 형태 사용시, data는 함수로 초기화한다   data() {      return {       title: "Hi",     };   },   methods: {     whoru() {       console.log("whoru");       this.title = "Who are you??"; 			// this는 Vue instance를 가르킨다.     },     hi() {       console.log("hi");       this.title = " My name is Vue";     },   }, }; </script>

 

 

---

Directive의 여러 형태

📒Directive(v-)

---

 

상위컴포넌트 → 하위컴포넌트 데이터 전달하기

1. this.$root 와 this.$parent

src/App.vue (상위 컴포넌트) <template>   <div id="app">     <img alt="Vue logo" src="./assets/logo.png" />     <h1>{{ title }}</h1>     <button v-on:click="hi">인사</button>     <button @click="whoru">넌 누구니?</button> 		<!-- 하위컴포넌트(join)에게 title을 내려준다. -->     <join v-bind:props="title" />   </div> </template>  <script> import join from "./components/join"; export default {   name: "App",   data() {     return {       title: "Hi",     };   },   components: {     join,   },   methods: {     whoru() {       console.log("whoru");       this.title = "Who are you??";     },     hi() {       console.log("hi");       this.title = " My name is Vue";     },   }, }; </script>

<template>   <div class="join"> 		<h2>Join.vue</h2>     <label>컴포넌트 데이터 통신</label>      <p>{{ this.$parent.title }}</p>   </div> </template> <script> export default {   name: "join", }; </script>

해당 컴포넌트의 바로 상위 컴포넌트는 .$parent 로 받아오고, 최상위 컴포넌트는 .$root 로 받아올 수 있다.

제일 간단한 방식이지만, 프로젝트가 커지게 되면 이를 이용한 수정을 했을때 이벤트 추적이 어려워 질 수 있다. 권장하진 않지만 가장 단순하게 컴포넌트간 데이터 통신을 활용 할 수 있는 방식이다.

 

 

2. v-bind 와 props, v-on 이벤트와 $emit 이용

src/App.vue <template>   <div id="app">     <img alt="Vue logo" src="./assets/logo.png" />     <h1>{{ title }}</h1>     <button v-on:click="hi">인사</button>     <button @click="whoru">넌 누구니?</button>     <join :sended="title" @event-data="setTitle" />   </div> </template>  <script> import join from "./components/join"; export default {   name: "App",   data() {     return {       title: "Hi",     };   },   components: {     join,   },   methods: {     whoru() {       console.log("whoru");       this.title = "Who are you??";     },     hi() {       console.log("hi");       this.title = " My name is Vue";     },     setTitle(title) {       this.title = title;     },   }, }; </script>

src/components/join.vue  <template>   <div class="join">     <h2>Join.vue</h2>     <label>컴포넌트 데이터 통신</label>     <p>{{ this.sended }}</p>     <button @click="sendEditData">내용바꾸기</button>   </div> </template> <script> export default {   name: "join",   props: ["sended"],   methods: {     sendEditData() {       console.log("Data 수정 후 상위 컴포넌트 전달");       let title = "나는 뷰라구해";       this.$emit("event-data", title);     },   }, }; </script>

 

Uploaded by Notion2Tistory v1.1.0