Vue 目录结构分析 数据绑定 绑定属性 循环渲染数据 数据渲染

Posted 2020-11-10 ☆☆☆☆☆

一、目录结构分析

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="{width:宽度值+‘px‘}"　　//动态设定元素的样式