인프런 커뮤니티 질문&답변

vue의 공식홈페이지를 참조하면 예제가 나와있습니다.  

참조하시면 도움이 될거 같아 가져왔습니다.

위 코드에서 appContent라는 변수에 담겼고, template에 있는 코드들이 html단으로 뿌려주게 되면, 스크립트단에서 지정해준 데이터는 

문자열

데이터 바인딩의 가장 기본 형태는 “Mustache” 구문(이중 중괄호)을 사용한 텍스트 보관입니다.

<span>메시지: {{ msg }}</span>

Mustache 태그는 해당 데이터 객체의 msg 속성 값으로 대체됩니다. 또한 데이터 객체의 msg 속성이 변경될 때 마다 갱신됩니다.

이렇게 들어오게 되니까요.저도 공부하는 단계라 공식문서 찾아보시면 도움될겁니다!!

var Comp = Vue.extend({
  props: ['msg'],
  template: '<div>{{ msg }}</div>'
})

var vm = new Comp({
  propsData: {
    msg: 'hello'
  }
})

Vue.component('child', {
  // props 정의
  props: ['message'],
  // 데이터와 마찬가지로 prop은 템플릿 내부에서 사용할 수 있으며
  // vm의 this.message로 사용할 수 있습니다.
  template: '<span>{{ message }}</span>'
})

@인표님 대신 답변해 주셔서 감사합니다. 딩띵님 제가 답변 확인이 늦었네요. 혹시 또 궁금하신거 있으면 말씀해 주세요 :)