구성 요소가 vue에 표시되지 않습니다

Question

정말 vue 구성 요소가 없습니다 .... 내 html에 vue 구성 요소가 있고 표시하고 싶지만 아무 것도 표시하지 않습니다. 무엇이 잘못 되었나요? vue에 구성 요소를 등록하고 표시하는 적절한 방법은 무엇입니까? 누군가 초보자에게 간단한 예를 들어 줄 수 있습니까? :)

이

내 코드입니다 :이 펜에

HTML

<div id="na-vue-app"> 
<activity-filter> 
    <template> 
    'Some Text' 
    </template> 
</activity-filter> 
</div> 

뷰는

new Vue({ 
el: '#na-vue-app' 
}); 

const filterActivity = Vue.extend({ 
data: function() { 
    return { 
     distance:100, 
    } 
    }, 
    mounted() { 

}, 
methods: { 
} 
}); 

Vue.component('activity-filter', filterActivity); 

Answer 1

봐 : https://codepen.io/Nartub600/pen/oopBYJ

HTML

<div id="app"> 
    <my-component msg="Hi!"> 
    </my-component> 
</div> 

JS

Vue.component('my-component', { 
    props: ['msg'], 
    template: '<p>{{ msg }}</p>' 
}) 

var app = new Vue({ 
    el: '#app' 
}) 

그것은 내가 생각하는 구성 요소를 시도 할 수있는 가장 쉬운 형태의