<!DOCTYPE html>
<body>
<script url="https://vue.next@"></script>
<script>
const vm = Vue.createApp({
data() {
return {
books: [
{title: 'Java无难事'},
{title: 'VC++深入详解'},
{title: '元元'}
]
}
}
})
</script>
</body>
</html>
报错:34.html:7 Uncaught ReferenceError: Vue is not defined
at 34.html:7
修改
<!DOCTYPE html>
<body>
<script url="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
books: [
{title: 'Java无难事'},
{title: 'VC++深入详解'},
{title: '元元'}
]
}
}
}).amount("#app")
</script>
</body>
</html>
还这样
又改
<!DOCTYPE html>
<body>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
books: [
{title: 'Java无难事'},
{title: 'VC++深入详解'},
{title: '元元'}
]
}
}
}).amount("#app")
</script>
</body>
</html>
报错:
34.html:17 Uncaught TypeError: Vue.createApp(…).amount is not a function
at 34.html:17
<!DOCTYPE html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
books: [
{title: 'Java无难事'},
{title: 'VC++深入详解'},
{title: '元元'}
]
}
}
}).amount("#app")
</script>
</body>
</html>
还报错,跟上面一样
改
<!DOCTYPE html>
<body>
<div id="app">
<li>
<p v-for="book in books">book</p>
</li>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
books: [
{title: 'Java无难事'},
{title: 'VC++深入详解'},
{title: '元元'}
]
}
}
}).amount("#app")
</script>
</body>
</html>
title没放,
一开始以为放在books这里呢
原来不是
原来是放到插值这里
一放解千愁
<!DOCTYPE html>
<body>
<div id="app">
<li>
<p v-for="book in books">{{ book.title }}</p>
</li>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
books: [
{title: 'Java无难事'},
{title: 'VC++深入详解'},
{title: '元元'}
]
}
}
}).amount("#app")
</script>
</body>
</html>
li标签,不是
标签,为啥不是p呢?
不明白
<!DOCTYPE html>
<body>
<div id="app">
<li v-for="book in books">{{ book.title }}</li>
</li>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
books: [
{title: 'Java无难事'},
{title: 'VC++深入详解'},
{title: '元元'}
]
}
}
}).amount("#app")
</script>
</body>
</html>
还是不行。
v-for循环咋没出来?
怎么还报这个错?
34.html:23 Uncaught TypeError: Vue.createApp(…).amount is not a function
at 34.html:23
<!DOCTYPE html>
<body>
<div id="app">
<li v-for="book in books">{{ book.title }}</li>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
books: [
{title: 'Java无难事'},
{title: 'VC++深入详解'},
{title: '元元'}
]
}
}
}).amount('#app')
</script>
</body>
</html>
加了ul也还是不行
<!DOCTYPE html>
<body>
<div id="app">
<ul>
<li v-for="book in books">{{ book.title }}</li>
</ul>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
books: [
{title: 'Java无难事'},
{title: 'VC++深入详解'},
{title: '元元'}
]
}
}
}).amount("#app")
</script>
</body>
</html>
多写了一个a,写成amount了?!!
<!DOCTYPE html>
<body>
<div id="app">
<ul>
<li v-for="book of books">{{ book.title }}</li>
</ul>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data() {
return {
books: [
{title: 'Java无难事'},
{title: 'VC++深入详解'},
{title: '元元'}
]
}
}
}).mount('#app')
</script>
</body>
</html>
终于好了
ul有什么作用?
与li一起使用,定义无序列表
没看出来没有ul只有li有什么不一样