< html lang= "en" >
< head >
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> < / head >
< body >
<!-- TODO: -->
<div id="app">
<Apptext
v-for="item in list"
:eatList="item"
v-bind:key="item.id"
></Apptext>
</div>
<script>
var app = new Vue({
el: "-sharpapp",
components:{
Apptext:appText
},
data: {
list:[
{ id: 0, text: "" },
{ id: 1, text: "" },
{ id: 2, text: "" }
]
},
})
var appText = {
props:["eatList"],
template: "<li>{{ eatList.text }}</li>"
}
</script> < / body >
< / html >
A recent example of learning vue, to read official documents is rewritten by itself with local components, but browsers always report errors, but there is no problem with global components
