需求：學習vue2.0-數據綁定-循環渲染-數據渲染
效果展示如下
這里只關注App.vue組件，組件規范分為三部分：
1、模板
只能有一個根節點，在內部擴展編輯
<template>
<!-- vue的模板里面，所有的內容要被一個根節點包含起來 -->
<div id="app">
</div>
</template>
2、掛載點
<script>
export default {
name: 'App', //組件名字，無實際含義
</script>
3、樣式
<style>
</style>
4、循環渲染
<li v-for="(item,index) in list" :key="index">
{{ item }}
</li>
5、App.vue組件源碼
樣式部分可以不操作，這里配置只是為了回顧一下樣式基礎知識。
<template>
<!-- vue的模板里面，所有的內容要被一個根節點包含起來 -->
<div id="app">
<h2>你好vue2.0_ _ _{{ msg }}</h2>
這是根組件
<br>
<h3>{{ obj.name }}</h3>
<hr>
<ul class="lis1">
<li v-for="(item,index) in list" :key="index">
{{ item }}
</li>
</ul>
<ul>
<li v-for="(item,index) in list1" :key="index">
{{ item.title }}
</li>
</ul>
<ul>
<li v-for="(item,index) in list2" :key="index">
{{ item.cate }}
<ol>
<li v-for="(item,index) in item.list" :key="index">
{{ item.title }}
</li>
</ol>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'App', //組件名字，無實際含義
data() { //業務邏輯里面定的數據
return {
msg: 'Welcome to Vue2.0',
obj: {
name: "張三"
},
list:['數據綁定','循環渲染','數據渲染'],
list1:[
{'title':'深圳'},
{'title':'廣州'},
{'title':'潮汕'},
],
list2:[
{
"cate":'省內新聞',
"list":[
{'title':'深圳市個人所得稅1月份開始實行'},
{'title':'深圳市人才引進策略'},
{'title':'寶安區西鄉街道消防安全知識培訓'}
]
},
{
"cate":'省外新聞',
"list":[
{'title':'今年樓市最新資訊'},
{'title':'武漢高校研究生雲集'}
]
}
]
}
}
}
</script>
<style>
#app {
background-color:dimgray;
margin: 2rem;
border: 1px black solid;
padding: 2rem;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
background-color: red;
}
.lis1 {
background-color: #ccc ;
font-size: 1.2rem;
color: red;
border: 1px #42667d solid;
}
</style>