75 lines
2.7 KiB
HTML
75 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
||
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
||
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
||
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
||
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<title>Page Title</title>
|
||
<meta name="description" content="">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<link rel="stylesheet" href="">
|
||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||
</head>
|
||
<body>
|
||
<!--[if lt IE 7]>
|
||
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
|
||
<![endif]-->
|
||
<div id="watch-example">
|
||
<p>
|
||
Ask a yes/no question:
|
||
<input type="text" v-model="question">
|
||
</p>
|
||
|
||
<p>{{ answer }}</p>
|
||
</div>
|
||
|
||
<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>
|
||
|
||
<script>
|
||
var watchExampleVM = new Vue({
|
||
el: '#watch-example',
|
||
data: {
|
||
question: '',
|
||
answer: 'I cannot give you an answer until you ask a question!'
|
||
},
|
||
watch: {
|
||
// 如果 `question` 发生改变，这个函数就会运行
|
||
question: function (newQuestion, oldQuestion) {
|
||
this.answer = 'Waiting for you to stop typing...'
|
||
this.debouncedGetAnswer()
|
||
}
|
||
},
|
||
created: function () {
|
||
// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
|
||
// 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
|
||
// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
|
||
// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
|
||
// 请参考：https://lodash.com/docs#debounce
|
||
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
|
||
},
|
||
methods: {
|
||
getAnswer: function () {
|
||
if (this.question.indexOf('?') === -1) {
|
||
this.answer = 'Questions usually contain a question mark. ;-)'
|
||
return
|
||
}
|
||
this.answer = 'Thinking...'
|
||
var vm = this
|
||
axios.get('https://yesno.wtf/api')
|
||
.then(function (response) {
|
||
vm.answer = _.capitalize(response.data.answer)
|
||
})
|
||
.catch(function (error) {
|
||
vm.answer = 'Error! Could not reach the API. ' + error
|
||
})
|
||
}
|
||
}
|
||
})
|
||
|
||
</script>
|
||
</body>
|
||
</html> |