<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--<h2>X are in stock.</h2>-->
<!--<h2> {{product}} are in stock.</h2>-->
<!--为数组中的商品创建列表项-->
<ul>
<li v-for="product in products">
{{product}}
</li>
</ul>
</div>
<script src="https://unpkg.com/vue"></script>
<!--引入Vue库-->
<script>
const app=new Vue({ /*创建一个Vue实例*/
el:'#app', /*通过应用的ID嵌到根元素中,el为element的缩写*/
//将数据放入一个对象,并将X修改为一个表达式，用{{ }}括起来（作用：可以将数据里的对象渲染到模板里）。
data: {
// product: 'Boots'
/*由于vue是响应式的，数据变更时，vue会帮你更新所有网页中用到这些数据的地方,字符串以及其他数据类型也可以*/
products:[
'Boots',
'Jacket',
'stocks'
]
}
})
</script>
</body>
</html>
