Vue2.0-侦听器

最新推荐文章于 2022-11-25 09:17:30 发布

acheding

最新推荐文章于 2022-11-25 09:17:30 发布

阅读量88

点赞数 1

文章标签： vue

这是一个关于Vue2.0的实战示例，展示了如何使用Vue的数据绑定、事件监听和第三方库（如Axios和Lodash）实现用户输入问题后通过API获取答案的功能。当用户停止输入500毫秒后，应用会限制API请求频率并显示回答。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>vue2.0-2</title>
		<style>
			[v-clock] {
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="watch-example">
			<p>
				Ask a yes/no question:
				<input v-model="question" />
			</p>
			<p>{{answer}}</p>
			<h1 v-show="ok">Hi</h1>
		</div>
		<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
		<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>
			<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
			<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
			var watchExampleVM = new Vue({
				el: '#watch-example',
				data: {
					question: '',
					answer: 'I cannot give you an answer until you ask a question!',
					ok: false
				},
				watch: {
					// 如果 `question` 发生改变，这个函数就会运行
					question: function(newQuestion, oldQuestion) {
						this.answer = 'Waiting for you to stop typing...'
						this.debouncedGetAnswer()
					}
				},
				created: function() {
					// `_.debounce` 通过 Lodash 限制访问 yesno.wtf/api 的频率
					// AJAX 请求直到用户输入完毕才会发出
					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>