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

Posted HaimaBlog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据相关的知识,希望对你有一定的参考价值。

cmd下安装axios

npm install axios

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

思路:
监听data里的word改变时,发送ajax异步请求数据,
把返回的数据赋值给data里的result,再传给模板里

9.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>vue</title>
	<link rel="stylesheet" href="">
	<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
	 <script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="node_modules/axios/dist/axios.js"></script>
</head>
<body>
	<div id="vue">
		<!--当input里的值改变时,会改变data里的word-->
		<input type="text" v-model="word">
		<h1>
			<!--拿到data里的result里的值-->
			结果:{{result}} 
		</h1>
	</div>
</body>
<script type="text/javascript">
	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:\'\'
		}
	});
</script>
</html>

9.php里

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2019/1/5
 * Time: 10:42
 */


print_r(\'要搜索的内容是:\'.$_GET[\'word\']);
?>

效果:

以上是关于09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据的主要内容,如果未能解决你的问题,请参考以下文章

vue 中的computed 和 watch 监听

2020-09-13 浅谈: Vue watch监听deep、immediate属性

8vue中得监听属性:watch--- /////watchcomputedmethods得区别

vuejs怎么watch对象里某个属性的变化

关于小程序使用watch监听数据变化的方法

angularJs之$watch监听属性变化访问后台