Hello worldの表示
初めに動作確認のためhello worldを表示してみる。
sample.html
<head>
<meta charset="utf-8">
<title>Sample</title>
<!-- Vue.js の読み込み -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="sample">{{ message }}</div>
<script>
var sample = new Vue({
el: '#sample',
data: { message: 'Hello world!' }
})
</script>
</body>
HelloWorldが出た！
htmlでidを指定（ここではsample）を指定することでscript(el:'#sample)を呼び出し、
{{message}}部分にdata内容が表示される。
前回の続きだとcomponentsフォルダ直下にsample.vueを作成
components/sample.vue
<template>
<div>
<p>{{ text }}</p>
</div>
</template>
<script>
export default {
data(){
return {
text: "Hello_World!"
}
}
}
</script>
src/App.vue
<template>
<div>
<Sample></Sample>
</div>
</template>
<script>
import Sample from './components/sample.vue'
export default {
components:{
Sample
}
}
</script>
サーバ起動後
http://localhost:8080/
