vue monitor the use of watch to achieve a similar Baidu search

The method listens watch, watch can monitor multiple variables, look at the code specific use:

HTML:

<! DOCTYPE HTML > 
< HTML lang = "EN" > 
< head > 
    < Meta charset = "UTF-. 8" > 
    < title > vue.js listening watch used to achieve a similar search Baidu   </ title > 
    < Script the src = "VUE .js " > </ Script > 
    < Script the src =" the node_modules / Axios / dist / axios.js " > </ Script > 
</ head > 
< body > 
<div id="ask"><!--vue body and can not control the html tag -> 
    < INPUT type = "text" V-Model = "Word" > 
    < h1 of > {Result} {} </ h1 of > 
</ div > 
< Script > 
    var App =  new new Vue ({ // instantiate VUE 
        EL: ' #ask ' , // VUE ask the control of the element id, 
        @ Watch can monitor multiple variables 
        Watch: {
             // listener word variable 
            word: function (newV, oldV) { 
                Console .log(' Old values: ' + oldV + ' =======> new value: ' + newV);
                 // Here you can write an asynchronous request I use Axios 
                axios.get ( ' api.php Word =? ' + newV) .then ( function (RES) { 
                    the console.log (RES, ' which is the value returned by the asynchronous ' );
                     // where asynchronous write operation after the value obtained 
                    app.result = res.data; 
                }); 
            } 
        }, 
        Data: { 
            Word: '' , 
            Result:''

        }
    });
</script>
</body>
</html>

 

Guess you like

Origin www.cnblogs.com/tommymarc/p/11627424.html