vue2.* 目錄結構分析 數據綁定 循環渲染數據 數據渲染02
阿新 • • 發佈:2018-08-29
urn 綁定 靜態資源 asset 國際新聞 default pre 名稱 node
一、目錄 結構分析
node_modules:項目依賴文件(也可以說是模塊)
src:開發時所用的資源
assets:靜態資源文件
App.vue:根組件(最基礎的公共頁面)
main.js:實例化vue,引入基礎組件
package.json:項目配置文件(管理項目的名稱,版本號,需要的模塊等)
vue.config.js:vue配置文件
二、 數據綁定 循環渲染數據 數據渲染
<template>
<div id="app">
<!-- 綁定數據 --> <h2>{{msg}}</h2>
<br>
<!-- 綁定對象數據 -->
<h3>{{obj.name}}</h3>
<br>
<!-- 循環數組數據 -->
<ul>
<li v-for="item in list">
{{item}}
</li>
</ul><br>
<!-- 循環數組中的對象數據 -->
<ul>
<li v-for="item in list1">
{{item.title}}
</li>
</ul>
<!-- 循環嵌套數據 -->
<ul>
<li v-for="item in list2">
{{item.cate}}
<ol>
<li v-for="news in item.list">
{{news.title}}
</li>
</ol>
</li>
</ul><br>
</div>
</template>
<script> export default { data () {/*業務邏輯裏面定義的數據*/
return {
msg:‘你好,世界‘,
obj:{
name:"張三"
},
list:[1,2,3],
list1:[
{‘title‘:1},
{‘title‘:2},
{‘title‘:3},
{‘title‘:4}
],
list2:[
{
"cate":"國內新聞",
list:[
{"title":國內新聞1},{"title":國內新聞2},
{"title":國內新聞3}
]
},
{
"cate":"國際新聞",
list:[
{"title":國際新聞1},
{"title":國際新聞2},
{"title":國際新聞3}
]
}
]
}
} } </script>
vue2.* 目錄結構分析 數據綁定 循環渲染數據 數據渲染02