vue基础

一，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中

{{msg}}

{{result.msg}}

• {{key}}----{{item}}

• {{item.cate}}

  1. {{i.title}}

事件：第一种执行方法的方式v-on:click    v-on:click="getData()

           第二种执行方法的方式@click        @click="getData()

v-model（双向数据绑定）表示 初始化的时候把data上面的数据可以赋值给input ， 当input改变的时候又会把值赋值给v-model的值