一、目录结构分析
node_modules 项目所需要的各种依赖
src 开发用的资源
assets 静态资源文件
App.vue 根组件
main.js 配置路由时会用
.babelrc 配置文件
.editorconfig 编辑器的配置文件
.gitignore 忽略的配置文件
index.html html入口文件，一般写移动端在这里添加
package.json 项目配置文件，管理名称描述作者版本号之类的
readme.md 项目的说明文件
webpack.config.js webpack的配置文件将.vue的文件打包成可被网页解析的文件
注释：vue的模版里所有的内容都要被一个根节点包含起来
二、数据绑定
export defoult 表示把这个组件暴露出去
name：** 表示给这个组件起的名字
data(){
msg:" 业务逻辑里面定义的数据", //用{{msg}}调取
obj:{name:"获取对象里面的数据"}， //用{{obj.name}}
list:[111,222,333] // 用 v-for=“a in list” 然后 {{a}} 循环数据
list1:[
{'title':'111'},
{'title':'222'},
{'title':'333'},
{'title':'444'},
], // v-for="item in list1" {{item.title}}
//v-for="{item,key} in list1" {{key}} --- {{item.title}} key 是索引值
list2:[
{"cate":"国内新闻"
"list":[{'title':'国内111'},
{'title':'国内222'},
{'title':'国内333'},
{'title':'国内444'},]},
{"cate":"国际新闻"
"list":[{'title':'国际111'},
{'title':'国际222'},
{'title':'国际333'},
{'title':'国际444'},]}
] //嵌套循环<ul> <li v-for="item in list2"> {{item.cate}} <ol><li v-for="news in item.list" > {{news.title}} </li></ol></li></ul>
}
三、绑定属性
v-bind:title="业务逻辑定义的属性的名称" 简写： :title="业务逻辑定义的属性的名称" 或 v-text="" //绑定动态属性
四、绑定Html
v-html="带有Html标签"
五、绑定class
v-bind:class="{'class名称:'判断条件','class名称:'判断条件'}" // :class简写
六、绑定style
v-bind:style="{宽度值+'px'}" //动态设定元素的样式