09.VUE學習之watch監聽屬性變化實現類百度搜索欄功能ajax異步請求數據
阿新 • • 發佈：2019-01-05
class ivr url 實現類 int php head 實現 sta
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異步請求數據