Watch监听器和防抖功能

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>watch侦听器</title>

<!-- watch侦听器

作用:监视数据变化,执行一些 业务逻辑或异步操作

语法:

1.简单写法 简单类型数据,直接监视

2.完整写法 添加额外的配置项 -->

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-size: 18px;

}

#app {

padding: 10px 20px;

}

.query {

margin: 10px 0;

}

.box {

display: flex;

}

textarea {

width: 300px;

height: 160px;

font-size: 18px;

border: 1px solid #dedede;

outline: none;

resize: none;

padding: 10px;

}

textarea:hover {

border: 1px solid #1589f5;

}

.transbox {

width: 300px;

height: 160px;

background-color: #f0f0f0;

padding: 10px;

border: none;

}

.tip-box {

width: 300px;

height: 25px;

line-height: 25px;

display: flex;

}

.tip-box span {

flex: 1;

text-align: center;

}

.query span {

font-size: 18px;

}

.input-wrap {

position: relative;

}

.input-wrap span {

position: absolute;

right: 15px;

bottom: 15px;

font-size: 12px;

}

.input-wrap i {

font-size: 20px;

font-style: normal;

}

</style>

</head>

<body>

<div id="app">

<!-- 条件选择框 -->

<div class="query">

<span>翻译成的语言:</span>

<select>

<option value="italy">意大利</option>

<option value="english">英语</option>

<option value="german">德语</option>

</select>

</div>

<!-- 翻译框 -->

<div class="box">

<div class="input-wrap">

<textarea v-model="obj.words"></textarea>

<span><i>⌨️</i>文档翻译</span>

</div>

<div class="output-wrap">

<div class="transbox">{{ result }}</div>

</div>

</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>

// 接口地址:https://applet-base-api-t.itheima.net/api/translate

// 请求方式:get

// 请求参数:

// (1)words:需要被翻译的文本(必传)

// (2)lang: 需要被翻译成的语言(可选)默认值-意大利

// -----------------------------------------------

const app = new Vue({

el: '#app',

data: {

// words: ''

obj: {

words: ''

},

result: '', // 翻译结果

timer: null // 延时器id

},

// 具体讲解:(1) watch语法 (2) 具体业务实现

watch: {

// 侦听器

// 侦听谁就写谁

// 该方法会在数据变化时调用执行

// newValue新值,oldValue老值(一般不用)

// 该方法会在数据变化时调用执行

// newValue新值, oldValue老值(一般不用)

// words (newValue) {

// console.log('变化了', newValue)

// }

// 拿结果

// async 'obj.words'(newValue){

// // 发请求

// const res = await axios({

// url:'https://applet-base-api-t.itheima.net/api/translate'

// // 接口

// params:{

// words:newValue

// }

// })

// }

'obj.words' (newValue) {

// 此时就可以监视到obj里面的words

// console.log('变化了', newValue)

// 防抖: 延迟执行 → 干啥事先等一等,延迟一会,一段时间内没有再次触发,才执行

clearTimeout(this.timer)

this.timer = setTimeout(async () => {

//

const res = await axios({

url: 'https://applet-base-api-t.itheima.net/api/translate',

params: {

words: newValue

}

})

this.result = res.data.data

console.log(res.data.data)

}, 300)

}

}

})

</script>

</body>

</html>

相关推荐
树上有只程序猿19 小时前
终于有人把数据库讲明白了
前端
猩兵哥哥19 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
司宸19 小时前
Prompt设计实战指南:三大模板与进阶技巧
前端
RoyLin19 小时前
TypeScript设计模式:抽象工厂模式
前端·后端·typescript
华仔啊19 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
江城开朗的豌豆19 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
vivo互联网技术19 小时前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js
江城开朗的豌豆20 小时前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
会飞的青蛙20 小时前
GIT 配置别名&脚本自动化执行
前端·git