根组件App.vue
<template>
<!-- 本文件用于学习vue根组件的各个代码部分的含义 -->
<!-- 下面div包含的内容就是html代码 -->
<!-- vue的模板里面 所有的内容要被一个根节点如：div，包含起来 -->
<!-- <div id="app"> -->
<div>
<!-- 相当于DOM绑定数据 -->
<h2>{{msg}}</h2>
<br>
这是一个根组件
<br>
<h3>{{obj.name}}</h3>
<br>
<hr>
<br />
<ul>
<li v-for="item in list">
{{item}}
</li>
</ul>
<br>
<hr>
<br />
<ul>
<li v-for="item in list1">
{{item.title}}
</li>
</ul>
<br>
<hr>
<br />
<ul>
<li v-for="item in list2">
{{item.cate}}
<ol>
<li v-for="news in item.list">
{{news.title}}
</li>
</ol>
</li>
</ul>
</div>
</template>
<script>
/*js代码*/
// export 未特别说明时，默认将组件apps暴露到外部
export default {
// 定义一个组件名,可以不定义
name: 'apps',
/*业务逻辑里面定义的数据*/
data () {
return {
msg: '你好vue',
obj:{
name:"张三"
},
list:['111','222','333'],
list1:[
{'title':'11111'},
{'title':'222'},
{'title':'333333'},
{'title':'44444'}
],
list2:[
{
"cate":"国内新闻",
"list":[
{'title':'国内新闻11111'},
{'title':'国内新闻2222'}
]
},
{
"cate":"国际新闻",
"list":[
{'title':'国际新闻11111'},
{'title':'国际新闻2222'}
]
}
]
}
}
}
</script>
<style lang="scss">
/*css代码*/
</style>