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

时间：2022-09-12 20:55:53

cmd下安装axios

npm install axios

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

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

思路:

监听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异步请求数据,返回字符串

09.VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据,返回字符串的更多相关文章

  1. 09&period;1&period;VUE学习之watch监听属性变化实现类百度搜索栏功能ajax异步请求数据&comma;返回数组

    09.1html里 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &lt ...

  2. 009——VUE中watch监听属性变化实现类百度搜索栏功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. vue（4）—— vue的过滤器，监听属性，生命周期函数，获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

  4. Android学习——动态注册监听网络变化

    新建一个BroadcastTest项目,然后修改MainActivity中的代码,如下: public class MainActivity extends AppCompatActivity { p ...

  5. angularJs之&dollar;watch监听属性变化访问后台

  6. 监听EditText变化---TextWatcher 类用法详解

    http://www.cnblogs.com/yjing0508/p/5316985.html TextWatcher textWatcher = new TextWatcher() { @Overr ...

  7. vue条件语句、循环语句、计算属性、侦听器监听属性

    因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...

  8. vue&period;js 监听属性的学习&sol; 千米、米的转换 &sol;时、分、秒 的转换

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. vue中的computed（计算属性）和watch&lpar;监听属性&rpar;的特点，以及深度监听

    //计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...

随机推荐

  1. BackTrack5-r3安装VMware Tools

    bt login:root //默认的BT系统账号password:toor //默认的BT系统密码,这里的密码是不显示的.root@bt:~#startx //进入图形模式 启动BT虚拟机系统-在V ...

  2. Myeclipse解决dubbo标签不识别问题

    Myeclipse解决dubbo标签不识别问题,引入dubbo.xsd文件,即可:              

  3. codeforces 425D

    题意:给定n<=100000个二维点,并且0<=x,y<=100000,求有多少个平行于坐标轴的正方形 思路:本来想hash的,但是感觉不好弄.. 后来感觉像是分块,最坏的情况就是那 ...

  4. Java Sleep&lpar;&rpar; 与 Wait&lpar;&rpar;的机制原理与区别

    一.概念.原理.区别    Java中的多线程是一种抢占式的机制而不是分时机制.线程主要有以下几种状态:可运行,运行,阻塞,死亡.抢占式机制指的是有多个线程处于可运行状态,但是只有一个线程在运行. 回 ...

  5. 【05】了解C&plus;&plus;默默编写并调用那些函数

    1.如果没有声明copy构造方法,copy赋值操作符,和析构方法,编译器会自动生成这些方法,且是inline. 2.如果没有声明任何构造方法,编译器会自动生成一个default构造方法,且是inlin ...

  6. windows本地搭建grunt前端项目构建环境

    初学,目前对grunt的理解和需求仅在于简单的文件合并.压缩.语法检查,其强大功能还有待研究. 安装前环境准备 (1)grunt依赖nodejs运行环境,所以要玩grunt得先把nodejs安装好,n ...

  7. axure团队合作开发原型图

    谁是人画或其他原型图的头,但在基本制度的发展时,.我们分配一些人画的原型,其他部分干. 再画一个原型不再是一个人画,一起画,假设大家都各自画自己那一部分.最后再由一个人来整合的画.是非常麻烦. 咱平时 ...

  8. CSS3的使用方法解析

    自己过去有段时间使用CSS3开发过一些小的部件和效果,但是由于太久没有再次去使用,导致当自己再次去使用的时候我就需要去翻手册重新找一次然后按着方法使用才可以. 现在我就把这份CSS3的使用技巧展示给各 ...

  9. Android 展示控件之Surface、SurfaceView、SurfaceHolder及SurfaceHolder&period;Callback之间的关系

    一.Surface Surface在SDK的文档中的描述是这样的:Handle onto a raw buffer that is being managed by the screen compos ...

  10. 在Mac上 python中使用tesseract OCR &lpar;Pytesser&rpar; 识别图片中的文字

    仓库地址:https://github.com/RobinDavid/Pytesser brew install tesseract sudo pip install opencv-python 安装 ...

相关文章