<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 1.导入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 2.定义一个 标签 需要给一个标签添加 id -->
<div id="app">
<span>{{message}}</span>
<hr>
<ul>
<li v-for="(item,index) in items"> {{index}} ~~~ {{item}} </li>
</ul>
<hr>
<!-- 对对象进行遍历 -->
<ul>
<li v-for="(value,key) in object">{{key}} {{value}}</li>
</ul>
<hr>
<ul>
<li v-for="todo in todos">{{todo.title}} ---- {{todo.author}}</li>
</ul>
</div>
</body>
<!-- 3.创建vue实例 -->
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
message:'hello',
items:['python','mysql','linux','html','js','css'],
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
},
todos: [
{
title: 'Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
},
{
title: 'python',
author: 'Ricky',
publishedAt: '2019-04-10'
},
{
title: 'itcast',
author: 'itcast',
publishedAt: '2006-05-08'
}
]
}
})
</script>
</html>