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异步请求数据,返回字符串的更多相关文章

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

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

  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之$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.js 监听属性的学习/ 千米、米的转换 /时、分、秒 的转换

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

  9. vue中的computed（计算属性）和watch(监听属性)的特点，以及深度监听

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

随机推荐

  1. JAVA多线程面试题目

    1,java中有几种方法可以实现一个线程? 答:在Java中实现一个线程有两种方法,第一是实现Runnable接口实现它的run()方法,第二种是继承Thread类,覆盖它的run()方法.这两种方法 ...

  2. Java 内存模型（一）

    打算花比较长的篇幅来描述下自己理解的JVM,尽量描述的清晰易懂一些,从简单慢慢到慢慢深入,一方面自己也复习一下,一方面也供大家参考,少走些弯路.鉴于本人水平有限,如有错误的地方,欢迎指出,感谢. 一段 ...

  3. Windbg .net内存调试有用的命令（笔记 ）

    和.net内存调试相关的Windbg命令 首先.load sosex.dll加载ex调试扩展dll 1.!gcgen [obj地址] 显示对象属于gc代数 2.!dumpgen [0/1/2] dum ...

  4. 关于小程序后台post不到数据的问题

    小程序post请求获取不到数据问题 把headers的参数“Content-Type”的值改为application/x-www-form-urlencoded: Request Body Type ...

  5. android读写SD卡封装的类

    参考了网上的一些资源代码,FileUtils.java: package com.example.test; import java.io.BufferedInputStream; import ja ...

  6. 如何下载最新的固件到Pixhawk

    连接Pixhawk至电脑 当Mission Planner 已经安装至你的电脑上,使用micro USB数据线连接pixhawk到您的计算机上. 使用一个USB端口直接在您的计算机上,不要用USB集线 ...

  7. Thymeleaf的模板使用介绍

    参考网址: https://blog.csdn.net/hry2015/article/details/73476973 先定义一个html文件, 如下: 文件路径: templates/templa ...

  8. LeetCode Find Peak Element 找临时最大值

    Status: AcceptedRuntime: 9 ms 题意:给一个数组,用Vector容器装的,要求找到一个临时最高点,可以假设有num[-1]和num[n]两个元素,都是无穷小,那么当只有一个 ...

  9. 【硬盘整理】使用UltimateDefrag将常用文件放置在磁盘最外圈

    使用方法未知.软件截图如下: 官方网站(英文):http://www.disktrix.com/ 汉化破解版V3.0下载地址:http://page2.dfpan.com/fs/7com9monca3 ...

  10. IOS 控制器的数据传递 (顺传 and 逆传)

    ● 控制器之间的数据传递主要有2种情况:顺传和逆传 ➢ 顺传 ●  控制器的跳转方向: A ->C ●  数据的传递方向 : A -> C ● 数据的传递方式 : 在A的prepareFo ...