Data listening and Data Interaction in vue, vue data listening data

Data listening and Data Interaction in vue, vue data listening data

Now let's take a look at the data listening event $ watch in vue,

Js Code:

New Vue ({el: "# div", data: {arr: [1, 2, 3]}). $ watch ("arr", function () {alert ("data changed ")})

Html code:

<Div id = "div"> <input type = "button" value = "change" @ click = "arr. push (5) "> 

This is the array listening. We also use json, but we have to give it a deep listening. The third parameter of $ watch is {deep: true }.
In angular, $ http is used for data interaction. For vue, we also use post, get, and jsonp methods.
Here we will make a simple Baidu search function
Css code:
 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;        }
 
Js Code:
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);                        });                    }                }            })
Html code:
<div id="div"><input type="text" v-model="msg" @keyup="get()"><ul>    <li v-for="item in arr"><a href="javascript:;">{{item}}</a></li></ul></div>
This is a simple small case.