Created
May 14, 2017 02:37
-
-
Save WeiChiaChang/37f62f0d68535675bce6a36cb471c27c to your computer and use it in GitHub Desktop.
JS Bin [Vue 打 API] // source http://jsbin.com/rivuboy
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="description" content="[Vue 打 API]"> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
</head> | |
<body> | |
<div id="watch-example"> | |
<p> | |
Ask a yes/no question: | |
<input v-model="question"> | |
</p> | |
<p>{{ answer }}</p> | |
</div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script> | |
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script> | |
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script> | |
<script id="jsbin-javascript"> | |
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) { | |
this.answer = 'Waiting for you to stop typing...' | |
this.getAnswer() | |
} | |
}, | |
methods: { | |
// _.debounce 是一个通过 lodash 限制操作频率的函数。 | |
// 在这个例子中,我们希望限制访问yesno.wtf/api的频率 | |
// ajax请求直到用户输入完毕才会发出 | |
// 学习更多关于 _.debounce function (and its cousin | |
// _.throttle), 参考: https://lodash.com/docs#debounce | |
getAnswer: _.debounce( | |
function () { | |
var vm = this | |
if (this.question.indexOf('?') === -1) { | |
vm.answer = 'Questions usually contain a question mark. ;-)' | |
return | |
} | |
vm.answer = 'Thinking...' | |
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 | |
}) | |
}, | |
// 这是我们为用户停止输入等待的毫秒数 | |
500 | |
) | |
} | |
}) | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript"> | |
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) { | |
this.answer = 'Waiting for you to stop typing...' | |
this.getAnswer() | |
} | |
}, | |
methods: { | |
// _.debounce 是一个通过 lodash 限制操作频率的函数。 | |
// 在这个例子中,我们希望限制访问yesno.wtf/api的频率 | |
// ajax请求直到用户输入完毕才会发出 | |
// 学习更多关于 _.debounce function (and its cousin | |
// _.throttle), 参考: https://lodash.com/docs#debounce | |
getAnswer: _.debounce( | |
function () { | |
var vm = this | |
if (this.question.indexOf('?') === -1) { | |
vm.answer = 'Questions usually contain a question mark. ;-)' | |
return | |
} | |
vm.answer = 'Thinking...' | |
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 | |
}) | |
}, | |
// 这是我们为用户停止输入等待的毫秒数 | |
500 | |
) | |
} | |
}) | |
</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) { | |
this.answer = 'Waiting for you to stop typing...' | |
this.getAnswer() | |
} | |
}, | |
methods: { | |
// _.debounce 是一个通过 lodash 限制操作频率的函数。 | |
// 在这个例子中,我们希望限制访问yesno.wtf/api的频率 | |
// ajax请求直到用户输入完毕才会发出 | |
// 学习更多关于 _.debounce function (and its cousin | |
// _.throttle), 参考: https://lodash.com/docs#debounce | |
getAnswer: _.debounce( | |
function () { | |
var vm = this | |
if (this.question.indexOf('?') === -1) { | |
vm.answer = 'Questions usually contain a question mark. ;-)' | |
return | |
} | |
vm.answer = 'Thinking...' | |
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 | |
}) | |
}, | |
// 这是我们为用户停止输入等待的毫秒数 | |
500 | |
) | |
} | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment