一、目录 结构分析
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>