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

你可能感兴趣的:(vue基础)