首先引入vue的包:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
本次案例除了引入vue的包外,还需要引入第三方的包:
<!-- 因为 AJAX 库和通用工具的生态已经相当丰富,Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
首先我们找到一个接口:
该接口是提供一个json接口,返回问题的答案yes或者no以及相应的动态图
html结构如下:
<body>
<div id="watch-example">
<p>
提出一个答案只能是Yes/No的问题:
<input type="text" v-model="question" />
</p>
<p>
{{ answer }}<br>
<img src="https://yesno.wtf/assets/yes/7-653c8ee5d3a6bbafd759142c9c18d76c.gif" width="300px" height="200px">
</p>
<!--no: https://yesno.wtf/assets/no/21-05540164de4e3229609f106e468fa8e7.gif-->
<!--yes: https://yesno.wtf/assets/yes/7-653c8ee5d3a6bbafd759142c9c18d76c.gif-->
</div>
</body>
然后我们创建一个Vue实例,使用watch对输入框进行监听。如果发生变化,则向https://yesno.wtf/api发起请求,并处理响应过来的json字符串。
<script>
var watchExampleVm = new Vue({
el:'#watch-example',
data:{
question:'',
answer:'没有问题我怎么回答?'
},
watch:{
//如果question发生改变,这个函数就会运行
question:function(){
this.answer = '等待关闭';
//调用方法
this.getAnswer()
}
},
methods:{
// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
// 在这个例子中,我们希望限制访问 yesno.wtf/api 的频率
// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识,
// 请参考:https://lodash.com/docs#debounce
getAnswer: _.debounce(function(){
if (this.question.indexOf('?') === -1) {
this.answer = '问题通常有一个标记. ;-)';
return
}
this.answer = '思考中';
var vm = this;
axios.get('https://yesno.wtf/api').then(function(response){
vm.answer = _.capitalize(response.data.answer);
var img = document.getElementsByTagName("img")[0];
//用于替换所用的图片
img.src = response.data.image;
}).catch(function(error){
vm.answer = '错误,不能捕捉到API.' + error
}),
// 判定用户停止输入等待的毫秒数
500
})
}
})
</script>
运行结果如下:
当输入带?(英文的)的提问?就会发出请求