목표

Vue 구성 요소 간에 사용되는 다양한 지식 요약

환경

Windows10
node v12.2.0
@vue/cli 4.1.1
vue v2.6.10

어셈블리 기본(정의 및 사용)

구성 요소 끝
src/components/buttonCounter.vue

<template>
  <button v-on:click="count++">You clicked me {{ count }} times.</button>
</template>

<script>
export default {
  data: function() {
    return {
      count: 0
    };
  }
};
</script>

호출자
src/App.vue

<template>
  <div id="app">
    <buttonCounter/>
  </div>
</template>

<script>
import buttonCounter from './components/buttonCounter.vue'

export default {
  components: {
    buttonCounter
  }
}
</script>

데이터 전달

정적 데이터

src/components/blogPost.vue

<template>
  <h3>{{ title }}</h3>
</template>

<script>
export default {
  props: ["title"]
};
</script>

src/App.vue

<template>
  <div id="app">
    <blogPost title="My journey with Vue"></blogPost>
    <blogPost title="Blogging with Vue"></blogPost>
    <blogPost title="Why Vue is so fun"></blogPost>
  </div>
</template>

<script>
import blogPost from "./components/blogPost.vue";

export default {
  components: {
    blogPost
  }
};
</script>

변수 사용

v-bind를 이용하여 수치 전달을 진행하다

결과는 상술한 것과 같다

src/App.vue

<template>
  <div id="app">
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:title="post.title"
    ></blog-post>
  </div>
</template>

<script>
import blogPost from "./components/blogPost.vue";

export default {
  components: {
    blogPost
  },
  data: function() {
    return {
      posts: [
        { id: 1, title: "My journey with Vue" },
        { id: 2, title: "Blogging with Vue" },
        { id: 3, title: "Why Vue is so fun" }
      ]
    };
  }
};
</script>

여러 bind가 필요한 경우

src/components/blogPost.vue

<template>
  <div class="blog-post">
    <h3>{{ post.title }}</h3>
    <div v-html="post.content"></div>
    <div>{{ post.publishedAt }}</div>
    <div>{{ post.comments }}</div>
  </div>
</template>

<script>
export default {
  props: ["post"]
};
</script>

src/App.vue

<template>
  <div id="app">
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post"
    ></blog-post>
  </div>
</template>

<script>
import blogPost from "./components/blogPost.vue";

export default {
  components: {
    blogPost
  },
  data: function() {
    return {
      posts: [
        {
          id: 1,
          title: "My journey with Vue",
          content: "content1",
          publishedAt: "publishedAt1",
          comments: "comments1"
        },
        {
          id: 2,
          title: "Blogging with Vue",
          content: "content2",
          publishedAt: "publishedAt2",
          comments: "comments2"
        },
        {
          id: 3,
          title: "Why Vue is so fun",
          content: "content3",
          publishedAt: "publishedAt3",
          comments: "comments3"
        }
      ]
    };
  }
};
</script>

여기까지 이해하고 읽으면 알 것 같아요.

Vue 공식 가이드# 속성
v-bind에 관해서는 Vue를 조금만 터치하면 이해할 수 있을 것 같지만 상술한 링크 내용을 이해하는 사람은 드물겠죠
개인 요점

속성 형식(낙타 봉지 vs 낙타 봉지)

JavaScript는 낙타봉함, HTML은 낙타봉함입니다

단방향 데이터 흐름

아버지⇒ 자식의 단방향 귀속만 가능합니다

예외: 대상과 그룹은 인용 전달에 사용되기 때문에 서브어셈블리에서 그룹이나 대상을 변경하면 부모 상태에 영향을 줄 수 있습니다

속성 검증

type : String、Number、Boolean、Array、Object、Date、Function、Symbol

type도 사용자 정의 구조 함수이다

비속성

속성 속성이 속성으로 구성 요소에 전달되지 않지만 대응하는 속성은 정의되지 않았습니다