vue中watch进行ajax,09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据...

cmd下安装axios

npm install axios

安装好后,会多出node_modules文件夹

思路:

监听data里的word改变时,发送ajax异步请求数据,

把返回的数据赋值给data里的result,再传给模板里

9.html

vue

结果:{{result}}

var app=new Vue({

el:‘#vue‘,

watch:{ //监听data里的word的变化

// 拿到input里的新值和旧值

word:function(new_v,old_v){

// console.log(new_v+‘=>‘+old_v);

var url = ‘9.php?word=‘+new_v;

// ajax get异步请求

axios.get(url).then(function(response){

console.log(response);

app.result = response.data //赋值给data里的result

});

}

},

data:{

word:‘‘,

result:‘‘

}

});

9.php里

/**

* Created by PhpStorm.

* User: Administrator

* Date: 2019/1/5

* Time: 10:42

*/

print_r(‘要搜索的内容是:‘.$_GET[‘word‘]);

?>