Vue中的数据监听和数据交互案例解析

new Vue({        el:"#div",        data:{          arr:[1,2,3]        }      }).$watch("arr",function () {        alert("数据改变了")      })

<div id="div"><input type="button" value="改变" @click="arr.push(5)"><h1>  {{arr}}</h1></div>

 a{      text-decoration: none;      color: black;    }    #div{      text-align: center;      padding-top: 50px;    }    input{      height: 25px;      width: 500px;      border-radius: 5px;      outline: none;    }    ul{      margin-left:470px;      margin-top: 0;    }    li{      height: 25px;      text-align: left;      border:1px solid gray;      list-style: none;      width: 500px;    }

new Vue({        el:"#div",        data:{          msg:" ",          arr:[]        },        methods:{          get:function () {            this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?',{              wd:this.msg            },{              jsonp: 'cb'            }).then(function(res){              this.arr=res.data.s            },function(s){              console.log(s);            });          }        }      })

<div id="div"><input type="text" v-model="msg" @keyup="get()"><ul>  <li v-for="item in arr"><a href="javascript:;" rel="external nofollow" >{{item}}</a></li></ul></div>