一，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的值