一,vue基础 数据绑定 列表循环 事件处理
在script标签中
//实例化vue
var app=new Vue({
el:'#box', /*vue实例关联的视图*/
data:{ /*业务逻辑里面的数据*/
msg:'这是一个vue的demo',
result:{
msg:'这是一个对象'
},
list:['111','222','3333'],
list3:[
{cate:'宝马',list:[{title:'宝马x1'},{title:'宝马x1'},{title:'宝马x1'}]},
{cate:'奔驰',list:[{title:'奔驰x1'},{title:'奔驰x1'},{title:'奔驰x1'}]}
]
}
})
在html中
<div id="box">
{{msg}}
{{result.msg}}
<ul>
<li v-for="(item,key) in list">
{{key}}----{{item}}
</li>
</ul>
<ul>
<li v-for="item in list3">
{{item.cate}}
<ol>
<li v-for="i in item.list">
{{i.title}}
</li>
</ol>
</li>
</ul>
</div>
事件:第一种执行方法的方式v-on:click v-on:click="getData()
第二种执行方法的方式@click @click="getData()
v-model(双向数据绑定)表示 初始化的时候把data上面的数据可以赋值给input , 当input改变的时候又会把值赋值给v-model的值